I have a SPA with pretty url navigation (/link instead of #link). It works fine as long as I start on the root and navigate around from there but if I go directly to /link in the browser I get Cannot GET /link.
How do I rewrite all requests to go to the main script file?
I've read through the webpack-dev-server docs but can't find anything.
I found the answer, in webpack.config.json add the following:
devServer: {
historyApiFallback: true
}
Related
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?
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.
Using the starter gatsby site, when I build it and load /public/index.html in chrome without running gatsby serve - none of the route links work. They point to the root of my drive - so <Link>'s look like this file://c:/page-2
I tried setting the pathPrefix in gatsby-config.js and ran a gatsby build --prefix-paths - but I can't get the route <Link>'s to be relative.
module.exports = {
pathPrefix: `/`,
....
Any ideas? I know this is possible with create-react-app without a server - as long as you set "homepage": "./" in package.json and use HashRouter - but not sure how to achieve the same in Gatsby.
I have a problem that is: I can't serve a react app in a sub-directory using HashRouter. I already tried the solutions proposed in this and this questions but it doesn't work as expected.
I have the following architecture:
Traefik as reverse-proxy
foo-service:
image: foo
labels:
- "traefik.enable=true"
- "traefik.http.routers.foo.rule=Host(`foo.localhost`) && PathPrefix(`/bar`)"
# The line below is done in order to nginx to serve the files on the root
- "traefik.http.middlewares.pathStrip.stripprefix.prefixes=/bar"
- "traefik.http.routers.foo.middlewares=pathStrip#docker"
nginx serving a React App (that uses HashRouter)
The problem here is that on package.json when I use "homepage": "." and I enter foo.localhost/bar I get a lot of 404 errors because the links to resources such as js/css are located on ./static/css/...css instead of bar/static/css/...css.
When I put "homepage": "/bar" the resources are loaded correctly but the URL becomes foo.localhost/bar#/login which seems wrong.
And finally when I set both "homepage": "/bar" and <HashRouter basename={'/bar'}> the resources are also loaded correctly but then the URL becomes foo.localhost/bar#/bar/login which is a disaster.
I know that my second solution is "apparently" the closest one to the right solution but I honestly dislike it because setting the path on package.json seems bad to me. I would like to only change the reverse-proxy configuration instead and let the app be "agnostic".
Thanks in advance.
I installed react-router-dom, and works fine in internal server, but when I upload the build version to my server does not redirect and seems like the url does not exist.
Please Help!
Here's a link to a credible .htaccess template:
https://github.com/react-boilerplate/react-boilerplate/blob/master/app/.htaccess
You'd want to put this in the same directory you're serving from. This is necessary to have apache correctly route calls. Alternatively, you could use HashRouter, which would work but would result in less pretty urls.
I'm trying to enable html5mode in an Angular 1 application. This mode requires the webserver to return the same HTML for various paths. In nginx, this is done by adding a try ... index.html for the location, meaning nginx always fails back to the main html if it can't find the page.
However, while development I have no nginx, I'm using the Webpack dev server to serve the pages, with a proxy to the backend. How do I configure the Webpack dev server to behave in a similar fashion?
Oh dear. Oh dear oh dear oh dear.
I scanned the documentation twice, and only after posting this question I found the historyApiFallback settings, as described here.
Add this to the settings:
devServer: {
historyApiFallback: true,
proxy: { ... }
}
I'm keeping this question here hoping it will help others save time in the future.