ReactQL

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.

Features

Stack

GraphQL

  • 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!

Real-time

  • 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!

Styles

  • 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-ready

  • 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 vendor.js.bz goes from 380kb -> 89kb!)
  • Easily extendable webpack-config files, for modular Webpack tweaks
  • Docker support, with an optimised Dockerfile out-the-box

Developer support

Usage

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!

Docker

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 ""