npm package: @iporaitech/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 3.4.0-fix-1

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app)

The original docs can be found at:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – 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

or

`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](https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used)

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

```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

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

And then add the script to your layout template

```html
<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:

- packages/cra-template-typescript/template/README.md
- packages/cra-template/template/README.md

See the [custom_build.feature](packages/react-scripts/features/custom_build.feature) for specification of the backend integration feature.