There is 404 error in sub link after build then copy to the server directory

Question

hi, i build the react project and i copied the built-folder to the /var/www/mydomain directory. it is going well in the main domain and sub link. but when i navigate to some sub link, then after refresh, there is 404 error, according to my experience, it is why there is client-side rendering. i use nginx and ubunt 22, how to fix this issue?

Bobby · Accepted Answer

Hey! The issue you’re facing is common in single-page applications like those built with React when they’re served by web servers not configured to handle their routing mechanism properly. SPAs typically use client-side routing to navigate between different parts of the application without the need for a full page refresh. When you refresh a page or try to access a sub-route directly, the server tries to find a resource at that path, which does not exist because all routing is handled client-side. To fix this, you need to configure your Nginx server to always serve the index.html file of your React app for any route, allowing React Router (or whichever client-side router you’re using) to handle the route appropriately. Here’s how you can configure your Nginx server to properly serve your React app and fix the 404 error on refresh or direct access to sub-routes: Open your Nginx configuration file for editing. This file is typically located at /etc/nginx/sites-available/your_domain. If you’ve created a symbolic link in /etc/nginx/sites-enabled/, you should edit the file in the sites-available directory. Modify the server block that serves your React application. You’ll want to add or update a location block to serve index.html for any request that doesn’t match a file or directory. Here is a sample configuration: server { listen 80; server_name mydomain.com www.mydomain.com; root /var/www/mydomain; index index.html; location / { try_files $uri $uri/ /index.html; } # Other configuration... } In this configuration: listen specifies the port Nginx listens on. server_name sets the domain names for this server block. root specifies the root directory where the files are located. index defines which file to serve by default. The location / block with try_files $uri $uri/ /index.html; tells Nginx to first attempt to serve the requested file or directory, and if it doesn’t exist, fall back to serving index.html. This allows your React app’s client-side router to take over and handle the route. Check your Nginx configuration for syntax errors by running sudo nginx -t. Reload Nginx to apply the changes with sudo systemctl reload nginx. This setup should resolve the issue with 404 errors when refreshing or directly accessing sub-routes in your React application. It ensures that Nginx serves your index.html file for any route, allowing the client-side router to handle the path appropriately. Let me know how it goes! Best, Bobby

KFSys · Answer

Heya, The issue you’re encountering is a common one with single-page applications (SPAs) like those built with React, especially when using client-side routing. When you refresh a page at a subpath, the server tries to locate a file at that specific path, which doesn’t exist because all routing is handled by the client-side JavaScript. This results in a 404 error. To fix this issue, you need to configure your NGINX server to always serve the index.html file for any request that doesn’t match a static file. This way, the React application can take over and render the correct component based on the URL. Here’s a basic configuration snippet you can add to your NGINX configuration file: server { # ... other configurations ... location / { try_files $uri /index.html; } } This should resolve the 404 error you’re experiencing on page refreshes. Remember to also check the permissions and ownership of your files in /var/www/mydomain to ensure that NGINX can access them.

Avetium Consult · Answer

Hi, I have same issue on the App Platform, how can I fix this on the App Platform.

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

The developer cloud

Start building today

Report this

There is 404 error in sub link after build then copy to the server directory

Related questions

Is it safe to run production apps on a single DigitalOcean Droplet?

403 Forbidden on DigitalOcean App Platform with FastAPI Backend & Streamlit Frontend

I'm getting this ERROR: you dont' have permission to complete this action

App.yaml file is not detected in the root or .do directory

ReferenceError: module is not defined in ES module scope

npm run build/vite build time out killed

Droplet's Nginx Reverse Proxy Fails with 502 Bad Gateway Only After Deploy Any Thoughts?

Cannot deploy from private github repo

Django/Nginx/Gunicorn "unknown errors" in nginx logs

How to deploy a responsive web design project on a VPS using Git?

How to skip build step for a service in app platform

Does a DO function do npm install, or I need to manually upload the node_modules folder?

Report this

There is 404 error in sub link after build then copy to the server directory

Related questions

Is it safe to run production apps on a single DigitalOcean Droplet?

403 Forbidden on DigitalOcean App Platform with FastAPI Backend & Streamlit Frontend

I'm getting this ERROR: you dont' have permission to complete this action

App.yaml file is not detected in the root or .do directory

ReferenceError: module is not defined in ES module scope

npm run build/vite build time out killed

Droplet's Nginx Reverse Proxy Fails with 502 Bad Gateway Only After Deploy Any Thoughts?

Cannot deploy from private github repo

Django/Nginx/Gunicorn "unknown errors" in nginx logs

How to deploy a responsive web design project on a VPS using Git?

How to skip build step for a service in app platform

Does a DO function do npm install, or I need to manually upload the node_modules folder?