Question 98561 in Nginx Question posted in
The official documentation can be found here.

Enabling React/Express Route with Query Parameters in Nginx

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search