Back

Technologies:

javascriptjavascript
avatar
Tolerim
10 hours ago

How do I make Nginx display only the contents of a file?

As a beginner, I appreciate your attention to my question. I have a React app built with webpack and copied to my server. The folder only contains main.js, main.css, and package-lock.json files. However, the main page only displays the content of main.js. I have provided the Nginx config below. 

server {
        listen 80;

        server_name api.mydomain.com;

        location / {
                proxy_pass http://localhost:3000;
                proxyhttpversion 1.1;
                proxysetheader Upgrade $http_upgrade;
                proxysetheader Connection 'upgrade';
                proxysetheader Host $host;
                proxycachebypass $http_upgrade;
        }
}

server {
        listen 80;

        server_name mydomain.com

        root /home/maksim/frontend;

        location / {
               try_files $uri /index.html /main.js;
        }
}
When I use only tryfiles $uri /index.html, it results in a 403 error indicating that index.html is not found. However, when I use tryfiles $uri /index.html /main.js;, the main page only shows the content of main.js.

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/**/ (function() { // webpackBootstrap
/**/    "use strict";
/**/    var webpackmodules_ = ({
  
      // and more code here...
What changes should I make to my config?

Answers(1)
avatar
Tolerim
10 hours ago
Verified Answer
It seems like the issue you are facing is related to your Nginx configuration. The current configuration you have set up is telling Nginx to serve the static files directly from the server if they exist, otherwise to serve index.html or main.js. Since you're seeing the contents of your main.js file instead of your app's main page, it's likely that Nginx isn't able to find your index.html file. That's why you're seeing a 403 error when you use try_files $uri /index.html by itself. To fix this, you can try changing the root value in your second server block to point to the directory that contains your index.html file. For example, if you have your index.html file located in /home/maksim/frontend/dist, you can change the root directive to:
Then, you can use the following try_files directive:
This directive will first try to locate the requested file. If it doesn't exist, it will serve index.html instead. If index.html doesn't exist, it will return a 404 error. After making these changes, be sure to reload Nginx:
;