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