RalphORama / keystone-react

Template for projects with a Keystone + GraphQL backend and React frontend

Keystone + React Project Template

Developed for the Emerson College Engagement Lab

About

⚠️ This project is under development, don't use it for production projects (yet) ⚠️

This project integrates ReactJS and Webpack with KeystoneJS. Keystone uses the webpack-dev-middleware and webpack-hot-middleware to serve the files generated by Webpack and provide hot module replacement.

In production, Keystone serves the files compiled by Webpack (stored in public/) with @keystonejs/app-static.

Keystone provides a GraphQL API which can be queried by your React frontend. See Keystone's GraphQL API Docs for more information.

This project comes pre-loaded with the Apollo GraphQL client for React. See Getting Started with Apollo for usage information.

To-Do

• Update build script to run Webpack as well.
• Write Webpack production config. (#2)

Project Structure

• /: Standard Keystone project assets and assorted dotfiles.
  • server.js: Modified Keystone server instance
  • index.js: Standard Keystone server configuration
• client: Source for the React front-end
  • public: Folder for static resources (index.html, images, etc.)
• public: Output folder for Webpack
  • NB: npm run dev doesn't create any files in this directory. It is for compiled production assets.

Running the Project

1. Run yarn install
2. Run npm run dev

Once running, the Keystone Admin UI is reachable via localhost:3000/admin. The public site is reachable at localhost:3000.

To build your own GraphQL API, visit localhost:3000/admin/graphiql.

Building the Project

🚨🚨🚨 This will not produce a production React build (yet).

NB: This workflow will probably change in the future.

1. Execute npm run webpack
2. Execute npm run build

Until these instructions change, this will create a development build of React in the public folder. There is currently no production webpack config, but you could write one yourself. Production functionality Coming Soon™.

Code Style

By default, this project uses eslint + the AirBNB code style. If you don't want this functionality, delete the .eslintrc.json files in / and /client, or modify them to use the code style guide you prefer.