@iporaitech/react-scripts NPM

react-scripts

This package includes scripts and configuration used by Create React App

The original docs can be found at:

Getting Started – How to create a new app.
User Guide – How to develop apps bootstrapped with Create React App.

Backend integration

The build mechanism added in this fork is useful if you want to serve the bundles from a backend like Elixir/Phoenix, Ruby on Rails or similar, that already render HTML templates.

It provides a custom build script that uses as input the original react-scripts' webpack.config.js and outputs a config without:

HtmlWebpackPlugin because we are going to use the generated assets in our own index.html.
ManifestPlugin because each backend should generate its own manifest.
HotModuleReplacementPlugin because this plugin requires WebpackDevServer to work.

`build:dev`

Outputs bundles using Webpack in development mode.

This script can be called with:

yarn build:dev to generate bundles once

yarn build:dev --watch to run Webpack in watch mode.

`yarn build:prod`

Outputs bundles using Webpack in production mode.

Output

By default the bundles are generated into build/development or build/production dir inside of your CRA depending on the script called, but this can be changed with the following ENV vars:

CRA_BUILD_OUTPUT_PATH this variable sets the value of webpack's output.path.
CRA_BUILD_PUBLIC_PATH it sets publicPath in webpack config. It defaults to /.

These vars can also be set in .env files as described in the docs

Notice that the generated directories don't contain the static/ prefix used in the original react-scripts.

The name of the initial chunks, the ones that you should include using <script /> tags in your HTML, are always generated without chunkhash, even in production. The name of dynamic chunks, the ones used by code-splitting, do contain a chunkhash in production.

The generated initial .js chunks should be:

js/bundle.js
js/vendors~main.chunk.js
js/main.chunk.js

Additionally, if the output might include the following .css chunks:

css/main.chunk.css
css/vendors~main.chunk.css

You can take a look at the bundles and index.html generated by yarn build to compare with the ouptut of the custom scripts.

Usage

To create a new CRA app

create-react-app my-app --scripts-version @iporaitech/react-scripts

Or in an existing CRA app

$ yarn remove react-scripts
$ yarn add @iporaitech/react-scripts

and then adding the following scripts to your package.json

"build:dev": "react-scripts build-custom development",
"build:prod": "react-scripts build-custom production",

Example for Elixir/Phoenix

For a Elixir/Phoenix project you might want to use the following

$ export CRA_BUILD_OUTPUT_PATH=/your/app/priv/static
$ yarn build:dev --watch

And then add the script to your layout template

<body>
  <head>
    <!-- other head stuff here (not sure why there's no bundle.css. vendor~main not get generated in your app) -->
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/vendor~main.chunk.css") %>">
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/main.chunk.css") %>">
  </head>

  <!-- your body stuff here -->
  <script src="<%= static_path(@conn, "/js/bundle.js") %>"></script>
  <script src="<%= static_path(@conn, "/js/vendors~main.chunk.js") %>"></script>
  <script src="<%= static_path(@conn, "/js/main.chunk.js") %>"></script>
</body>

For production, don't forget to run mix phx.digest after running yarn build:prod, and let Phoenix take care of cache and compression stuff.

Development

This fork modifies the following files:

packages/react-scripts/README.md - add backend integration and instructions for this fork
packages/react-scripts/bin/react-scripts.js - add option to execute build-custom.js
packages/react-scripts/scripts/init.js - add 'build:dev' and 'build:prod' to appPackage.scripts.
packages/react-scripts/scripts/build-custom.js - contains the logic for custom builds for backend integration. If build.js changes in a new version, then checkout the changes and update build-custom.js accordingly.
packages/react-scripts/package.json - Updates the repo info; keep version in sync with respect to upstream.

Also, adds a backend integration section, the same as this README to: