# @codeverse/react-shuttle

> Configuration and scripts for Create React App.

Latest version **2.1.0-beta.5** (published 2021-07-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @codeverse/react-shuttle
pnpm add @codeverse/react-shuttle
yarn add @codeverse/react-shuttle
bun add @codeverse/react-shuttle
```

Provides the command `react-shuttle`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0-beta.5 |
| Published | 2021-07-26 |
| First published | 2019-02-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 68 |
| Unpacked size | 132.6 KB |
| Known vulnerabilities | 0 (+8 in 3 direct dependencies) |
| Install scripts | no |
| Author | Mhar Andal |
| Maintainers | americademy-machine, craigulliott |

## Links

- npm: https://www.npmjs.com/package/@codeverse/react-shuttle
- Repository: https://github.com/americademy/react-shuttle
- Homepage: https://github.com/americademy/react-shuttle#readme
- Issues: https://github.com/americademy/react-shuttle/issues
- npm.io page: https://npm.io/package/@codeverse/react-shuttle

## Dependencies (68)

- [bfj](https://npm.io/package/bfj.md) ^7.0.2
- [jest](https://npm.io/package/jest.md) 26.6.0
- [dotenv](https://npm.io/package/dotenv.md) 8.2.0
- [eslint](https://npm.io/package/eslint.md) ^7.11.0
- [prompt](https://npm.io/package/prompt.md) ^1.0.0
- [semver](https://npm.io/package/semver.md) 7.3.2
- [ts-pnp](https://npm.io/package/ts-pnp.md) 1.2.0
- [resolve](https://npm.io/package/resolve.md) 1.18.1
- [webpack](https://npm.io/package/webpack.md) 4.44.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1
- [fsevents](https://npm.io/package/fsevents.md) ^2.1.3
- [camelcase](https://npm.io/package/camelcase.md) ^6.1.0
- [babel-core](https://npm.io/package/babel-core.md) 7.0.0-bridge.0
- [babel-jest](https://npm.io/package/babel-jest.md) ^26.6.0
- [css-loader](https://npm.io/package/css-loader.md) 4.3.0
- [slack-node](https://npm.io/package/slack-node.md) ^0.1.8
- [typescript](https://npm.io/package/typescript.md) ^3.3.4000
- [url-loader](https://npm.io/package/url-loader.md) 4.1.1
- [@babel/core](https://npm.io/package/@babel/core.md) 7.12.3
- [file-loader](https://npm.io/package/file-loader.md) 6.1.1
- [jest-circus](https://npm.io/package/jest-circus.md) 26.6.0
- [sass-loader](https://npm.io/package/sass-loader.md) 8.0.2
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^10.1.0
- [babel-loader](https://npm.io/package/babel-loader.md) 8.1.0
- [jest-resolve](https://npm.io/package/jest-resolve.md) 26.6.0
- [style-loader](https://npm.io/package/style-loader.md) 1.3.0
- [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 5.4.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 5.1.0
- [react-refresh](https://npm.io/package/react-refresh.md) ^0.8.3
- [worker-plugin](https://npm.io/package/worker-plugin.md) ^3.2.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^11.0.0
- [changelog-parser](https://npm.io/package/changelog-parser.md) ^2.8.0
- [postcss-normalize](https://npm.io/package/postcss-normalize.md) 8.0.1
- [webpack-s3-plugin](https://npm.io/package/webpack-s3-plugin.md) ^1.0.3
- [eslint-plugin-jest](https://npm.io/package/eslint-plugin-jest.md) ^24.1.0
- [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) 3.0.0
- [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) 1.6.4
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.7.0
- [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^2.0.0
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^3.1.2
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.11.0
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^5.0.2
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.21.5
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 4.5.0
- [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 5.0.2
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.22.1
- [jest-watch-typeahead](https://npm.io/package/jest-watch-typeahead.md) 0.6.1
- [eslint-webpack-plugin](https://npm.io/package/eslint-webpack-plugin.md) ^2.1.0
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 4.2.3
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^10.0.0
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) ^5.2.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.3.1
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 4.2.1
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) 5.1.4
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^6.0.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.11.3
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 2.2.0
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^4.5.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.2.0
- [write-file-webpack-plugin](https://npm.io/package/write-file-webpack-plugin.md) ^4.5.0
- [eslint-plugin-testing-library](https://npm.io/package/eslint-plugin-testing-library.md) ^3.9.2
- [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.3.7
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^4.5.0
- [@codeverse/eslint-config-codeverse](https://npm.io/package/@codeverse/eslint-config-codeverse.md) ^1.0.0
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.4
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.3.0
- [@pmmmwh/react-refresh-webpack-plugin](https://npm.io/package/@pmmmwh/react-refresh-webpack-plugin.md) 0.4.2

## Recent versions

- 2.1.0-beta.5 (latest) — 2021-07-26
- 2.0.28 (beta) — 2020-08-18
- 2.1.0-beta.4 — 2021-07-26
- 2.1.0-beta.3 — 2021-07-26
- 2.1.0-beta.2 — 2021-07-26
- 2.1.0-beta.1 — 2021-07-26
- 2.1.5--beta.2 — 2021-06-14
- 2.1.5--beta.1 — 2021-06-14
- 2.1.5 — 2021-06-14
- 2.1.4 — 2021-06-01
- 2.1.3 — 2021-04-15
- 2.1.2 — 2021-04-15
- 2.1.1 — 2021-04-15
- 2.3.2 — 2020-11-25
- 2.3.1 — 2020-11-25
- … 50 more at https://npm.io/package/@codeverse/react-shuttle/versions

## README

# 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](https://github.com/americademy/react-shuttle/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:

```js
  // 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.

```json
"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:

```json
{
  "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](https://github.com/americademy/eslint-config-codeverse)

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

```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](https://sentry.io), 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...

```sh
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](http://semver.org/). Update the CHANGELOG.md with your new version number and description of changes. 

```sh
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.

```sh
npm version patch
# or
npm version minor
# or
npm version major
```

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

```sh
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. 

```sh
npm publish
```

---
_Source: https://npm.io/package/@codeverse/react-shuttle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._