Execute a react webpack bundle without a server

Question

I have a simple React application that was built up with various node_modules . The application runs fine when I bundle the application into index.html and app.js and serve it from a webpack-dev-server instance. I tried to also point straight to the index.html file in chrome, expecting it to run the application as normal, given it has access to the bundled app.js though nothing loads.

My question is, what does the webpack-dev-server provide that I dont have when hitting the index.html file directly? I would have thought that everything that is needed by the application is included in the app.js bundle?

I don't have any static assets to worry about at the minute, this is a pretty simple react application that should render some basic components, that will display some text / buttons.

Console is empty and the network tab looks like the following -

Answer 1

Correct me if I'm wrong but I think you just didn't generate your bundle.

Webpack-server builds your files with webpack and keeps app.js in the memory. When you stop webpack-dev-server, there is no app.js file which your index.html could pick up. You simply need to use your webpack configuration to to build your app.js file.

add script to your package.json like:

"scripts": {
    "build": "webpack --config directory/webpack.config.js --progress"
},

and then run nam run build , it should then generate your app bundle which then paste to directory of your index.html so it can pick it up.