cra-build-watch

    3.4.0 • Public • Published

    cra-build-watch

    A script for create-react-app that writes development builds to the disk

    semantic-release code style: prettier Commitizen friendly Build Status npm version dependabot License: MIT

    Disclaimer

    The builds resulting from this script are NOT for production environment. They lack various optimizations.

    This script is meant as a temporary workaround for create-react-app project based until this feature is built-in into react-scripts. See create-react-app#1070.

    This script is inspired by other work related such as: https://gist.github.com/jasonblanchard/ae0d2e304a647cd847c0b4493c2353d4.

    Ejection

    You do not need to eject your project for you to use cra-build-watch.

    This tool handles ejected projects but it assumes you did not modify your webpack.config.js file, paths.js and env.js utils. If you did I cannot guarantee that this tool will work.

    Why do I need this?

    As of now (20/04/2018), create-react-app (more precisely react-scripts) does not allow development builds to be written to the disk because it uses webpackDevServer to serve your build files and folders (for good reasons). The problem is that in some cases you need to have these files written to the disk i.e:

    • Developing browser extensions using React.
    • Incorporating your React application into an existing application.
    • Serving your React app with a dedicated backend.

    Prerequisites

    Supports react-scripts >= 1.0.x, hence it supports the newest version 4.x.x.

    Supports node >= 10.

    Installation

    Add it to your project using npm:

    npm install -D cra-build-watch
    

    or using yarn:

    yarn add -D cra-build-watch
    

    Usage

    Add a new script into your package.json:

    {
      "scripts": {
        "watch": "cra-build-watch"
      }
    }

    Run that script:

    npm run watch
    

    with Yarn:

    yarn watch
    

    Configuration

    By default the script will generate everything into build/ at your project root and remove the public path from webpack's configuration.

    If those defaults do not work for you, the script accepts some arguments:

    • --after-initial-build-hook: accepts a string of shell code that will be run only once after the initial build in the same process as the cra-build-watch.
    • --after-rebuild-hook: accepts a string of shell code that will be run every time webpack rebuilds your project after a filesystem change. It runs in the same process as cra-build-watch.
    • -b|--build-path: expects either an absolute or relative path. If a relative path is given it will be prefixed by your project root path.
      • default: yourProjectRoot/build.
    • --chunk-filename: Set the naming you want to use for non-entry chunk files. Accepts webpack placeholders such as [id], [name], [hash]. Directories can be supplied.
      • default: js/bundle.js.
    • --disable-chunks: disable code-splitting / chunks so that only a single bundle.js file is generated. It only works with react-scripts >= 2.0.0.
    • -o|--output-filename: Set the name to be used for the output bundle. Accepts webpack placeholders such as [id], [name], [hash]. Directories can be supplied.
      • default: js/[name].chunk.js
    • --react-scripts-version: expects the react-scripts version you are using in your project i.e 2.0.3. If not given it will be implied from your node_modules and if it cannot be implied the version 2.1.2 will be the default. Consider setting it if you ejected and are not using the latest react-scripts version.
    • -p|--public-path: expects a relative URL where / is the root. If you serve your files using an external webserver this argument is to match with your web server configuration. More information can be found in webpack configuration guide.
      • default: "".
    • -v|--verbose: display webpack build output.

    Contributions

    All contributions are welcomed.

    Install

    npm i cra-build-watch

    DownloadsWeekly Downloads

    5,924

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    18.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • nargonath