@dollarshaveclub/react-scripts

@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 /<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.
      • 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.