JS and CSS Files in MERN Stack (with Typescript) DigitalOcean Showing HTML files instead

Heya @swimminglapiswalrus,

This issue can occur if your server is not set up correctly to serve static files. Your server should be able to recognize and deliver static files (CSS, JS, images, etc.) as they are requested, instead of sending HTML responses for every request.

In a MERN (MongoDB, Express, React, Node.js) stack application, the express.static built-in middleware function in Express is typically used to serve static files. However, it seems that your Express server might not be correctly configured to serve your static files.

Please make sure you have this line in your Express server setup:

app.use(express.static(path.join(__dirname, 'static')));

This line tells Express to serve static files from the ‘static’ directory in the directory where your server script is running.

Also, make sure the path is correct and your static files are actually in the ‘static’ directory in your server’s build folder. If the path is wrong, Express won’t be able to find your files and might send an HTML response instead.

Regarding your Nginx setup, you need to configure it to proxy requests to your Node.js application. A basic configuration in your Nginx’s site configuration file might look like this:

server {
    listen 80;

    location / {
        proxy_pass http://localhost:<your_nodejs_app_port>;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Don’t forget to replace <your_nodejs_app_port> with the port your Express server is listening on.

You also need to make sure that your Express app is correctly handling the routes for your React application, if you’re serving your React app from the same Express server.

An example for that would be:

app.use(express.static(path.join(__dirname, 'static')));
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'static', 'index.html'));
});

This setup will serve your index.html file for all GET requests that don’t match any other route, which is a typical setup for serving a React app.

After adjusting the configurations, don’t forget to restart your Nginx and Node.js servers for changes to take effect.

If you continue facing issues, it might be helpful to see the specific error messages and your server’s configuration to provide more targeted assistance.