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.
Related
I have created a web application and now I am trying to deploy it with Nginx.
After developing the application I have created a production version with the command "npm run build".
Since NGINX I serve these files, the corresponding block is:
location / {
root /var/www/build
}
With this, my app works perfectly and I can access it through mydomain.com
The problem is that I want my application to be accessible via
mydomain.com/app
Since the address mydomain.com I want to reserve it to use it with wordpress and give SEO.
The thing is that when I change the NGINX configuration to
location / app {
root /var/www/build
}
gives 404 error.
Looking for the problem I found that the solution is
occasion /app {
aliases /var/www/build
try_files $uri $uri/ /index.html?$args;
}
but with this change I get a blank page instead of my app. And if I inspect the page, the response is as follows:
enter image description here
I have verified that in my browser I already have JavaScript enabled, so I don't understand what is going on.
I have a strong feeling your JavaScript files you have in your builds html file will result in a 404. Please check the Network Tab of your Browsers Developer Console. Entering this by pressing F12.
As your app is deployed under the app location but your JavaScript files are pointing to / they will never be found.
There are a million and one solution to solve this issue. Given you are using something like React.JS, Angular, Vue (Please make clear what kind of framework you are using) you should set /app/ as your new base.
Check this https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/. Great tutorial.
If you are using something not related to any framework you can use <base>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
I am a bit struggle with support to a react js to support 2 different subdomains. Followings are the subdomains I need my app to support
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
As you can see, react-app-path is also changing with the subdomains. I have defined PUBLIC_URL and REACT_APP_PATH in my .env file as below.
REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp
With above env vars app-dev... URL is working. If I change to the path to apps/myapp then www subdomain in working. I need a way to support both subdomains at once
How can I achieve this?
Finally, I solved this problem with the following steps; I was using Nginx to be redirected to the same host. The problem I have was with the paths.
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
According to my Nginx configurations, both URLs were redirected to / in the server. Then the app couldn't find the static files because paths were different with domains. So to fix this, I did as below.
First, remove PUBLIC_URL from my env file. Then app files will be hosted at the / location
Added homepage attribute to package.json file. adding homepage will serve assets relative to index.html. Read more about homepage. Using `"homepage"` in package.json, without messing up paths for localhost
Since the app is using internal routing, I added simple Nginx rule to rewrite the location of static files as below.
rewrite /static/(.*)$ /static/$1 break;
This solved my problem with supporting two doamins.
No way, Your React app will be compiled into static HTML, JS, and CSS files, and the only time you can pass parameters to the build tool is before building, which is what you're doing right now. Once the building is complete, it can't be changed.
You can write two shell script, with different environment variable. Then invoke each of them will build different web app.
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 am keeping images in a folder public/assets/img. Then I use it in a component like that:
const imageUrl = "/assets/img/image.png"
Locally everything works fine, but on GitHub Pages in an image URL somehow name of my repo is missing, so instead of
http://name.github.io/my-repo/assets/img/image.png I get http://name.github.io/assets/img/image.png
I was following an instruction on how to create a GitHub Pages build and added in package.json the URL of my project, namely "homepage": "https://name.github.io/my-repo"
-- edit --
Also, I've just now realized, that although the routing seems to work fine, it also misses my repository name in the URL, so instead of
http://name.github.io/my-repo/subpage there is
http://name.github.io/subpage
What am I missing here?
OK, so I somehow have solved my problems, however, I am not quite satisfied with the solutions:
Fixing the URL problem (missing repo name in the URL)
I've added a basename property to my router <BrowserRouter basename="/repo-name">
Downsides: Firstly, it doesn't look good hardcoded. Secondly, npm start opens localhost:3000 which is empty now. I have to add my repo name to open the app locally, so localhost:3000/repo-name - not too neat.
Fixing images problem (also missing repo name in the URL and thus not displaying images)
I've added a process.env.PUBLIC_URL variable to the image URL: const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png. In local environment it's empty, deployed it takes homepage value from package.json, which is https://name.github.io/repo-name
Downside: one has to add process.env.PUBLIC_URL before every image displayed in a component.
I would be grateful for any better solution!
Problem:
I've deployed a React application to our internal cloud at my company. It works with Cloud Foundry. The app works really well, but there's one problem. Whenever I refresh the application and the URL isn't pointing to the root, for example myapp.ourcloud.com/my-route, I get a Error 404 from Nginx.
What I'm using:
The App is a simple React application. No special modules installed beside React Router V4. The Code is pretty simple, I'm using the BrowserRouter, as a child the application. There are only 3 components that ar simply routed with <Link To=.../> and <Route path={.../> ... as said, pretty basic.
What I've tried so far:
I have added a Staticfile in the root directory with pushstate: enabled as stated in the Cloud Foundry documentation.
I just found the answer by myself. I'll post it here for future users:
My manifest.yml file had the following content:
...
path: build/
...
You simply have to put the Staticfile inside the build/ folder from react and not in the project root. Also be careful, the Staticfile gets deleted everytime you build the project.
Serve index.html for all request and then the react router will manage all the routing.
If you however have endpoints or some backend routes you need to access, just make exception for these routes and serve index.html for everything else.