Full-stack React + GraphQL, done properly.
Want to install quickly? Use the CLI - it does the heavy lifting for you.
- ReactQL CLI for quickly starting a new project (or upgrading an existing one)
- 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
- Write
.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
- Declarative/dynamic
<head>section, using react-helmet - Full page React via built-in
<Html>component - every byte of your HTML is React! - Run plain HTTP and SSL from the same port - just
config.enableSSL(sslOptions)in your app code
- 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
Configsingleton - 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
.gzand.brfiles (defaultvendor.js.bzgoes from 380kb -> 89kb!) - Easily extendable webpack-config files, for modular Webpack tweaks
- Docker support, with an optimised
Dockerfileout-the-box
- 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
- Get the ReactQL CLI tool with
npm i -g reactql - Mac, Windows and Linux compatible
- One command to start a new project:
reactql new - One command to upgrade an existing one:
reactql upgrade - Takes care of the stuff you shouldn't have to:
reactql newdownloads the kit, unzips the files, removes artefacts, builds yourpackage.json, installs required NPM packages, and dumps the start-up commands in your terminal, so you can start coding right away
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://<docker_host>:4000 will yield the ReactQL project code.
Get the latest updates by following us on Twitter: https://twitter.com/reactql
Complete documentation @ https://reactql.org
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.