<h1 align="center">@dollarshaveclub/react-scripts</h1>
create-react-app's react-scripts---
---
Why
Features
Usage
Commands
Configuration
Workflows
---
- 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.
---
| 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
import x from 'face-landing/src/something.js'; will not implement because it blocks us from ever server-side rendering without more build processes |---
@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.
---
- 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.
---
- 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.
---
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.
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.
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.