0

I am running into issues with my webpack-dev-server. When i try to load at a specified route such as "http://localhost:3000/login" I get the following message "Cannot GET /login".

I've read through the docs and seen many different solutions, but I don't see the flaws in my config. I have my webpack setup like this.

webpack.config.js

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  module: [ rules... ],
  devServer: {
    contentBase: path.join(__dirname, 'build'),
    compress: true,
    port: 3000
  },
}

My scripts for the app look like this:

"build": "webpack",
"dev": "webpack-dev-server --open"

If I run dev the app will open to the initial route - "/". If I click on a link to login - "/login" that will load fine. But if I refresh the page on login it will throw the "Cannot GET /login" error.

Is there something I'm missing or have wrong in my webpack configuration?

Ryne
  • 1,195
  • 2
  • 14
  • 32
  • 2
    I believe you are missing the server configuration for html5 history mode. Which is how we can change the url without changing page (but the user thinks we are changing page). And you fix it by redirecting pretty much every request (that isnt an asset or something else) back to your top /index.html. You also need to do it when you deploy your final result to a real server, but with devserver, the config looks like this: `devServer: { historyApiFallback: true }` – ippi Aug 08 '20 at 02:28
  • That solved it for me thanks! I do understand the logic behind the routing just knew there would be some way to solve it with webpack-dev-server without having to use a server on dev. – Ryne Aug 08 '20 at 04:44

1 Answers1

2

webpack-dev-server only serves two things: bundled assets, and whatever is in the directory you gave it as the value for contentBase. things work the way you want when you browse to / then navigate to /login since I assume you have some kind of client-side routing framework in your webapp. none of that applies when you refresh your browser and ask the server for a page at /login .

w-d-s is 404ing on you since you don't have a file named "login" in your build directory (and I doubt you have a compiled bundle or chunk with that name either). do you have an index.html file in that directory? is that what you're served when you visit localhost:3000/ ? does that file have a <script> tag which loads your webapp?

what were you expecting to happen when you visited /login ? I'm assuming you wanted to display your webapp's login screen when you visit localhost:3000/login ? if so you'll most likely need to use a separate server like express.js to server-side-render your webapp. this server can either be on a different port from the server launched by w-d-s, or it can actually use w-d-s as middleware so you only need one server with one port.

this seems like a decent resource at first glance: Server side rendering with react, react-router, and express . but if it doesn't work for you, there are dozens more on SO already which might.

Dan O
  • 6,022
  • 2
  • 32
  • 50
  • @ippi left a comment on the question which describes a way easier solution than mine! if production-readiness is not a concern for you then that seems like a better fit for the question as asked – Dan O Aug 08 '20 at 02:33
  • Thanks for the resources! I was just playing around with webpack-dev-server for a simpler development experience on this project. Server side rendering is not really necessary in the app im building, but I've been playing around with it for some other projects so I appreciate the link – Ryne Aug 08 '20 at 04:48
  • @ippi comment did help with my solution! but thank you for taking the time to answer my question I appreciate it – Ryne Aug 08 '20 at 04:49