Deploying react project with node/express

Web Development Full-Stack
1

Hello,
I’m working on deploying a React/Node/Express app, but I’m having trouble getting it to deploy. I was able to successfully deploy with Node/Express, and I’ve been able to serve a functioning react build locally, but I can’t seem to get it to run on a platform (tried on Digital Ocean and Heroku). When I go to the site I see a blank white page. In the console I have the following:

Script from script.js was loaded even though its MIME type ('text/html') is not a valid JavaScript MIME type.
The stylesheet styles.css was not loaded because its MIME type 'text/html' is not 'text/css'.
Uncaught SyntaxError: expected expression, got '<'     script.js:1

The script is main react script in the build folder, and its corresponding css file.

I’ve looked at several deployment tutorials and tried to copy a few projects, but it doesn’t seem to work. I’m confused by the number of ways of doing it, from different folder structures to having the platform run the build instead of building locally then uploading to the platform.

So far my build works locally. I have back end and front end folders in my project root.
This is the serve code in my server.js.

app.use(express.static(path.join(__dirname + '../client/build')));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});

Any help troubleshooting would be appreciated, or if you have any tips for deployment in general.

Thanks!

2

Could you provide us with an overview of your file structure? It seems like the pathing you provided may be incorrect and so it returns a 404 HTML file but it’s told to find a .js file, so it assumes an error.

3

Ah, that could make sense. I have client and server directories, with server.js in server and build/ in client. Starting in root:

  • server/
    • server.js
  • client/
    • build/
      • index.html
      • static/
        • js/
          - script.js
        • css/
          - styles.css

I’m also a bit confused about how many package.json files I should have, and where they should be. Right now I have one in root, one in server, and one in client.

4

Hahaha, I was really shaking my head on this one and felt like I couldn’t figure it out. You added a ‘+’ on your app.use() invocation. It should be a ‘,’ instead.

1 Like
5

YESSS thank you so much, I’ve been working on this for so long now haha. At least I learned a lot about deployment methods on the way. Now I can finally get back to building!

Cheers!

1 Like