Developed for the Emerson College Engagement Lab
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.
- Update build script to run Webpack as well.
- Write Webpack production config. (#2)
/
: Standard Keystone project assets and assorted dotfiles.server.js
: Modified Keystone server instanceindex.js
: Standard Keystone server configuration
client
: Source for the React front-endpublic
: 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.
- NB:
- Run
yarn install
- 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
.
🚨🚨🚨 This will not produce a production React build (yet).
NB: This workflow will probably change in the future.
- Execute
npm run webpack
- 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™.
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.