Problem setting up React/Webpack with Node/Express

I think I just have my paths set up incorrectly, but I’m not sure why I’m getting this error when I run the server and webpack-dev-server:

localhost/:16 GET http://localhost:3000/dist/bundle.js net::ERR_ABORTED 404 (Not Found)

I’m following this tutorial to set up React with Webpack (I don’t want to use CRA for this project). That tutorial is offered from reactjs.org for people don’t want to use CRA.

I don’t get any errors in my command line from either the node server or webpack server. The 404 I posted above is the only error I’m getting, which leads me to believe that I simpy have an incorrect path somewhere.

Here’s the Github repo. Any help is much appreciated!

1 Like

webpack-dev-server is serving files from memory - there is no dist/bundle.js (unless you have built it previously). You can add writeToDisk: true to your webpack config for files to be written to the disk:

  devServer: {
    ...
    writeToDisk: true, //  <----- add this
  },

Also you have set up both server and client to run on the same port. That won’t work in development.

Changing the port seemed to work. I changed the webpack-dev-server to port 5000 and kept the node server at port 3000. I can test both the client and server separately by going to their respective ports, but I need to have it so that the changes I make on both the client and the server are reflected at the same time, no matter which port. Do I need a proxy for this situation?

In development you’ll have to run both client and server on different ports. To be able to call server from client you’ll need to proxy your requests. With create-react-app it’s one line in package.json. I’ve never done it without CRA, but try this: https://stackoverflow.com/questions/44365577/proxy-in-package-json-not-affecting-fetch-request

1 Like

Adding that proxy did the trick. Thanks a lot!