leebenson / reactql

Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
https://reactql.org
MIT License
1.82k stars 174 forks source link
apollo apollo-client brotli emotion graphql gzip helmet hot-reload less postcss react reactjs sass server-side-rendering ssr starter-kit typescript universal webpack webpack4
ReactQL v4.3.0

license Twitter Follow Deploy to Netlify

Universal front-end React + GraphQL starter kit, written in Typescript.

https://reactql.org

Features

Front-end stack

Server-side rendering

Real-time

Code optimisation

Styles

Production-ready

Developer support

Quick start

Grab and unpack the latest version, install all dependencies, and start a server:

wget -qO- https://github.com/leebenson/reactql/archive/4.5.1.tar.gz | tar xvz
cd reactql-4.5.1
npm i
npm start

Your development server is now running on http://localhost:3000

Building GraphQL HOCs

By default, your GraphQL schema lives in schema/schema.graphql

To create fully Typescript-typed Apollo React HOCs based on your schema, simply put the query in a .graphql anywhere inside the source folder, and run:

npm run gen:graphql

You can then import the query like we do in the HackerNews demo component:

// Query to get top stories from HackerNews
import { GetHackerNewsTopStoriesComponent } from "@/graphql";

And use it as follows:

<GetHackerNewsTopStoriesComponent>
    {({ data, loading, error }) => (...)}
</GetHackerNewsTopStoriesComponent>

To get access to the underlying gql-templated query (in case you need it for refetching, etc), in this case it'd be GetHackerNewsTopStoriesDocument.

See GraphQL Code Generator for more details on how it works.

You can also edit codegen.yml in the root to point to a remote schema, or change the file location.

Development mode

Development mode offers a few useful features:

To get started, simply run:

npm start

A server will be started on http://localhost:3000

Production mode

In production mode, the following happens:

To build and run for production, use:

npm 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.

Build mode

If you only want to build assets and not actually run the server, use:

npm run build:production

This is used in the Dockerfile, for example, to pre-compile assets and ensure faster start-up times when spawning a new container.

Static bundling for client-only SPAs

If you're targeting a client-only SPA and hosting statically, you probably don't want to run a Koa web server to handle HTTP requests and render React.

Instead, you can use static mode, which produces the client-side JS, CSS and assets files, along with an index.html for minimal bootstrapping, and dumps them in dist/public.

You can then upload the contents of that folder wherever you like - et voila, you'll have a working client-side Single Page App!

There are two static modes available -- for dev and production:

 Development (hot-code reload)

Just like the full-stack version, dev mode gives you hot code reloading, so changes to your local files will be pushed to the browser.

To activate static dev mode, just run:

npm run dev:static

Your client-side SPA will be online at http://localhost:3000, just like normal.

 Production (static deployment)

To build your client-side files ready for production deployment, run:

npm run build:static

You'll get everything in that 'regular' building provides you with plus a index.html to bootstrap your JS, just without the server parts.

Modifying the index.html template

If you want to make changes to the index.html file that's used for static bundling, edit src/views/static.html

NPM commands

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.

Project layout

The important stuff is in src.

Here's a quick run-through of each sub-folder and what you'll find in it:

You'll also find some other useful goodies in the [root]()...

Follow @reactql for updates

Get the latest updates by following us on Twitter: https://twitter.com/reactql

Twitter Follow

New to GraphQL? Need help?

ReactQL

Join the ReactQL slack channel here.

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.

Hire me

I'm a full-stack developer with 20+ years experience. As well as 9 years hands-on dev with Node.js, I'm fluent in Python, Go, SQL and NoSQL. I specialise in building robust, scalable products from scratch, and helping you deploy fast.

If you're looking for a senior developer who can help you get your product out the door quickly, reach me at lee@leebenson.com. I'm occasionally available to take on remote contracts when I'm not working on my own projects.