react-shuttle

webpack configuration for react app development and deployment

Installation

NOTE it is recommended use a release by adding a #1.0.0 onto the end of the url above. see the releases

Usage

react-shuttle expects the following folders and files to exist:

src/index.js
public/index.html

anything you put inside of /public will get copied over to the build folder.

Scripts

| name | script | description | | --- | --- | --- | | start | react-shuttle start | build the app and start the dev server | | test | react-shuttle test | uses Jest to run tests | | build | react-shuttle build | compile the app, set NODE_ENV to production for optimization | | notify | react-shuttle notify | sends Slack notifications to channels | | release | react-shuttle release | bumps version, creates and uploads a GitHub release (with tag) | | deploy | react-shuttle deploy | build the app and deploy to S3 bucket |

read below on how to setup multiple environments.

here are some example scripts:

  // package.json
  "scripts": {
    "start": "react-shuttle start",
    "test": "react-shuttle test",
    "test:ci": "CI=true react-shuttle test",
    "test:coverage": "react-shuttle test --coverage",
    "build": "react-shuttle build",
    "build:beta": "NODE_ENV=beta react-shuttle build",
    "build:production": "NODE_ENV=production react-shuttle build",
    "deploy": "react-shuttle deploy",
    "deploy:beta": "NODE_ENV=beta react-shuttle deploy",
    "deploy:production": "NODE_ENV=production react-shuttle deploy"
  },

you can then use npm run {script}

Multiple environments

using dotenv, you can set multiple environments, such as .env.beta and .env.production

when running scripts above, prefix them with a NODE_ENV={env} to apply the .env file and load the correct variables.

"deploy:production": "NODE_ENV=production react-shuttle deploy"

Typescript

you can configure react-shuttle to use Typescript by creating a tsconfig.json

Our Standard Typescript Config:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

Linting

we use eslint and our JavaScript config eslint-config-codeverse

if you want to configure eslint on your editor, like Sublime or Atom, make sure to add to your package.json:

"eslintConfig": {
  "extends": "codeverse"
}

Deploying

we use ___ to deploy our apps. these config values should only be used in emergency deploys from your local machine.

in order to deploy locally, create a .env.beta/.env.production (or any NODE_ENV) file. then make sure these keys are set:

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_BUCKET=
AWS_REGION=
CLOUDFRONT_DISTRIBUTION_ID=
CLOUDFRONT_DISTRIBUTION_DOMAIN=

If the CLOUDFRONT_ keys are set, a successful deploy will trigger a Cloudfront invalidation.

Slack

if you use the npm run notify command, make sure you set:

SLACK_WEBHOOK_URL=

Sentry

On deployments, if you want to upload JS sourcemaps to sentry, and associate the git commits with releases, make sure you add the following keys to the buildkite environment.

SENTRY_ORG=<sentry-org-slug>
SENTRY_PROJECT=<sentry-project-slug>
SENTRY_API_KEY=<sentry-api-key>
GITHUB_REPO=americademy/<project-name>

Development

When making updates, create a branch and commit to that. Once complete, issue a PR to merge into master. You should not bump package.json manually, or update the CHANGELOG.md within your branch. Instead, once the PR has been approved and merged, do the following...

git checkout master
git pull origin master

Next, you'll need to determine what type of version bump you're going to do, patch, minor or major, based off semver. Update the CHANGELOG.md with your new version number and description of changes.

vim CHANGELOG.md // or atom, subl, etc.
git commit -am "Update CHANGELOG for <version>"

Then you'll need to actually bump the version using npm. You can do either a patch, minor, or major version bump. This step will automatically create the git tag for you, as well as update the package.json version number.

npm version patch
# or
npm version minor
# or
npm version major

Next, you'll need to push your changes to Github.

git push && git push --tags

Lastly, in order for other project's to pull this, we'll need to publish the package to our NPM.

npm publish