Скачать или смотреть Solving the 404 Error with MERN Stack and NGINX

Learn how to troubleshoot and solve the `404 Not Found` error when connecting your React application to Node.js via NGINX in your MERN stack project.
---
This video is based on the question https://stackoverflow.com/q/63662524/ asked by the user 'David Cortez' ( https://stackoverflow.com/u/14108016/ ) and on the answer https://stackoverflow.com/a/63662614/ provided by the user 'Dominik' ( https://stackoverflow.com/u/1043231/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: MERN Stack - Connection - 404 - NGINX

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the 404 Error with MERN Stack and NGINX: A Complete Guide

When working with the MERN stack—MongoDB, Express.js, React, and Node.js—developers often face various challenges. One common issue is encountering a 404 Not Found error when trying to call an API. This guide will walk you through the problem, explain why it occurs, and provide actionable solutions for addressing the issue when using NGINX as a reverse proxy.

The Problem: Encountering a 404 Not Found Error

You are trying to hit an API endpoint at http://agendamento.descopromo.tk/api/... using a React client, but receive a 404 error. This error code typically indicates that the requested resource could not be found on the server. In your case, this issue could stem from a misconfiguration in your NGINX setup or from how your React application makes the API request.

When you perform a curl command such as:

[[See Video to Reveal this Text or Code Snippet]]

You see a response that indicates issues with the required fields, confirming that the request is reaching the server but not responding correctly due to validation errors.

The NGINX Configuration Breakdown

Let's dig into your NGINX configuration to identify potential issues. Your current NGINX settings appear as follows:

[[See Video to Reveal this Text or Code Snippet]]

Issues Noted

Multiple Node Apps: You indicated that you have two apps running on ports 3000 and 4000. Ensure that your API requests to /api/users/login are routed appropriately.

Local Development vs Production: In a local environment, you'll want to access your Node.js server directly through its port (http://localhost:4000/api/users/login). When deployed, you should use the domain set in your NGINX config (http://yourdomain.tld/api/users/login).

Suggested Solutions

Step 1: Verify the Node.js Server Configuration

Ensure that your Node.js server is correctly set up to listen on port 4000 for API requests. An example of a simple Express app could look like this:

[[See Video to Reveal this Text or Code Snippet]]

Make sure to include necessary middleware for JSON parsing to handle incoming data.

Step 2: Test API Endpoints Locally

Before integrating with NGINX, test your API endpoints directly to ensure they respond correctly. Use a curl request or Postman to confirm that your API behaves as expected at http://localhost:4000/api/users/login.

Step 3: Adjust the NGINX Configuration

Be sure incorporated analytics and adjustments based on the context of the application, such as switching environment-specific domains. Properly configure your NGINX to forward requests to the correct Node.js port:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Use Environment Variables

Manage your environment variables for different stages (production vs local development). For example, in your React client code, modify the fetch URL based on the environment. Example:

[[See Video to Reveal this Text or Code Snippet]]

Step 5: Restart NGINX and Node.js Application

After making changes, restart your NGINX server and Node.js applications to ensure all configurations take effect using commands such as:

[[See Video to Reveal this Text or Code Snippet]]

and

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Facing a 404 Not Found error can be frustrating, especially when working with the MERN stack and trying to set up your application with NGINX. By verifying the configuration of your Node.js application, testing your endpoints, and ensuring your NGINX server forwards requests correctly, you can troubleshoot and resolve this issue effectively.

If problems persist, consider checking server logs for any indications of miscommunication or errors among servers. With these steps, you sh