@dollarshaveclub/react-scripts
v5.1.1
Published
<h1 align="center">@dollarshaveclub/react-scripts</h1>
Downloads
137
Keywords
Readme
- 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.
- In
- 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.
- There could be a dev version of
- Webpack features not available in create-react-app.
- A
watch
script is not available increate-react-app
—which only has astart
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 onlocalhost:<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.
- Starts and runs a dev server on
dsc-react-build
- Builds a production version of a react app.
- Its changes are built to a
build/
ordist/
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
- This runs all tests that match
- jsdom: runs all the react tests in a jsdom environment.
- This runs all tests that match
src/**/__tests__/*.js
- This runs all tests that match
- server: runs the server-specific tests, i.e. hitting all the API routes.
- 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
- Test Types:
dsc-react-watch
- Changes are built to a
build/
ordist/
folder continually. - A browser must be refreshed to view changes.
- The code is unminified so it can more easily be debugged.
- Changes are built to a
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.