Create-react-app: 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

[gaearon]

My concern: the concept of a dev server is already confusing to many people and I've seen countless issues from people trying to find dev server output in the filesystem, adding scripts with hrefs to local files, when they didn't need it.

So I'm worried introducing this feature is useful in some advanced cases but might make everything more confusing in simple cases for people who mistakingly start with build-dev instead because they haven't seen a dev server before when dev server is exactly what they need.

[leftdevel]

(As the OP of #1018) :
For me it all boils down to:

• Write the dev bundle that results from running npm start, to the file system.
• 'watch' for changes (in dev mode).

@gaearon makes a great point saying that CRA biggest win is saving the developer from configuring the dev server which is the most difficult feature. I'd be happy if at least we could access the dev bundle.js file from the filesystem, I wouldn't care if the dev server is started, I would just ignore it.

My argument is that:

CRA is quite appealing to non Node.js developers. There are many experienced developers in python, php, .net out there, but not all of us/them are that experienced in frontend set ups.

CRA makes it a no-brainer to use react. And to be honest, these days it's way more difficult to set up a React project than an ember or angularjs 1.x project. React API is pretty simple and powerful, but when you introduce React to your organization projects, it's not just React, but all its friends which are hard to master (webpack, babel, presets, linters, etc).

Not sure if you guys have read this blog post yet https://goo.gl/HviDRn, but it's about a company that has a backend in Flask and were evaluating a frontend framework. They talk about how difficult is to keep up with the shifting ecosystem around React, and I'd totally agree on their pain points. At the end they chose Emberjs because of their CLI tools that makes it super easy to integrate.

I think CRA was created with the mindset of helping people that are just starting with React, and playing around with a few simple tutorials, but it has the potential of becoming a profesional tool for people that don't have that much time to spend learning webpack, babel, if to use fetch or superagent, what Promise polyfill to use, etc.

We need something opinionated that just works. Note that I'm totally fine with the already existing features in CRA.

Sorry for the long post.
* flies away *

[gaearon]

Tagging with a milestone so I remember to get back to it.

[viankakrisna]

I think this is the same as https://github.com/facebookincubator/create-react-app/issues/1316 should i just close that?

[gaearon]

Yea, this is the same.

[viankakrisna]

So I'm worried introducing this feature is useful in some advanced cases but might make everything more confusing in simple cases for people who mistakingly start with build-dev instead because they haven't seen a dev server before when dev server is exactly what they need.

Isn't this can be solved with proper documentation and gentle reminder when they use this feature? Would be happy to working on a react-scripts watch PR. I have 'ejected' several project because i need this feature.

[gaearon]

I'm not opposed to adding it. Happy to take a look at a PR.

[aeneasr]

I'm currently using cross-env NODE_ENV=development webpack . --config node_modules/react-scripts/config/webpack.config.dev.js -w to achieve that. However, it requires adding webpack-cli to the node_modules.

The only problem is that appending the hash to the bundle's name bundle.[hash].js makes the entrypoint unpredictable which is why I'm still ejecting the scripts. Any way to resolve that?

[dkaplan-pivotal]

I want to add an additional story to add context to why I'd like this feature: We built our app with server side rendering and waited until we had a feature that would require enough js/ajax to justify a single page app. We got to that point and wanted to replace that one page with a react frontend. The plan would be that react would gradually expand to the rest of the app (if needed, maybe it'd never be needed).

But CRA appears to assume that in development mode, your frontend is a different app from your backend. That's not necessarily true if you want to bring react to an application that already exists. (Even if you go with the dual-app idea, you have to deal with CORS. I think you could argue that CORS complexity outweighs the output file complexity.)

So our workaround is to always build to production and copy the files into our server so they can be rendered. But the minification and source map generation adds an extra 10-15 seconds when we do that every time and we can't use a watch. When you want frequent, fast feedback loops, those 10-15 seconds add up to considerable lost time.

Let me know if I'm doing something wrong here. Maybe there's an obvious workaround here.

[viankakrisna]

@dkaplan-pivotal I have the exact use case! There is a proof of concept here https://github.com/facebookincubator/create-react-app/pull/1616 but i think #1994 & #1588 is a better solution (minimized risk of deploying development script + reload on file change). Good to see that #1994 & #1588 is tagged for 0.9.6.

[dkaplan-pivotal]

Thanks for your reply. @viankakrisna I don't see how #1994 & #1588 add up to a development mode where you can have a single page of your app use react.

[viankakrisna]

1994 and #1588 will allow you to include the development bundle to any of your local sites with live reloading. I've tested it by referencing the bundle on my local wordpress site and it reloads on file change. (haven't tested css hot reload because i'm using styled-components)

[ltoshea]

I'd just like to echo all the above, when loading resources from an external file it's a huge pain for the names to change every time you make a small change and rebuild.

[int128]

I wrote a script for the watching build mode.
https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd

[nickretallack]

Yes please. Having webpack write the files to disk is how I've been developing JS apps for ages. It allows me to make my development and production environments look a lot more similar, routing everything through nginx and treating the resulting files as static.

I don't understand the appeal of running webpack as a server. Is there any advantage to doing that?

[ilyanoskov]

I agree, this would be a very useful feature. Or at least somebody could write up a tutorial on how ti disable webpack-dev-server and have watch mode instead. I have an identical use-case with @nickretallack

[jasonblanchard]

@nickretallack @ilyanoskov - @int128's watch script mostly works for me. I forked it and slightly changed how the webpack config is mutated to avoid a bunch of temp files getting saved in the build directory from HotModuleReplacementPlugin: https://gist.github.com/jasonblanchard/ae0d2e304a647cd847c0b4493c2353d4

This is NOT heavily tested, I've been using it in a side project, so YMMV.

[viankakrisna]

What's the difference between serving the actual file in the disk vs memory like what webpack dev server does?

In the end, you need a script tag in your HTML with a reference to your bundle and run your development build script. It doesn't matter whether the bundle comes from disk vs ram.

I've been advocating a watching mode for a while, but now I can't live without dev server (error overlay and auto reloading worth the hassle of making the dev server works for me)

@gaearon @Timer I think it's worth revisiting #1994 and #1588 or at least a section explaining the benefit of dev server and think about the integration story with backends.

Similar to the deployment and API integration guide, I think CRA can have a backend integration guide? I can write one for WordPress.

[jasonblanchard]

I'd second @nickretallack that for me, it's dev/production parity. If I need to do some work and then construct index.html server-side (to inject state onto the page, set a cookie, server render, etc), I want to _always_ serve index.html from my server, not _sometimes_ from webpack-dev-server.

What's the difference between serving the actual file in the disk vs memory like what webpack dev server does?

@viankakrisna I don't think that much matters. As you said, I suspect serving the bundle from memory would work just fine in my use case. However, the last time I tried to do that with the default output from npm run build (admittedly, a few version ago), I got all sorts of errors in the console, I think because the bundle was expecting to be run in the context of webpack-dev-server and/or the generated index.html file and was polling something that didn't exist where it should have.

[viankakrisna]

I'd second @nickretallack that for me, it's dev/production parity. If I need to do some work and then construct index.html server-side (to inject state onto the page, set a cookie, server render, etc), I want to always serve index.html from my server, not sometimes from webpack-dev-server.

That's also why I open #1616 in the first place, but seeing efforts with #1994 and #1588 I think i can use dev server for my use case.

So instead of advocating a watching build mode, It's more beneficial to make dev server more flexible for this kind of use case.

[lukewlms]

I don't believe anyone has posted this solution: this doesn't write to disk, but in Debug mode you can proxy requests to the development server, which gives you rapid reload after changes.

https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

[radi-ratlh]

This will be useful for chrome extension devlopment.

[spsoto]

I support the request. I know it's possible to forward requests to the server from webpack, but sometimes it's required to have it the other way.

For example, having a server API that servers the index.html, similar to a production setup. In our stack we have in separate folders the backend and the frontend and will be more useful to (1) start webpack in watch mode, (2) create a symlink to the generated files and start the web server in the other environment. Moreover, this helps having a stack a similar as possible to production, which is always a good practice.

Of course this is completely doable ejecting, but that's not the idea, since CRA is awesome.

[praveenav]

My project uses Spring for the backend. This feature will be helpful.

[justinkahrs]

@praveenav do you have a work around you're using currently? We also are using spring on the backend and got this solution working with some minor tweaks to the build output dir

https://gist.github.com/justinkahrs/3c0ab8b7499dd7d6a19d78298e748064

[praveenav]

Thank you @justinkahrs
Currently, we do not have a workaround. We are at the beginning stage. I was searching for a feature and bumped on this issue.
Thank you very much for sharing your script. It looks good.

[Steve06]

Has anybody figured out a workaround (ejecting or not) for chrome extensions using the dev server, i.e., avoiding long production rebuilds? It's not clear to me how to even launch a chrome extension from the dev server, let alone making necessary adjustments.

I can see that https://github.com/jhen0409/react-chrome-extension-boilerplate has implemented a solution where only a few files are provided in a dev folder for the chrome extension to be launched and then any changes to the code are immediately rendered through the server. However, the dependencies of this project are outdated (React 15 etc) and neither is it based on CRA nor does it use the same dev server. It only shows that a solution is possible.

[Erowlin]

We're currently struggling a lot with @ephommaphavanh, and we came to the same conclusion as you @Steve06. The reloading they are doing looks great, but requires some work to adapt with the updated dependencies.
Still looking (it's been 4 hours) for an answer, we're now playing directly with a webpack.config.js.

[DaZiYuan]

I am a newbie at JS&React. I try developing chrome extension from create-react-app. I have the same problem as Steve06 said. It's very unfriendly to beginner

[Nargonath]

I released an npm package that allow to write dev build to the disk based on some discussions I've seen in this issue or others: https://www.npmjs.com/package/cra-build-watch. It works for my use case but I tried to make it general enough by accepting some arguments to please other people use case.

It is just meant as a temporary workaround until this moves forward and we can have the feature built-in.

Feel free to give me feedbacks on the github repo if there are stuff to improve or even if it works for you. :wink:

[Legym]

I really hope this turns into a feature.

[kirill-konshin]

Could be very useful for Electron apps that use actual FS.

[tecnobrat]

I've just been using this: nodemon --exec 'react-scripts build' --watch src --watch public

[hopewise]

@tecnobrat @Nargonath How about refresh the browser when a change happen? ex: current opened tab in chrome

[devxpy]

This would super dope for people looking into integration with non-nodejs framweork, like django.

Currently working on a project that let's you do this, but has to use browserify..

EDIT: looks like i can use @Nargonath's thing instead of browserify, Thanks!

[nickmccurdy]

@devxpy You should be able to integrate with any server in development, including Django, by running both react-scripts start and the server while proxying API requests.

[devxpy]

I wanted to integrate them right in the templates. So you could use it without an API at all.

[devxpy]

Yes, I could write a server to handle this for me, but that feels like overkill.

[devxpy]

For example, Half of that page is just normal django template code. And half of it is react code

__I want to make stuff like this one-liner__
'testpage' is a directory containing a react project

[mythz]

+1 for this to be an officially supported feature. IMO watched builds provides the optimal development for non node.js server apps, proxying with the dev server is too laggy with the more ajax requests an app has the less enjoyable it becomes where often ajax responses get handled out of order.

[Nargonath]

@hopewise Did you manage to get the page reload as you wanted? Wondering if I should get a look at it.

[graysonhicks]

Trying to accomplish this for integrating with templates served with Drupal. Any update with this with v2?

[radi-ratlh]

This will be really useful when developing chrome extensions, instead of using prod bundle and getting incomplete error messages we can use the development bundle and debug the issue.

[Nargonath]

@radi-ratlh in the meantime perhaps the npm package I wrote could be of any help.

[radi-ratlh]

@Nargonath Thank you, I will give it a try

[andreisoare]

If create-react-app supports "Changing the title tag", "Generating Dynamic Tags on the Server", or "Injecting Data from the Server into the Page" for production, it should provide a way to support these features for development.

If it's part of your core for prod, it should be for dev as well and not defer to 3rd party plugins. Without the feature requested here I don't see an easy way to accomplish this.

Is this still not planned for the near future?

[dharmendra-sehgal]

For example, Half of that page is just normal django template code. And half of it is react code

I want to make stuff like this one-liner
'testpage' is a directory containing a react project

Did you find any solutions?

[devxpy]

@dharmendra-sehgal check out my project react-pages.

Feature requests and bug reports welcome!

[Friss]

webpack-dev-middleware has an option writeToDisk and it can be enabled via webpack-dev-server (>=3.1.10 required)

With my PR above to get us to the required version of webpack-dev-server we could then add in some environment var(s) to enable the saving of files to disk. This could be 2 vars, 1 to enable and another to decide what directory to use. By default it uses dist. Or just one var to declare where to save the files and that enables the option to be set.

[Nargonath]

@Friss Wow that'd be really neat! Hope it goes through. 👍

[ioloie]

Now that this has been released, are further changes required to support the option?

[Nargonath]

@ioloie AFAIU from @Friss the feature needs to be implemented. His PR only updated the package version but we need the behavior to be enabled in webpack-dev-middleware through the use of environment variables as he suggested.

[suxin1]

What is the new way to do this?

[ioloie]

This pull request provides another environment variable called WRITE_TO_DISK. So adding WRITE_TO_DISK=true in the relevant place will enable the feature in the underlying webpack dev server

[Simonig]

An easy solution I find, is to use the already provided 'configFactory' (from config/webpack.config.js) to generate a development configuration for webpack:

//scripts/devConfig.js
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
const configFactory = require('../config/webpack.config');

// Generate configuration
module.exports = () => configFactory('development');

and then in the package.json create a watcher script:

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "devWatcher": "webpack --config scripts/devConfig.js --watch",
    "test": "node scripts/test.js"
  },

you might also want to define a output folder in the webpack.config file, because I think that currently is only defined for prod

    output: {
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,

obviously I'm refering to a ejected project.

[Nargonath]

I also put on NPM a lib that helps you do it without ejecting: https://github.com/Nargonath/cra-build-watch while we wait for this PR to get merged.

[dariusrosendahl]

An easy solution I find, is to use the already provided 'configFactory' (from config/webpack.config.js) to generate a development configuration for webpack:

//scripts/devConfig.js
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
const configFactory = require('../config/webpack.config');

// Generate configuration
module.exports = () => configFactory('development');

and then in the package.json create a watcher script:

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "devWatcher": "webpack --config scripts/devConfig.js --watch",
    "test": "node scripts/test.js"
  },

you might also want to define a output folder in the webpack.config file, because I think that currently is only defined for prod

    output: {
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,

obviously I'm refering to a ejected project.

@Simonig:

This works great! We're only using it to create react applications to integrate it into and e-commerce platform. What do I need to change to only watch multiple applications?

[ifokeev]

my similar to @dariusrosendahl solution:

you need install rewire first:

yarn add rewire

scripts/start-writeon-disk.js

#!/usr/bin/env node

const rewire = require('rewire')
const defaults = rewire('react-scripts/scripts/start.js')

const createDevServerConfig = defaults.__get__('createDevServerConfig')
defaults.__set__('createDevServerConfig', (...args) => ({
  ...createDevServerConfig(...args),
  writeToDisk: true,
}))

package.json

  "scripts": {
    "start": "./scripts/start-writeon-disk.js",
    ...
  }

NOTE: it doesn't drop CSS files this way

[route2Dev]

I found this to be a helpful implementation:
https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd

If this could cleanup the temp files gererated and be incorporated into CRA, that would be awesome!

[cowwoc]

I'm interested in this PR minus the watch bits. I don't want my CI smoke tests to run optimized bits because it is extremely slow. My less-frequent integration tests might run it, but the main CI pipeline should not.

Should I open a separate PR for this or will this PR target this use-case as well?

[cherukumilli]

webpack-dev-middleware has an option writeToDisk and it can be enabled via webpack-dev-server (>=3.1.10 required)

With my PR above to get us to the required version of webpack-dev-server we could then add in some environment var(s) to enable the saving of files to disk. This could be 2 vars, 1 to enable and another to decide what directory to use. By default it uses dist. Or just one var to declare where to save the files and that enables the option to be set.

writeToDisk is no longer working with create-react-app v3. I don't see it create the /dist folder. It used to work with create-react-app v2.
Trying to see if anyone else encountered this issue with cra v3? and if they have a solution to it?

[Nargonath]

How did you set it as this PR was never merged? Are you doing it with an ejected project?

[cherukumilli]

@Nargonath -
I forked this project and updated the react-scripts/config/webpackDevServer.config.js file.

    quiet: true,
    // WebpackDevServer has an option to write every build to disk. This can be
    // useful for certain use cases such as developing browser extensions where one
    // would need to otherwise do full builds.
    writeToDisk: true,

The above setting with a few other changes like

  "homepage": ".",

got my local dev environment working in CRA2.x

After merging in CRA 3.x, this stopped working. I don't see the /dist folder anymore.

wondering if anyone else is facing this issue?

[Nargonath]

Oh alright, didn't think of that option. 😄

[devloco]

From my point-of-view, the biggest benefit to using create-react-app is that the maintainers make sure that all the included packages work well together. That kind of "quality assurance" is very very valuable. To me that's way more valuable than the dev server config.

Anyway, I'll throw this out there: it's actually not that difficult to maintain a fork of facebook/react-scripts. And by doing so, there's no need to eject and no need to worry about breaking changes by future versions of CRA. You can take your time merging any new features from create-react-app into your fork.

I've been doing that for about a year now for create-react-wptheme. That's just a wrapper for running create-react-app with the --scripts-version command line arg, pre-populated with the URL for the npm of my react-scripts fork.

The source for my react-scripts fork is here. When possible, I try to add files rather than modify the original react-scripts files (look inside the config and scripts subfolders there and note any files with wp in their name).

I did have to write my own little web socket server and client to get browser auto-refresh working. But I'm using the actual error overlay from CRA, which is another huge chunk of code that I don't have to worry about. I'd say I have 200-300 lines of custom code, and I rarely change them at all.

Then when there's a new CRA release, it takes me maybe an hour or two to merge the changes into my fork. Thus I'm benefiting from all the work that the CRA devs do to test package combinations and bug fixes/work-arounds. Tasks that would be painful to do by myself.

[cowwoc]

I don't see why this feature would have to be mutually exclusive to the existing behavior. Both features can live side-by-side and there is a strong benefit to shipping it standard (not as a fork).

[Nargonath]

Perhaps there are complications we are not foreseeing. 🤷‍♂

[DevAlone]

Would be awesome to have this feature. I'm developing a browser extension with react and didn't find anything better than using npm-watch(which is terribly slow cuz it rebuilds everything on every single change).

[pupudu]

If it helps anyone, this can be easily done using the npm patch-package module. (See here for how patch-package works: https://www.npmjs.com/package/patch-package)

Changes to be made

1) Add this entry to node_modules/react-scripts/config/webpackDevServer.config.js

writeToDisk: process.argv.includes('--writeToDisk'),

2) Define a constant in node_modules/react-scripts/config/webpack.config.js just below the isEnvProduction constant

const writeToDisk = process.argv.includes('--writeToDisk');

3) Change the following entries (note the additional || writeToDisk usage)

const publicPath = isEnvProduction || writeToDisk
    ? paths.servedPath
    : isEnvDevelopment && '/';

  const publicUrl = isEnvProduction || writeToDisk
    ? publicPath.slice(0, -1)
    : isEnvDevelopment && '';



md5-4c8cf5b18a5b562bf547bed7a18c9243



output: {
      // The build folder.
      path: isEnvProduction || writeToDisk ? paths.appBuild : undefined,

After making these changes, run the patch package command.

Now starting the app as yarn start --writeToDisk will start the app in dev mode, while writing the changes to the disk.

[Nargonath]

@pupudu You would need to eject your project for that solution to work, wouldn't you?

[pupudu]

@Nargonath not really. There is this https://www.npmjs.com/package/patch-package module, which can be used to do small patches to a node_module package. Doing a patch is simpler than making a fork, or ejecting CRA.

To give some more context; we tried both other approaches before (ie. ejecting and forking). But they soon become cumbersome if you plan to stay in sync with new releases of react-scripts. Using a patch is easier in the sense when you upgrade react-scripts, you can simply check if the watch script is working, and fix it on the spot if it is not. Since patches are committed and code reviewed, that's less decoupled than a fork.

[Nargonath]

I totally agree with you on this. I just thought that your solution implied to eject but I was wrong apparently. 😃

[adamschoenemann]

This would be great. Any reason why #7812 was ignored? Genuinely interested :)

[pupudu]

@adamschoenemann no idea. I guess they don't like having flags

[Nargonath]

Didn't see that the PR has been locked. That's a pity. I'd be curious to know what obstacles there are to the adoption of such feature, if any.

[berpcor]

Hello.
I have checking of permissions by component name. But name is obfuscated after npm run build. How to fix that?

[Nargonath]

@berpcor I don't see what your question has to do with the current issue being discussed. I may have understood you wrong, but it seems you'd better open a new issue for that.

[Nilegfx]

is there any chance for this to be considered as a important feature? it is being requested since 2016 !!!

[JoshMcCullough]

My 2 cents ... would like to be able to run a "quicker" build before pushing, as a Git hook e.g. to do the transpiling, etc. to sanity check the developer's work. Currently we do this with react-scripts build but it does a lot of extra things we don't really care about for the purposes of the pre-push hook.

[baurine]

guys, any process for this issue?

[akanshgulati]

@gaearon May be we can add a flag like this to build and compile every time,

BUILD=true react-scripts start

[koyadovic]

A workaround, if using Bash, is to execute something like this:

yarn build && inotifywait -m -r -e modify -e attrib -e move -e create -e delete public src |
while read events; do
  pkill -9 sleep
  pkill -9 yarn
  sleep 2 && yarn build &
done

This waits for changes into public or src directories. If so, kills a possible previous execution of yarn and launches yarn build in the background again.

[Friss]

Now that you can specify the port and host for the dev tools via ENV vars I was able to get a pretty nice setup for developing a CRA app and Express backend.

I have this route handler that basically checks if a requested file can be served from the dev server. It uses fetch from node-fetch.

const fetch = require('node-fetch');

if (process.env.NODE_ENV !== 'production') {
  app.use(async (req, res, next) => {
    try {
      console.log('attempting', `http://localhost:3000${req.path}`);

      const response = await fetch(`http://localhost:3000${req.path}`);
      const headers = response.headers;
      const body = await response.arrayBuffer();

     // If no headers that means we didn't get a response worth sending back move on to next route.
      if (!headers) {
        return next();
      }

      if (headers.get('content-type')) {
        res.setHeader('content-type', headers.get('content-type'));
      }

      if (headers.get('content-length')) {
        res.setHeader('content-length', headers.get('content-length'));
      }

      res.send(new Buffer.from(body));
    } catch (e) {
      console.error(e);
      next();
    }
  });
}

And a basic template engine

app.engine('template', async (filePath, options, callback) => {
  let template = app.locals.appTemplate;

  if (isTest) {
    return callback(null, '');
  }

  if (!isProd) {
    try {
      template = await fetch('http://localhost:3000').then((res) => res.text());
    } catch (e) {}
  }

 // Handle how you want to serve the build HTML in production. I personally serve it from a DB. 
if (!template) {
 return BUILT_HTML_OUTPUT;
}

  return callback(null, template);
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'template');

Then you can run your express app on a different port say 3001 and start CRA with:

"start": "WDS_SOCKET_HOST=localhost WDS_SOCKET_PORT=3000 react-scripts start",

[josephr5000]

@Nargonath -
I forked this project and updated the react-scripts/config/webpackDevServer.config.js file.

    quiet: true,
    // WebpackDevServer has an option to write every build to disk. This can be
    // useful for certain use cases such as developing browser extensions where one
    // would need to otherwise do full builds.
    writeToDisk: true,

The above setting with a few other changes like

  "homepage": ".",

got my local dev environment working in CRA2.x

After merging in CRA 3.x, this stopped working. I don't see the /dist folder anymore.

wondering if anyone else is facing this issue?

@Nargonath I'm one of the many who need this feature, and in scanning I found the writeToDisk: true solution and your comment saying it didn't work in CRA 3.x.

I'm using CRA 3.4.1 and just tried this today and found it works perfectly! I hope that provides you some encouragement to try it again.

For routing to work I also needed to set homepage in package.json, but didn't need to make any other changes. yarn start did a dev build and left the results in the dist directory. Very helpful!

[Nargonath]

@josephr5000 Alright, thanks for letting me know. I should try it out again. This would simplify much of my cra-build-watch.

[josephr5000]

@josephr5000 Alright, thanks for letting me know. I should try it out again. This would simplify much of my cra-build-watch.

@Nargonath FYI I have noticed this setting is fragile. I think yarn add seems to feel free to "refresh" my node_modules, and finds this modification a nice thing to "refresh". I do occasionally have to re-apply this, so if yours stops working check out the config file to make sure your setting is still there. If I weren't so lazy I'd look for a more permanent fix, but this solves my immediate problem.

[Nargonath]

I developed a lib which monkey patches the node_modules for that exact purpose so I don't think it would have the same problem as you have but thanks for letting know. :wink:

[ibraheemdev]

Is there any update on this? Is there any other way to achieve a development hot reloading output to a folder? This is useful when you serve static files (/build) from a server and need hot reloading without rebuilding every time.

[joaovbibiano]

I need this, because the same reason above... we have a serve that serves our CRA... in development we need the debug bundle, not just in memory.

[ibraheemdev]

For anyone else who has this issue, I ended up going with a combination of this gist and the cra-build-watch package. The package is probably the best and most configurable package, but I just needed a simple script:

process.env.NODE_ENV = "development";

const fs = require("fs-extra");
const paths = require("react-scripts/config/paths");
const webpack = require("webpack");
const config = require("react-scripts/config/webpack.config")("development");

// the output directory of the development files
outputPath = paths.appPath + "/dist";
config.output.path = outputPath;

// update the webpack dev config in order to remove the use of webpack hotreload tools
config.entry = config.entry.filter((f) => !f.match(/webpackHotDevClient/));
config.plugins = config.plugins.filter((p) => !(p instanceof webpack.HotModuleReplacementPlugin));

(async () => {
  await fs.emptyDir(outputPath)
  webpack(config).watch({}, (err) => {
    if (err) {
      console.error(err);
    } else {
      // copy the remaining thing from the public folder to the output folder
      fs.copySync(paths.appPublic, outputPath, {
        dereference: true,
        filter: file => file !== paths.appHtml
      });
    }
  });
})();

[bjankord]

@iansu @ianschmitz @mrmckeb @Timer @gaearon Is there any interest with adding the writeToDisk flag into create-react-app proper as @pupudu described here?
https://github.com/facebook/create-react-app/issues/1070#issuecomment-541260446

It looks like there was a PR to add this capability but it was closed purely out of the stale PR bot coming to close it. Would be nice to get that reopened and reviewed if maintainers think this would be a valuable addition to add into create-react-app.

From a consumer perspective, it would be helpful for being able to pipe the built files through express for faster developer feedback when working on an express/create-react-app.

The ability to write files to disk with a watch mode is also a feature that vue-cli has which I've found to be quite useful.

[mrmckeb]

We actually utilise something similar in my company, I agree there's value in this feature... but I'm not sure we can get it out for 4.0 though. I'll flag it for discussion.

[pupudu]

Great to see this being discussed.
I am happy to update the PR and reopen when we are good to go 👍

[lewisl9029]

@pupudu, was looking at your PR just now, looks like it changes the publicUrl as well as other unrelated behavior based on the flag (whether or not to open the browser). Just wanted to raise that there are many use cases for writing the dev bundle to disk outside of serving dev assets with a different server, that might require the publicUrl to remain unchanged:

For instance, building an unoptimized build for faster CI (https://github.com/facebook/create-react-app/issues/1960, https://github.com/facebook/create-react-app/issues/1070#issuecomment-488349515), developing browser extensions (https://github.com/facebook/create-react-app/issues/1070#issuecomment-357787414) or electron apps (https://github.com/facebook/create-react-app/issues/1070#issuecomment-386155494) using the CRA dev server for faster feedback loop with fast refresh and faster builds (no need to optimize), and for interacting with other developer tools that might make use of the unoptimized bundle (I'm actually working on something right now that processes dev bundles, and currently it requires patching CRA).

I think @ioloie's PR (https://github.com/facebook/create-react-app/pull/6144) that only adds a WRITE_TO_DISK env var is the more flexible option, since everything else your PR changes can already be controlled through existing env vars independently from WRITE_TO_DISK behavior (see BROWSER, PUBLIC_URL): https://create-react-app.dev/docs/advanced-configuration/

[bjankord]

I've been using https://www.npmjs.com/package/cra-build-watch as a work-around for this issue. I like the idea of a WRITE_TO_DISK flag. I think it would be awesome if when that flag is set, it applies the webpack config changes that are set in the cra-build-watch package.

[efranca]

@bjankord Thanks for the hint! It serves perfectly for my need as well. It would be very nice to have this feature out of the box. Anyway, https://www.npmjs.com/package/cra-build-watch works just great!!!