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
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.
- ReactQL CLI for quickly starting a new project
- New in 2.x: React v16 for UI
- New in 2.x: Apollo Server for enabling the built-in GraphQL server
- Apollo Client (React) for connecting to GraphQL
- React Router 4 for declarative browser + server routes
- Redux for flux/store state management
- New in 2.x: Built-in GraphQL server via - just pass in your schema, and enable
/graphqlwith 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
.gqlGraphQL query files, use fragments, or type queries inline.
- 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
<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
- 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
- New in 2.x: Userland configuration. No need to edit kit code; simply use the built-in
- 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
vendor.js.bzgoes from 380kb -> 89kb!)
- Easily extendable webpack-config files, for modular Webpack tweaks
- Docker support, with an optimised
- ESLint v3ing based on a tweaked Airbnb style guide
- Jest test runner
- Node Inspector support for SSR in dev mode - remotely debug the server, set breakpoints, inspect the stack from within Chrome
- Tons of code commentary to fill you in on what's happening under the hood
- Extensive, up-to-date online documentation
- Examples repository, with real-world use cases
See the CLI tool for easily deploying this starter kit on Mac, Windows or Linux.
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://
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.