I'm building a portfolio with a contact form in React (create-react-app). I need a bit of backend for that so the user can send a message to my emailaddress. All works fine. But now I want to deploy the app to the web with heroku. However when I run a test by trying to run the app on the server port localhost:5000 I get these two errors shown in the title, and a blank document
Uncaught SyntaxError: Unexpected token '<'
Manifest: Line: 1, column: 1, Syntax error.
My manifest.json file looks ok. Could it be that the css files are not found in the static folder?
Project folder structure
The server
const express = require('express')
const router = express.Router()
const cors = require('cors')
const nodemailer = require('nodemailer')
const hbs = require('nodemailer-express-handlebars')
const path = require('path')
const colors = require('colors')
const bcrypt = require('bcrypt');
const dotenv = require('dotenv')
const PORT = process.env.REACT_APP_PORT || 5000
const app = express()
app.use(cors())
dotenv.config()
app.use(express.json())
app.use(express.static(path.join(__dirname, '../myportfolio/build')))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '../myportfolio', 'build', 'index.html'))
})
//removed nodemailer code
app.listen(PORT, () => console.log(`Server up and running in ${process.env.REACT_APP_NODE_ENV}
on port ${PORT} !`.yellow))
My manifest.json
{
"short_name": "Portfolio",
"name": "my name, Portfolio",
"icons": [
{
"src": "discoballicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Problem solved, found the answer on github here:
https://github.com/facebook/create-react-app/issues/1812
When running npm build you can see this:
The project was built assuming it is hosted at /portfolio/.
You can control this with the homepage field in your package.json.
The problem was an incorrect path on the server. It looked like this:
app.use(express.static(path.join(__dirname, '../frontend/build/static')))
It had to be:
app.use('/showcaseportfolio', express.static(path.join(__dirname, '../frontend/build')))
Now it runs on localhost:5000/portfolio
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.