Blank page when serving react app with nginx in a specific location-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

Sorry, this is the first time I write something here and it is not well understood

the NGINX block that works is:

location / {
    root /var/www/build;
}

the following block gives error 404:

location /app {
    root /var/www/build;
}

the following block gives a blank page:

location /app {
    alias /var/www/build;
    try_files $uri $uri/ /index.html?$args;
}