Where is bundle.js on the filesystem?

[nikolas]

Hi,
I'm accustomed to symlinking bundle.js to a file in my Django application's media directory during development, outlined here: https://github.com/ccnmtl/juxtapose#development-notes

However, with my newly-created react app that I made with create-react-app, I run npm run start and don't see build/bundle.js on the filesystem. In the browser I do see http://localhost:3000/static/js/bundle.js. Does this path exist on the filesystem so I can symlink to it?

[nikolas]

Alright, so I see in webpack.config.dev.js where static/js/bundle.js is configured: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L70

The comment states:

// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.

My question is now, how can I configure this to produce a real file?

[Ayc0]

Currently you can't
If you work in dev with CRA, it auto-serves the dev bundle.
You have to eject the conf enable this

[Ayc0]

In your case, Django is serving the html + css + js so it's incompatible with the config of CRA

[nikolas]

It's my understanding that create-react-app is the current best practice for developing react apps, is that correct? If so, supporting Rails and Django interoperability (or the flexibility to work in any back-end framework) should be a high priority, since it's a typical setup to have React work on top of a DB-backed REST api.

[Ayc0]

Not really, CRA isn't the best practices for react apps, it's a powerfull tool to start a SPA in React
So, if you want to serve in a html generated by a server like django, CRA doesn't support it

But if you want to use Django just to send an html file with some data inside but not in the js, you still can you CRA without ejecting

[Ayc0]

So CRA was designed for this case and tried to be really easy to use without almost any config.
That's why the eject command was implemented: to suit more specific use cases, like yours

[nikolas]

I understand, thanks. I will look into ejecting my application into something more custom.

[Ayc0]

I don't know how you want django to render your react app, but what're looking for is certainly get rid of the chunkhash in webpack.config.prod.js (because the files'name change at every build which isn't perfect for consistent serving with Django) or changing the start.js file to only trigger a webpack build with the conf webpack.config.dev.js and not triggering webpackDevServer

[Ayc0]

https://www.fusionbox.com/blog/detail/create-react-app-and-django/624/