1

I've deployed a nodejs and react app to AWS EC2 following this tutorial. I can see the static html title but react views are not rendering. Looking at the network tab I notice some 404 for the get request but I'm not sure where the issue is.

Here is my nginx setup:

server {
    listen 80;
    location / {
        proxy_pass http://{{my ec2 ip}}:{{5000}};
        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;
    }
}

package.json for client:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    some dependencies
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "homepage": "http://{{my ec2 ip}}",
  "proxy": "http://{{my ec2 ip}}:5000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Finally as a quick sanity check, here is my server.js and directory structure:

var express = require("express")
var cors = require("cors")
var path = require("path")
var bodyParser = require("body-parser")
var app = express()
var port = process.env.PORT || 5000

var Users = require('./routes/Users')

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use(Users)

app.use(express.static(path.resolve(__dirname, './client/build')));



app.get('*',function(req,res){
  res.sendFile(path.resolve(__dirname, 'client', 'build'));
});

app.listen(port, () => {
    console.log("Server is running on port: " + port)
})

Thanks in advance!

update

Here is the 404 error in detail: the error I got in console is the following:

The resource from “http://34.203.226.71/ec2-34-203-226-71.compute-1.amazonaws.com/static/js/main.2b162001.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)"

And in the network tab the get requests for / returns a 404 enter image description here

update Here is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

In my App.js it just contains a list of routes matching to different components.

8
  • May we have a look at the header info. of those 404s? Plus using const and let over var is a better practice. Commented Apr 20, 2020 at 20:20
  • @AvivLo Thanks for the suggestion please see header file above. I looked up online and found the error from console is a result of failed get request. So it seems the browser fails to fetch the js file yet it is able to get the static html. Could the cause be the react app is running on port 3000 yet aws server is listening on port 80? Thanks! Commented Apr 20, 2020 at 22:33
  • try add type='text/javascript' in your html link tag for your js file. Are you using express.js at the back end? Commented Apr 20, 2020 at 22:38
  • @AvivLo I added type='text/javascript' and the issue persists. For backend I am using express Commented Apr 20, 2020 at 22:45
  • Can we have a look at your app.js or index.js . Just strip the sensitive info. Is the dev. console in the browser still giving the same error? Commented Apr 20, 2020 at 22:50

1 Answer 1

1

It might be due to the fact that server.js loads before react has finished building. So the static path points to ./client/build which does not exist yet. So perhaps run server.js after the react has finished the building process.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.