@dollarshaveclub/react-scripts

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

---

---

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 // 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: and a webpack dev server on localhost:.
- 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
- 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.
- 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

$3

- prefix: how assets are served, defaulting to //. 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

$3

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.

$3

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.

$3

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

``sh
npm publish
`

To publish a version for testing, also called a _beta_ version:

In package.json:

`json
"version": "-"

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

Then, run:

`sh
npm publish --tag beta
``

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