简体   繁体   中英

Errors when running app on server port 5000, Uncaught SyntaxError: Unexpected token '<' and Manifest: Line: 1, column: 1, Syntax error

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM