Question

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

Have built the app with ubuntu, nginx so far… no firewall set up yet, etc. First time deploying a MERN stack, first time using DigitalOcean.

My console’s result when i run the droplet ip address for frontend, is Uncaught SyntaxError: Unexpected Token ‘>’.

Steps I’m taking to get app up and running:

  1. First I’m running npm run build in the server, to compile tsx to js.

  2. Then I’m running npm run build in the client.

  3. I move the client’s build folder to the server’s build folder, renaming it static.

  4. In the server folder, i run pm2 start build/index.js, so it’s pointing to build/static/index.html.

Both my css and js files are the html file.


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

KFSys
Site Moderator
Site Moderator badge
July 12, 2023
Accepted Answer

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.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel