Enabling React/Express Route with Query Parameters in Nginx-CodePudding

Working on a link shortening website. Site works as intended in my localhost production environment, but I can't seem to get an Express GET route with query parameters working after enabling Nginx on my deployed Digital Ocean Ubuntu Linux server.

Node.js/Express GET route:

  router.get("/:code", async (req, res) => {
  try {
    const url = await Url.findOne({ urlCode: req.params.code });
    if (url) {
      return res.redirect(url.longUrl);
    } else {
      return res.status(404).json("no url found");
    }
  } catch (error) {
    console.error(error);
    res.status(500).json("server error");
  }
});

Nginx config file (etc/nginx/sites-available/default):

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/html;

       
        server_name myname.com www.myname.com;

        location / {

                proxy_pass http://localhost:3000/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $remote_addr;
                proxy_cache_bypass $http_upgrade;
        }

If I change the localhost port to my Express server (7777), the GET route works with the URL query parameter (ie: http://example.com/random8chars), but the React front end doesn't load.

As currently configured (port 3000/React server), a Postman GET route to "/:code" returns the desired result, but when I enter the converted link into the URL bar in Chrome it returns the default splash page. In fact, when I enter ANY extension beyond my site name in Chrome it always shows the default splash page. I know this is an issue with Nginx, but I can't seem to get it to work.

Been working on it all day to no avail. Found multiple Stack Overflow threads touching on the subject but nothing works. I tried adding a second location route to the Nginx config file, to no avail. an example of what I've tried:

 location /:code {
         proxy_pass http://localhost:7777/:code;
       }

Please help! I am stuck and feel like I am so close to getting this working. I would greatly appreciate any insight into fixing this. Thank you.

CodePudding user response：

I was just add a comment, but I don't have the rep yet. So it seems to me that Nginx is trying to serve another file, that doesn't exists. Try to add:

location / {
        try_files $uri /index.html;
   }

This will make nginx always try in the rigth file ignoring the path.

CodePudding user response：

so i finally solved the issue! i was initially approaching this problem from the wrong perspective. see, when in my development environment, i had a proxy set up on my react server to bounce any unknown requests to my express server. the thing is, that proxy set in the package.json doesn't work in a production environment, which is why my link shortening app worked in dev but wasn't duplicated in production.

this is how i solved it:

i set up nginx to point to my express server @ port 7777. i used the npm build command to export my react application to the build folder, and then i set up my express server to serve the build folder. that's it. when you access the website's default URL it loads the react build folder and then when i put in a shortened link (GET /:code) it works like a charm. thanks!