Provide a watching build mode that writes to the disk in development

[andreypopp]

See https://github.com/facebookincubator/create-react-app/issues/1018#issuecomment-261792488 for a discussion which leads to the creation of this issue.

I propose adding a new command (working name build-dev) which watches for changes and rebuild the bundle (effectively, given the current CRA implementation, it should execute webpack --watch), then writes it onto filesystem.

The main motivation is an easier integration path with non-Node.js dev servers: such servers could just serve continuously updating bundle from the filesystem.

The only desired configuration options is an --output, which could probably be specified via a command line argument:

% npm run build-dev -- --output ../static/www

Alternative command name suggestions:

• watch
• build-watch

[AntonOfTheWoods]

Can someone confirm that this makes CRA absolutely useless for use cases where you want to do things like run your data access (to indexeddb, for example) only via the service worker? It appears that the service worker file is only generated for production builds, meaning the sws can only be used for caching, and nothing "serious". Is that the current situation or have I missed some completely obvious way of doing this?

[burakgavaskargo]

I got it worked with Craco.

• Follow the installation in this: link https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md
• Create a craco.config.js in the root directory as explained in the doc.
• Update configuration file as:

  module.exports = {
  devServer: {
  writeToDisk: true,
  },
  };

• craco start

This will output the files under dist folder

[rib]

I have an existing template-based/jekyll site that is adding pages built with React and introduces a header that is a React/bootstrap component to existing pages. Running a dev server is fine for testing the newer content, but right now I want to debug some details that relate to the integration with the pre-existing site whereby I want to test a full build, as it will run in production, except disable things like javascript minification. It seems surprising that you can't just do something like yarn build --debug to build a site for deployment except keep all javascript debuggable.

[deanhiller]

Wow, this is old. Any movement on this issue?

[diogofigueiredo]

Any update on this issue?

[tberne]

More than five years has passed!! This would be a very nice feature!!

[kitfit-dave]

My use case is that I am using firebase which has emulators for local development. I don't care if the development server uses the re-build output, or even if it is the same output. I just want a watch option for react-scripts build. The same would apply for anyone wanting to host the app outside of the development server for any reason while developing.

[WesJourdan]

I got it worked with Craco.

• Follow the installation in this: link https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md
• Create a craco.config.js in the root directory as explained in the doc.
• Update configuration file as:

module.exports = {
  devServer: {
    writeToDisk: true,
  },
};

• craco start

This will output the files under dist folder

This is how I was doing it before, but it seems craco doesn't support cra v5.

[geshan]

This issue can be easily solved with the npm package run-when-changed

with the command:

./node_modules/run-when-changed/bin/run-when-changed.js  --watch "src/*.js" --exec "npm run build"

or a NPM command in scripts like:

{
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:watch": "run-when-changed --watch \"src/*.js\" --exec \"npm run build\"",
  }
}

Another advantage, it is not dependent on React or CRA version.

[justanotheranonymoususer]

I got it worked with Craco.

[...]

module.exports = {
  devServer: {
    writeToDisk: true,
  },
};

• craco start

This works, thanks, but the configuration should now be:

module.exports = {
    devServer: {
        devMiddleware: {
            writeToDisk: true,
        },
    },
}

Reference.

[linux019]

after a lot of years this shit still is unable to create an unoptimized build in simplest way

[babakjahedmanesh-tnp]

I was trying to create a POC for a development framework for react, nodeJS and I got here. Reading all these.

Is it really hard to add an .env or a "-- switch" to write an unoptimized the build to disk? :)