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;
}
Related
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?
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 currently learning to deploy applications made with NextJs to VPS. I have been successful, running some REST APIs on the Nginx server, I am not using the NextJs api feature, this is separate using Express. This is executed using PM2.
But I am confused, how do I serve NextJs "out" the results folder "next build && next export", this is a dashboard page that fetches data on the client side.
Do I have to treat the same with the REST API using PM2 or a different treatment, can you please provide an example configuration file of nginx for this.
I have tried googling but there is no exact answer about this.
Thanks in advance, I appreciate any answer.
server {
server_name your-website.com;
location / {
root /app; # name of the folder where you put content of out directory, try files will be relative to this path
try_files $uri $uri.html $uri/ =404; # try different strategies to find matching file in the folder with build, otherwise throw 404 error
}
error_page 404 /404.html; # if 404, serve this file
}
For clean urls in angularjs I must use $locationProvider.html5Mode(true); but when I refresh my page it shows a 404.
I've read that I need to configure server file.
Structure
/html -
/views -
home.html
about.html
contact.html
index.html
app.js
What I've done so far:
nginx.conf
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
The Angular HTML5 location mode basically took advantage of HTML5 history API to "simulate" URL changes in client. But the URLs are probably not real (not exist) from the point of view from server therefore it's not possible to locate those pages on the server. There are generally two solutions can let server to know the URLs:
Use server-side rendering. This is widely used by another framework called ReactJS. And actually AngularJS 2.0 can work on a server too. Therefore it is possible to generate the real pages server-side and serve them to the client.
Use HTTP server rewrite techniques. This is what you are trying to do. The idea is to forward all related requests to a single AngularJS entrypoint HTML page, normally it's the index.html from the root.
For your case, assume the entrypoint of AngularJS is /index.html. Try this:
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
The previous solution is not perfect, because it will test every request arbitrarily. We can avoid unnecessary URL looking up by specify more detailed rules:
server {
root /html/views;
index index.html;
rewrite "^/users" /index.html last;
rewrite "^/pages" /index.html last;
...
}
Use regular expressions to match the URLs you want to serve with Angular.
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