It seems like you’re dealing with a setup involving Vite for the front-end (React), Node.js for the backend, and CyberPanel for hosting on a Virtual Dedicated Server (VDS) with LiteSpeed. You’re also using proxy configurations for handling API requests to the backend. Based on the details you’ve shared, it looks like there are several issues in routing and configuration, particularly with proxying API requests and serving the production build from the dist folder.
I’ll walk you through some steps to try to resolve the 404 error and configure your setup correctly.
Steps to Fix and Configure:
1. Check Document Root Configuration:
Since you’ve mentioned that you had to figure out that dist should be the document root, make sure this is correctly reflected in your CyberPanel and Virtual Host settings.
Your docRoot directive should correctly point to the dist folder:
docRoot $VH_ROOT/public_html/dist
Make sure that when you run npm run build, the production build is placed in public_html/dist directory. If you’re moving dist after npm run dev, you should actually use npm run build for production instead of npm run dev.
2. Proxy Setup in Virtual Host Configuration:
In the context of proxying API requests from the frontend to the backend, ensure that the proxy settings in your virtual host configuration are correctly mapped.
Your current proxy context looks like this:
context /auth {
type proxy
handler backend
addDefaultCharset off
}
This setting proxies /auth requests to your backend. Ensure that the backend app (Node.js) is correctly listening on https://127.0.0.1:5000. You can verify this by hitting the backend directly via Postman or your browser (e.g., https://127.0.0.1:5000/auth). If it gives a valid response, then your backend is working.
Also, confirm that the external app in CyberPanel is correctly configured with:
Web Server frontend https://127.0.0.1:5173
Web Server backend https://127.0.0.1:5000
This should handle requests to the backend.
3. Update Vite Proxy Configuration:
Since you’re using Vite, you should configure the proxy in your vite.config.js to forward requests during development to your Node backend.
In vite.config.js, ensure you have something like:
export default {
server: {
proxy: {
'/api': {
target: 'https://127.0.0.1:5000',
changeOrigin: true,
secure: false,
},
},
},
};
This means that any API requests (e.g., /api/auth) will be forwarded to your backend running on https://127.0.0.1:5000.
4. Configure .env Files:
You likely have an .env file in both your frontend (React) and backend (Node) projects. Ensure that the VITE_API_URL or similar environment variable in your React app points to the correct API endpoint.
For example, in your .env file for React, you could have:
VITE_API_URL=https://127.0.0.1:5000/api
Make sure your backend is also set up to handle requests from this origin (CORS configuration).
5. Ensure Proper CORS Handling:
Your Node.js backend should allow requests from your frontend (especially in production). If CORS is not handled, it can lead to 404 or other errors.
Here’s an example of setting up CORS in Node.js:
const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors({
origin: 'https://127.0.0.1:5173', // Allow requests from your frontend URL
}));
app.use('/api', apiRoutes);
app.listen(5000, () => {
console.log('Backend running on https://127.0.0.1:5000');
});
6. Rewrite Rules for SPA (Single Page Application):
For React with Vite, it’s crucial that your web server is properly handling Single Page Application (SPA) routing. This means that if no static file is found, it should always serve index.html from the dist folder.
Your current rewrite rules:
rewrite {
enable 1
autoLoadHtaccess 1
logLevel 9
# Redirect HTTP to HTTPS
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# SPA routing rule
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]
}
These look fine, but ensure the path to index.html is correct (it should be inside public_html/dist/index.html).
7. Handling Production Build in public_html:
After you build the React app for production using npm run build, it generates a dist folder. You mentioned manually moving this to public_html. To avoid manually moving files, you can modify the output directory in vite.config.js so that npm run build directly outputs to public_html/dist.
In vite.config.js:
export default {
build: {
outDir: 'public_html/dist', // Output directly to public_html/dist
},
};
This way, you won’t need to move files after the build.
Checklist:
- Verify backend is running on
https://127.0.0.1:5000.
- Ensure Vite proxy configuration in
vite.config.js forwards API requests.
- Check
.env files for correct API URLs in both frontend and backend.
- Handle CORS in the backend to allow frontend requests.
- Ensure
dist is the correct document root in CyberPanel.
- Ensure rewrite rules for SPA are serving
index.html for unknown routes.
- Build directly to
public_html/dist using Vite’s config.
Debugging Steps:
- Try accessing
https://127.0.0.1:5000/auth directly via Postman or browser.
- Test frontend build (
npm run build) and see if it works without manual moving.
- Use browser dev tools to see if API requests are correctly routed (check network tab).