React Apollo Starter

A starter for building a front-end for a graphql server

Features:

• UI via React
• Data via Apollo Client
• Code formatting via Prettier
• Linting via ESLint
• Testing via Jest

Requirements

Node>=9

Configuration

Code Formatting

Modify the .prettierrc as needed

Linting

Modify the .eslintrc as needed

WebpackConfig

Webpack configuration is based on NODE_ENV (default: development)

Shared configuration settings between environments go into webpack.common.js and environment-specific settings should go in their respective environment files (e.g webpack.dev.js)

App Config

By default, the app config is also determined by using the NODE_ENV environment variable. You can tell the application to use a specific config file by adding a --config flag:

npm run start --config=localprod.json

In the above example, localprod.json would be inside the config directory.

Development

A helper init script is provided that copies the sample.json file to dev.json in the config/ directory:

npm run init

Install dependencies and run:

npm install
npm run start

To start a local server in production mode:

npm run start:prod --config=localprod.json

In the above example, this will look for a localprod.json config file in the config directory. You can create your own custom config as needed.

If you want to see the webpack bundle analyzer render in a browser window:

npm run start:stats

Production

Build the production bundle:

npm run build

Then deploy the dist/ directory

Testing

npm run test

Linting

npm run lint

You can pass a --fix flag to automatically fix linting errors, if possible.

npm run lint --fix

Credits

Inspired by Ramsay's React Boilerplate