Universal full-stack Node.js + React + GraphQL starter kit, written in Typescript.
- React v16 for UI.
- Apollo Client 2.0 (React) for connecting to GraphQL.
- MobX for declarative, type-safe flux/store state management (automatically re-hydrated from the server.) which is auto-saved and reloaded to
localStoragein the client (simple to disable if you don't need it.) - Emotion CSS-in-JS, with inline
<style>tag generation that contains only the CSS that needs to be rendered. - Sass, Less and PostCSS when importing
.css/.scss/.lessfiles. - React Router 4 for declarative browser + server routes.
- GraphQL Code Generator for parsing remote GraphQL server schemas, for automatically building fully-typed Apollo React HOCs instead of writing
<Query>/<Mutation>queries manually - Declarative/dynamic
<head>section, using react-helmet.
- Built-in Koa 2 web server, with async/await routing.
- Full route-aware server-side rendering (SSR) of initial HTML.
- Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
- Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.
- MobX for app-wide flux/store state, with a built-in
<StateConsumer>for automatically re-rendering any React component that 'listens' to state and full client-side rehydration. Fully typed state! - Full page React via built-in SSR component - every byte of your HTML is React.
- SSR in both development and production, even with hot-code reload.
- Hot code reloading; zero refresh, real-time updates in development.
- Development web server that automatically sends patches on code changes, and restarts the built-in Web server for SSR renders that reflect what you'd see in production.
- WebSocket
subscriptionquery support for real-time data (just setWS_SUBSCRIPTIONS=1in .env)
- Webpack v4, with tree shaking -- dead code paths are automatically eliminated.
- Asynchronous code loading when
import()'ing inside a function. - Automatic per-vendor chunk splitting/hashing, for aggressive caching (especially good behind a HTTP/2 proxy!)
- Gzip/Brotli minification of static assets.
- CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together!
- Emotion, for writing CSS styles inline and generating the minimal CSS required to properly render your components.
- PostCSS v7 with next-gen CSS and automatic vendor prefixing when importing
.css,.scssor.lessfiles. - SASS and LESS support (also parsed through PostCSS.)
- Automatic vendor prefixing - write modern CSS, and let the compiler take care of browser compatibility.
- Mix and match SASS, LESS and regular CSS - without conflicts!
- CSS modules - your classes are hashed automatically, to avoid namespace conflicts.
- Compatible with Foundation, Bootstrap, Material UI and more. Simply configure via a
.global.(css|scss|less)import to preserve class names.
- Production bundling via
npm run production, that generates optimised server and client code. - Static compression using the Gzip and Brotli algorithms for the serving of static assets as pre-compressed
.gzand.brfiles (your entire app'smain.js.bz- including all dependencies - goes from 346kb -> 89kb!) - Static bundling via
npm run build:static. Don't need server-side rendering? No problem. Easily deploy a client-only SPA to any static web host (Netlify, etc.)
- Written in Typescript with full type support, out the box (all external
@types/*packages installed) - Heavily documented code
Grab and unpack the latest version, install all dependencies, and start a server:
git clone https://github.com/zakariaharti/falconql.git
cd faclconql
yarn install
yarn start
Your development server is now running on http://localhost:3000
Development mode offers a few useful features:
-
Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Emotion, SASS - pretty much anything.
-
Full source maps for Javascript and CSS.
-
Full server-side rendering, with automatic Koa web server restarting on code changes. This ensures the initial HTML render will always reflect your latest code changes.
To get started, simply run:
yarn start
A server will be started on http://localhost:3000
In production mode, the following happens:
-
All assets are optimised and minified. Javascript, CSS, images, are all compiled down to static files that will appear in
dist. -
Assets are also compressed into
.gz(Gzip) and.br(Brotli) versions, which are served automatically to all capable browsers. -
If files have been generated in a previous run, they will be re-used on subsequent runs. This ensures really fast server start-up times after the initial build.
To build and run for production, use:
yarn run production
Files will be generated in ./dist, and a server will also be spawned at http://localhost:3000
Clean the cached production build with npm run clean, or run npm run clean-production to both clean and re-run the production build, as needed.
If you only want to build assets and not actually run the server, use:
yarn run build:production
Here's a list of all the NPM script commands available out-the-box:
| Command | What it does |
|---|---|
npm run build:production |
Builds production-ready client/server bundles, but doesn't start a server. |
npm run build:static |
Builds production-ready client bundle and index.html; ignores server bundling. |
npm run clean |
Removes the dist folder, and any previously built client/server bundle. |
npm run dev |
Runs a univeral dev server in memory; auto restarts on code changes and uses hot-code reload in the browser. Does not output anything to dist. |
npm run dev:static |
Runs a client-only dev server using [src/views/static.html] as the template; full hot-code reload. Also doesn't output anything to dist. |
npm run production |
Builds and runs a production-ready client/server bundle. If previously built, will re-use cached files automatically (run npm run clean to clear cache.) |
npm run production:clean |
Same as above, but cleans dist first to ensure a fresh re-build. |
npm start |
Shortcut for npm run dev. |