Travis GitHub stars npm license GitHub issues

ReactQL is full-stack React + GraphQL, done properly — for Mac, Windows and Linux.

It combines best-of-breed choices for UI, GraphQL (server and client), CSS and code bundling, handles server-side rendering (SSR) properly, and is fast and extensible.

It focuses on performance characteristics that you don't often find in other starter kits — offering Zopfli/Brotli compression, automatic vendor splitting, aggressive minification of JS/CSS, instant hot code reloading and fast time-to-first-byte (< 10ms typically), as standard.

It pairs an async web server for handling SSR, non-JS imports (like images, CSS, etc) and works universally. Your code will run both in the browser, and on the server — and you can import images/CSS just like regular Javascript.

Development, production and even static bundling can be invoked with just one command, via the ReactQL CLI.

You can easily bolt-on your own GraphQL server, or point to one off-site.

If you want to shave weeks off your next project boilerplate, try ReactQL.

New in 2.0.0: Full-stack GraphQL + React v16 streaming API

Want to install quickly? Use the CLI - it does the heavy lifting for you.




  • New in 2.x: Built-in GraphQL server via - just pass in your schema, and enable /graphql with a single line of code
  • GraphiQL query browser enabled by default
  • Isomorphic GraphQL client - await data via SSR before rendering HTML; query asynchronously in the browser
  • Avoid network overhead with local GraphQL querying via apollo-local-query
  • Write .gql GraphQL query files, use fragments, or type queries inline.

Server-side rendering

  • Built-in Koa 2 web server, with async/await routing
  • React v16 with streaming API - time-to-first-byte as low as 4-5ms!
  • Full route-aware server-side rendering (SSR) of initial HTML
  • Universal building - both browser + Node.js web server compile down to static files
  • Per-request Redux stores. Store state is dehydrated via SSR, and rehydrated automatically on the client
  • HTTP header hardening with Helmet for Koa
  • Declarative/dynamic <head> section, using react-helmet
  • Full page React via built-in <Html> component - every byte of your HTML is React!


  • Hot code reloading; zero refresh, real-time updates in development
  • React + Redux state preservation on hot reloading, to avoid interrupting your dev flow
  • Development web server that automatically rebuilds and restarts on code changes, for on-the-fly SSR testing with full source maps

Code optimisation

  • Webpack v3, with tree shaking -- dead code paths are automatically eliminated
  • Separate local + vendor bundles, for better browser caching/faster builds
  • Dynamic polyfills, courtesy of babel-preset-env
  • Aggressive code minification with Uglify
  • GIF/JPEG/PNG/SVG crunching for images in production
  • CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together!


  • PostCSS v6 with next-gen CSS and inline @imports
  • 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 and more. Simply configure via a .global.* import to preserve class names

Highly configurable

  • New in 2.x: Userland configuration. No need to edit kit code; simply use the built-in Config singleton
  • Add a GraphQL server with one line of code
  • Add GET|POST|PUT|PATCH|DELETE routes - auto-injected with Koa context and the per-request Redux store
  • Add a custom 404 handler
  • Enable/disable POST body parsing, along with custom options


  • Production bundling, that generates optimised server and client code
  • Static bundling mode for hosting your full app on any static host -- Github pages, S3, Netlify, etc
  • Static compression using the Zopfli Gzip and Brotli algorithms for the serving of static assets as pre-compressed .gz and .br files (default goes from 380kb -> 89kb!)
  • Easily extendable webpack-config files, for modular Webpack tweaks
  • Docker support, with an optimised Dockerfile out-the-box

Developer support


See the CLI tool for easily deploying this starter kit on Mac, Windows or Linux.

Then run npm start in the project root, and away you go!


A Dockerfile is included, that will build, optimise and bundle a production-mode ReactQL web server, your static assets and client-side code -- making it trivial to deploy to production.

Build as normal with:

docker build . -t <project>

Then run with:

docker run -p 4000:4000 <project>

Navigating to http://:4000 will yield the ReactQL project code.

New to GraphQL?

Watch my free 45 minute YouTube video, for a live coding walk-through of putting together a GraphQL server with a database. Learn how to write queries, mutations and handle nested/related data.

If you want to build your own GraphQL server, check out the GraphQL Server repo in examples.

results matching ""

    No results matching ""