by fortruce

fortruce / relay-skeleton

React, Relay, GraphQL project skeleton

128 Stars 24 Forks Last release: Not found 30 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Fullstack Skeleton

This skeleton project is meant to scaffold a fullstack React, Relay, and GraphQL project. The skeleton uses webpack and gulp to manage the build and provide a great development experience. The frontend stack is React, and Relay. All React changes are automatically hot reloaded using react-hot-loader. Also, the backend server is automatically restarted upon any changes using nodemon.

Both the server and frontend code are built and transpiled using webpack, while gulp is used primarily to start the webpack-dev-server and nodemon.

Getting started

npm start  # Launch the GraphQL server and the Webpack dev server.
open http://localhost:3000

Directory Structure

build/                  // webpack build output
  public/               //  publicly served assets
    bundle.js           // frontend bundle  built w/ webpack
  server.js             // backend server   built w/ webpack
    components/         // React components
    containers/         // Relay Containers
    routes/             // Relay Routes
    index.js            // React.render Root component
    index.template.html // Template html file that includes React bundle
    data/               // GraphQL Schema definitions
relayPlugin.js          // babel-relay-plugin module

Typical Usage

This skeleton was designed with typical use case of having a backend api serve a React SPA. The skeleton automatically proxies all requests to

thru the webpack-dev-server to the backend GraphQL server.

The frontend is automatically hot reloaded whenever you save a file. See react-hot-loader for more details on how this works. It enables you to immediately see changes in React components without losing application state or having to reload your page!

The backend server is automatically restarted whenever you save a file. If, for example, you modify the GraphQL schema, then the GraphQL server will be restarted to reflect the changes, the

will be regenerated using an introspection query, and the frontend code will be recompiled to re-run
queries through the


The following improvements need to be made:

  • Add a production build flag that removes source maps and minifies js/html.
  • Add loaders to support SASS and introduce a base stylesheet as an example.

I welcome pull requests, but I am trying to keep this skeleton relatively minimal.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.