Score:0

react.js app with nginx gives 404 or refresh

mx flag

I have a backend node.js application(system directory) and a frontend react application(admin directory). I use nginx as the webserver.

I can load my frontend well. But when I refresh, it gives 404. I have looked in the nginx directives, but I'm not sure how it works, since I didn't setup this project. I know that react uses the react-router, which nginx is not aware of.

My nginx conf file is:

server {
    listen 80;
    server_name lcl.notification.com;
    root /home/development/www/notifications/system/public;
    access_log  /var/log/nginx/notify.access.log;
    error_log   /var/log/nginx/notify.error.log debug;
    rewrite_log on;
    client_max_body_size 10M;
    location / {
        return 301  https://www.google.com;
        break;
    }
    location /panel {
        alias /home/development/www/notifications/admin/build/;
        index index.html;
        try_files $uri $uri/ =404;
        # Include headers
        include includes/headers.conf;
    }

After login, it opens the /panel uri. But on refresh, it gives 404.

Ivan Shatsky avatar
gr flag
Make a symlink from `alias /home/development/www/notifications/admin/build/` to `alias /home/development/www/notifications/admin/panel/`. Next use `root /home/development/www/notifications/admin` and `try_files $uri $uri/ /panel/index.html;`
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.