Typescript GraphQL React Fullstack App (TGRStack)

About

This starter kit is a launching point for Typescript Graphql React Fullstack prototyping. Running the build script compiles src/ into build/ with build/server/ being an express-server ready for pm2.

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 examples at www.TGRStack.com. Skip to the bottom for links to a series of tutorials that walkthrough the creation of this module.

Requirements

• Install Node and Setup Dev Envionment - Most can skip this
• Install MongoDB - Dev Endpoint is config'd to use a local MongoDB
• Review ./webpack/paths.js, ./scripts/*, ./tslint.json, ./docs/

Commands - READ THIS

* nps                   # Starts the Dev Server, 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

Built In

• Page layed out with Header/Body
• Router split between LoggedIn and LoggedOut
• AuthWall w/ PassportJS. Create Users and Login w/ Passport Password, stored in Mongo

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
• 🚦 tslint configured for strict, consistent, code style

Express

• 🌐 express-server
• 🍞 in dev a browser to the website is opened
• 🌚 express-sessions
• 🛂 passport for Authorization

MongoDB

• 🏦 mongodb dev helpers (./scripts/mongo.js)
• 🚅 mongoose ORM for better MongoDB development
• 🛂 passport-local-mongoose for Auth w/ Password

GraphQL

• 📻 apollo-client w/ link-state instead of react-redux
• 📡 apollo-server
• 😋 graphiql (not playground because issues w/ sessions/passport)
• 📡 apollo-server w/ subscriptions (websocket)
• 📡 apollo-server 2 <=== ./docs/THINGS_THAT_NEED_FIXING.md

React

• 🐉 React 16+
• 👾 page reloads when a change is available, exits when the server is closed
• 👾 HMR reloads the changed code w/o refreshing the entire page
• 👾 BrowserSync

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] X [server, client]
• 🚦 ts-loader for compiling typescript
• 🚦 webpack-graphql-loader for separating gql from ts files
• 💦 babel-loader for additional polyfills (browser support)
• 😎 HappyPack for Multi-Threaded builds
• 🤖 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-graphql-react-fullstack my-project
cd my-project
rm -rf .git && git init
git add .
git commit -m "INIT'd w/ @Falieson/2018-typescript-graphql-react-fullstack@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 ( "build/my-project.js" => "build/server/index.js" )
- repository.url
- author
- license ( use whatever you want )

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

Stack

• TS-React-App
• TS-GraphqL-Endpoint
• TS-Module

Docs

• Wiki
• Tutorials and Examples
• Changelog