npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dollarshaveclub/react-scripts

v5.1.1

Published

<h1 align="center">@dollarshaveclub/react-scripts</h1>

Downloads

138

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