Nonflavored Prescription Medicine

    @dollarshaveclub/react-scripts

    5.1.1 • Public • Published

    @dollarshaveclub/react-scripts

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

    CircleCI codecov Greenkeeper badge


    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.

    Keywords

    none

    Install

    npm i @dollarshaveclub/react-scripts

    DownloadsWeekly Downloads

    31

    Version

    5.1.1

    License

    MIT

    Unpacked Size

    221 kB

    Total Files

    78

    Last publish

    Collaborators

    • stevebushmandsc
    • ajdsc
    • suhaas_10
    • saikat180891
    • brian-gates
    • chuntley56
    • dollarshaveclub-engineering
    • bensonnn
    • userjn
    • jdcoded
    • kevinpeno-dsc
    • javer
    • theturtle32
    • natalie.protasevich