Skip to content

TGRstack/typescript-graphql-react-app

Repository files navigation

Typescript React App (TGRStack)

Known Vulnerabilities

TypeScript React Apollo WebPack Node

TSLint TS-Jest

NPS friendly Commitizen friendly Semver friendly

About

This starter kit is a launching point for TS React module development. Running the build script compiles src/ into a build that is ready to be deployed to a server. This module is part of a collection of uniformly built starter-kits designed for large-scale application development with TypeScript, GraphQL, and React. Find these, articles, and examplse at www.TGRStack.com. Skip to the bottom for links to a series of tutorials that walkthrough the creation of this module.

Commands - READ THIS

* nps                   # Executes the module, watching for rebuilds.
* nps help              # Displays all available commands
* nps commit            # Creates a commit, don't use `git commit -m ...`
* nps build             # Builds the module
* nps lint              # Lint checks the module
* nps test              # Test checks the module

Features

Core

  • 🚀 ES2018+ support syntax that is stage-3 or later in the TC39 process.
  • 🎛 Preconfigured to support development and optimized production builds
  • 🎶 typescript incremental returns reducing development bugs
  • 💎 apollo-client w/ link-state instead of react-redux

React

  • 🐉 React 16+
  • 👾 HMR reloads the Changed Code w/o refreshing the entire page

CSS

  • 🌅 typings-for-css-modules-loader replaces 'css-loader' for webpack
  • 🎠 typings-for-css-modules-loader generates d.ts for css files
  • 🌇 sass-loader adds vars, imports, heirarchies to css.
  • replace sass support w/ stylable.io

Style

  • 🚦 tslint configured for strict, consistent, code style
  • 🚦 ts-prettier for some of that code-consistancy that's missing from tslint
  • 🚦 SonarTS Static code analyzer detects bugs and suspicious patterns

Tests

  • 🎭 jest as the test framework.
  • 🎭 ts-jest configured to test TS files, uses tsconfig.jest.json, and skip babel.
  • 🎭 enzyme makes it easier to assert, manipulate, and traverse components.
  • 🎭 react-testing-library maintainable tests that avoid impl. details.
  • 🎭 jest-dom patterns for dom testing, compat w/ react-testing-library.

Build (w/ Webpack)

  • 📦 All source is bundled using Webpack v4
  • 🌟 webpack for dev, prod, common
  • 🚦 ts-loader for compiling typescript
  • 🚦 webpack-graphql-loader for separating gql from ts files
  • 💦 babel-loader for additional polyfills (browser support)
  • 😎 HappyPack
  • 🤖 Auto generated Vendor DLL for smooth development experiences
  • 🍃 Tree-shaking

Utils

  • 🎮 nps node-package-scripts removes the limitation of package.json enabling JS & //comments . Modify /package-scripts.js and use nps <command> instead of npm run <command>.
  • 🙌 commitizen to help us generate beautifully formatted and consistent commit messages.
  • 😹 cz-emoji is a plugin for commitizen that adds emoji to the commit template.
  • 🏆 standard-version is a replacement for npm version with automatic CHANGELOG generation
  • commitlint validates commit messages to follow commitizen patterns

Getting started

To use the starter-kit to build your own ts-module run these commands:

git clone https://github.com/Falieson/2018-typescript-module.git my-project
cd my-project
rm -rf .git && git init
git commit -m "INIT'd w/ Falieson's 2018-typescript-module@SHA4985"
npm install
nps test
nps

Open package.json and reset following fields:

- name
- version ( It is recommended to start from 1.0.0 )
- description
- main ( "umd/typescript-lib-starter.js" => "umd/{name}.js" )
- repository.url
- author
- license ( use whatever you want )

Now go make some changes to src/index.ts to see the tooling in action.

File Structure

src/
├── app/          - global app stuff
├── components/   - the pieces used in the routes, abstracts modules
├── middlewares/  - third-party HOC functionality (apollo, router)
└── modules/      - first-party modules
    └── ui        - prototyping the module before extracting it to its own module
├── routes/       - define page for a route
├── types/        - ts modules, common, interfaces
└── utils/      - useful functions

Stack

Docs