React+HMR / `netlify dev` / Router

Support
,
1

sitename https://unruffled-jang-4961e9.netlify.app/

I have HMR working ok with a React app while in local development.

In the netlify.toml I have

[build]
  functions = "functions"
  publish = "dist"

[context.production]
  command = "npm run build && cd functions/node-fetch && npm install"

[context.development]
  command = "npm run build-dev"

[dev] # config specific to `netlify dev`
  framework = "#custom"
  command = "npm run start-dev"
  targetPort = 3000
  port = 8888
  publish = "dist"

[[redirects]]  # this is new and not working right
  from = "/*"
  to = "/index.html"
  status = 200

Run with

npx cross-env NODE_ENV=development API_KEY=abcd npx netlify dev

I was just trying to add a frontend view router to the application, so there are now a number of different possible URL paths, all of which should equivalently be served with the html associated with dist/bundle.js.

I think the 2 ports involved in the netlify dev setup makes it not work, when the app tries to route to one of its other views it gets kind of intercepted and reloaded, and doesn’t really succeed at that.

Lmk please, if the setting looks wrong, or perhaps netlify dev doesn’t support this custom two port setup and also view routing?

2

Solved, I got it to work with, in the netlify.toml,

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

And I had to recall that webpack-dev-server and http-server both have their own settings for this, and, they all have to be set right for it to work!

3

Hey @Nick_Vantzos! :wave:

Glad you were able to figure it out :slight_smile: For others in the future, the Netlify Dev proxy server that exposes (by default) port 8888 for your browser, then proxies requests through to your SSG (at port 3000 in this case) is only proxying web requests on port 8888. Webpack HMR is a process that starts when you load a page in your browser, then Webpack’s wrapper JS running in that browser looks for port 3035 on the same Host. Netlify Dev isn’t actually aware of that process at all, or injecting any kind of proxying in there, so even though your main web-server process is getting proxied through Netlify Dev, the Webpack HMR workflow should be completely uninhibited / untouched by Netlify Dev. :+1:t2:

–
Jon