I created a simple react app to serve as an error page (might be a bit overkill). The idea is that we can easily customize the errors via query parameters or URL structure (using react router) with the goal to create cloudlfare style error pages as we need them.
For a forbidden route a config could look like this:
# Is needed as far as I know to serve react files at the root such as scripts and media
location / {
proxy_pass http://error-page:3000;
}
location /forbidden {
proxy_pass https://error-page:3000/error403/;
}
I have tried a lot of configs and so far I had the most success with try_files $uri /error403/index.html. However what I do not like about this approach is that it seems like the URL is rewritten in the browser, meaning the user will see /error403 instead of /forbidden
What approach should we use to be able to serve specific react pages with a different path without overwriting the path, so that the user can see it?
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
If I go to the url of the web application I am creating I can see my whole React code under the "debugger tab" when using Firefox. I guess it can be seen in any browser.
Specifically, I go to Webpack field and I can see whatever file/code I want. However, if I go to Reddit and try to do the same I get the following error when trying to open a file:
Error while fetching an original source: NetworkError when attempting to fetch resource.
I suspect this is related to source maps. What is the best way to handle this in real production systems? I need to generate maps in order to give them to Sentry. Can I block them at nginx somehow? If this is the way to go of course.
This is my front-end nginx configuration used for serving my React application:
location / {
# serve bundle
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
I am trying to set up a react app using react router behind a uhttpd server on an embedded device. Unfortunately I do not know how to forward all subroutes (eg. /foo/bar) back to /
In nginx this is possible using the try_files statement. Is there something similar using uhttpd?
Hi I resolved this issue.
uhttpd have a option "error_page".
So we must set that option if we decide to use react.
e.g.
config uhttpd 'main'
list listen_http '0.0.0.0:80'
list listen_http '[::]:80'
option home '/www'
option error_page '/index.html'
I have done the following:
AngularJS app
In app.js:
$locationProvider.html5Mode(true);
In index.html:
<base href="/">
nginx config
location / {
try_files $uri /index.html;
}
After deployment, things are working fine (# hash sign is removed) with the static pages. I can go directly to http://fakeurl/about or http://fakeurl/download pages; if I refresh the browser, the pages still load.
However, when I go directly to a dynamic page:
http://fakeurl/cars/:car_id
Then nginx will serve 404.
If I use the # path, then it redirects to the path without the # sign and displays the page; but when I refresh the page again, it shows 404. (This only happens with dynamic routes)
http://fakeurl/#/cars/:car_id
http://fakeurl/#/shops/:shop_id
What rewrite rules do I need to write in the nginx blocks to serve my dynamic routes? Thanks!
I burnt all my midnight oil last night and I found a solution here. If you have a better one, please post here so I can learn
https://gist.github.com/mreigen/4dc8effec8186315c3aac4ce6da46c9a
I think you can use this regex pattern ^(.*)\/#and rewrite it with $1.
Site is almost completely contained in one html file. All other files may be images, css or javascripts and possibly json files too.
server {
listen 80;
server_name git.vosnax.ru;
location / {
try_files $uri "/index.html";
root /home/sybiam/prod/blog;
index index.html;
}
}
This is my current configuration, but this isn't perfect. It will redirect every requests to index.html unless the file exist which is okay.
For some reasons, it removes the GET arguments. I'd like to keep them as I can use them within javascript.
Now, I'd like to add some persistence to the site. Like saving and loading the jsons from a server with really simple auth, it as to support GET and POST. Which means that I can't use JSONP.
The question is only on how to configure nginx to forward all requests to let say /api/* to my pyramid web server and everything else to index.html unless the file exists.
I could probably host the server on a different domain to make things easier but I have no idea how to handle crossdomain requests. CORS isn't supported on old IE.
EDIT:
Apparently the query args were always available so it's not a problem anymore. My javascript was overriding the pathname at loadtime and removing the window.location.search.
the everything else to index.html unless the files exist is the try_files bit you have in your location /-block already
to pass just the /api/* requests to your other server you add the following to your server block (as a sibling of your location /-block):
location /api/ {
proxy_pass http://address_of_server_your_passing_to;
}
see the documentation if you want more info on how a request is matched when there's multiple location blocks