@dollarshaveclub/react-scripts

Dollar Shave Club's take on create-react-app's react-scripts

---

<img alt="CircleCI" src="https://circleci.com/gh/dollarshaveclub/react-scripts/tree/master.svg?style=svg&circle-token=229425616a3704ff106c86aeb985a75c235d6e60" />

<img alt="codecov" src="https://codecov.io/gh/dollarshaveclub/react-scripts/branch/master/graph/badge.svg?token=BF214vxPjg" />

<img alt="Greenkeeper badge" src="https://badges.greenkeeper.io/dollarshaveclub/react-scripts.svg?token=98f7a123f7e1c18fb784977502171831f8910facd2241278adb6aec81a2905eb&ts=1510048704564" />

---

Why   Features   Usage   Commands   Configuration   Workflows

---

Why Dollar Shave Club React Scripts?

• A backend server is needed to:

- Run a web site on different domains to test internationalization. - Run this server locally, to proxy APIs instead of hardcoding URLs. - Server-side templating for SEO, internationalization, webpack configs, etc.

- In `create-react-app`, `webpack` injects and manipulates a static HTML file.
- Ember builds a handlebars template to a static HTML file, which doesn't support SEO for internationalization.

- Handle our /<repo>/ standard for asset serving. - Keep a dev server as similar to a production server as possible.

- There could be a dev version of `react-scripts` that only runs the webpack dev server against a static HTML file. It would be more difficult to maintain and would differ from a production server's environment, making it susceptible to bugs.

• Webpack features not available in create-react-app.
• A watch script is not available in create-react-app—which only has a start script.
• Tests and test fixtures to make sure configs work as desired.

---

Features

| Feature | Status | Description | | --- | --- | --- | | SASS | Implemented | Sass configuration for react scripts | | cssnext | Implemented | CSS equivalent of babel | | Code Splitting – bootstrap / main | Implemented | Code split bundle into bootstrap.js (in ) and main.js (in ) | | CSS Modules | Implemented | Stage 1: only implemented for CSS files ending in .module.css | SVG | Implemented | import SVGs as React components | | Flow Type | Implemented | Implemented in babel-preset-react by default | | TypeScript | Implemented | Interoperability will be a developer problem to solve | | Server Side Rendering | Evaluating | Needs to be scoped | | Absolute Paths | Will Not Implement | import x from 'face-landing/src/something.js'; will not implement because it blocks us from ever server-side rendering without more build processes |

---

Usage

@dollarshaveclub/react-scripts is a set of commands to run react apps following the create react app methodology. It requires that apps adhere to certain rules—copy the src/ and server/ folders when creating a new app.
The following file types can be imported from JS/TS file types:

• .js, .jsx, .json - JS and JSON files are supported
• .ts, .tsx - TypeScript files are supported. TypeScript can be imported from JavaScript or vice-versa.
• .module.css - CSS modules are suffixed with .module.css
• .css - global CSS files are suffixed as .css
• .module.scss - SCSS modules are suffixed with .module.scss
• .scss - global SCSS files are suffixed with .scss
• .svg - SVG files imported in JS will be imported as a React component

Avoid the following:

• Do not import CSS from other CSS/SCSS files.

---

Commands

• dsc-react-start

- Starts and runs a dev server on localhost:<port> and a webpack dev server on localhost:<port + 1>. - Provides Hot Reloading—a utility allowing engineers to make changes in code and almost immediately see updates within a browser - Changes made is DSC React Start mode do not get built to a dist/ folder.

• dsc-react-build

- Builds a production version of a react app. - Its changes are built to a build/ or dist/ folder. - The build task must complete and then a browser must be refreshed to view changes. - The code is minified so it harder to debug.

• dsc-react-test <type>

- Test Types:

- **server:** runs the server-specific tests, i.e. hitting all the API routes.
  - This runs all tests that match `server/**/__tests__/*.js`
- **jsdom:** runs all the react tests in a [jsdom environment](https://github.com/tmpvar/jsdom).
  - This runs all tests that match `src/**/__tests__/*.js`

- Unused Test Types:

- **isomorphic (not needed because we do not server-side render):** runs all the react tests in a node.js environment.
- This should guarantee that server-side rendering works.
- This runs all tests that match `src/**/__tests__/isomorphic/*.js`

• dsc-react-watch

- Changes are built to a build/ or dist/ folder continually. - A browser must be refreshed to view changes. - The code is unminified so it can more easily be debugged.

---

Configuration

package.config.dollarshaveclub

• prefix: how assets are served, defaulting to /<package.name>/. For example, face-web assets are served from /face-web/.
• port: default part the server runs on. Keep this unique across all apps so that multiple apps can run locally at once.

---

Workflows

Development

In development, start your app locally by running npm start, which should alias dsc-react-start. There should be a localhost link after the command is run in a shell.

Dev Box

To develop an app in a minibox or devbox, run npm run watch within a shell. Then, refresh the app in a browser.
To build an app for production, run npm run build within a shell.

Publishing

To publish a new version of @dollarshaveclub/react-scripts, run:

npm publish

To publish a version for testing, also called a beta version:
In package.json:

"version": "<version>-<betaVersion>"

/*
  For example: "version": "1.0.0-beta.1",
  - The word 'beta' is not required. It is preferred.
*/

Then, run:

npm publish --tag beta

For more information on publishing, check out npm's publish spec.