Menu
i have read some several articles about how to serve static files from create-react-app with express. I have tried everything now. Can someone please help me?
This is how my structure looks like
When i deploy this to Heroku i get following error: main.ac4887ed.js:1 Uncaught SyntaxError: Unexpected token <
Why is this happening? I have tried for some hours now.. Maybe something im missing?
This is the code i have in my server.js file:
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("../build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "../build", "index.html"));
});
My index.html file in public folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/quiz.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>QuizGame</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
And the output from Heroku logs look like this when i try to enter the page:
Am i doing anything wrong?
This is index.html from my build folder:
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/quiz.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><title>QuizGame</title></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.ac4887ed.js"></script></body></html>
This is my package.json file to show dependencies, does it require any dependencies to make it work?
"dependencies": {
"axios": "^0.17.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"connect-mongo": "^2.0.1",
"express": "^4.16.2",
"express-session": "^1.15.6",
"immutable": "^3.8.2",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"mongoose": "^5.0.2",
"morgan": "^1.9.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"react": "^16.1.1",
"react-bootstrap": "^0.32.4",
"react-countdown-now": "^1.3.0",
"react-dom": "^16.1.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.7",
"react-scripts": "1.0.17",
"redux": "^4.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"ws": "^6.1.0"
},
I figured it out:
In my server.js file I changed
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("../build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "../build", "index.html"));
});
to
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use('/', express.static("build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "build", "index.html"));
});
}
Thanks for all help!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With