I'm trying to deploy a react
app on heroku
but after deploying it on heroku its showing blank page,I've also created this app using buildpack mars/create-react-app
This is what I'm getting on deployed project:
Here's my package.json
file:
{
"name": "covid-19",
"version": "0.1.0",
"private": true,
"homepage": "covid-19-stats-by-anny-v3",
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"express": "^4.17.1",
"fetch": "^1.1.0",
"gh-pages": "^3.1.0",
"material-table": "^1.65.0",
"mui-datatables": "^3.3.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-social-icons": "^4.1.0"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-scripts": "^3.4.1"
}
}
The reason behind this white screen is JavaScript files are loaded into the browser.
There is the publicPath setting in your Webpack configuration to tell an app what its root path is. In our example, that would be https://www.yourwebsite.com/
If set correctly, it will base links like above from that URL – and your application will load like expected.
Put this information is package.json file add these lines after version in package.json
"homepage":"your app link"
and build the application again it will work.
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.