I am trying to deploy an express app with react as a front end framework on Elastic Beanstalk. The build succeeds however the website always returns with a Bad Gateway 502. I am trying to build the react app on eb and start the node.js server after react builds successfully, using a deploy script defined in package.json and a Procfile.
Package.json
{
"name": "ecosys",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"cross-env": "^7.0.3",
"express": "^4.17.2",
"history": "5",
"i18next": "^21.6.4",
"i18next-browser-languagedetector": "^6.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.2",
"react-icons": "^4.3.1",
"react-query": "^3.32.1",
"react-router-dom": "6",
"react-scripts": "^4.0.3",
"react-select": "^5.2.1",
"react-toastify": "^8.1.0",
"react-transition-group": "^4.4.2",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "node server.js",
"build": "react-scripts build",
"deploy": "npm run build && npm run start",
"dev": "react-scripts start",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Procfile
web: npm run deploy
I think that the react build succeeds but it never launches the node.js server, It never runs npm run start.
Related
I'm trying to start a React project with npm start and the following error is shown:
$ npm start
> client#0.1.0 start
> react-scripts
Unknown script "undefined".
Perhaps you need to update react-scripts?
See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases
I have updated react-scripts to last version, npm install, even I pulled a version of the project without the previous changes and still the error is shown.
I share the package.json. I appreciate any help and suggestions in advance.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.1",
"#testing-library/user-event": "^12.2.2",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-input-range": "^1.3.0",
"react-redux": "^7.2.4",
"react-router": "^5.2.1",
"react-router-dom": "^5.2.1",
"react-scripts": "^5.0.1",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"styled-components": "^5.3.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}```
Use npm run start.
If that doesn't work, try removing your package-lock.json and node_modules folder, then run npm install and try again.
I've been trying to deploy a React App to Github Pages, and have followed a few tutorials, however I can't seem to find the gh-pages branch that the site gets built from, only the master branch shows up.
When I deploy the app, only the README.md file shows up, or I get a 404 error. My package.json looks like this:
{
"name": "portfolio",
"homepage": "https://samarqureshii.github.io/",
"version": "2.0.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.6.2",
"#mui/material": "^5.6.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"ajv": "^8.11.0",
"classnames": "^2.2.6",
"moment": "^2.29.4",
"node-forge": ">=1.3.0",
"object-path": "^0.11.8",
"postcss": "^8.4.14",
"postcss-normalize": "^10.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"sass": "^1.54.5",
"typescript": "^4.7.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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": {
"gh-pages": "^4.0.0"
}
}
I have been trying to implement electron and react together ,with the below package.json
{
"name": "loader",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"cross-env": "^7.0.3",
"electron-is-dev": "^2.0.0",
"react": "^18.2.0",
"react-countup": "^6.3.1",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-idle-timer": "^5.4.2",
"react-loader-spinner": "^5.3.3",
"react-rnd": "^10.3.7",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-spring": "^9.5.3",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"main": "public/main.js",
"homepage": "./",
"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"react-eject": "react-scripts eject",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000/ && electron .\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^7.5.0",
"electron": "^21.2.3",
"electron-builder": "^23.6.0",
"wait-on": "^6.0.1"
}
}
It is clear that concurrently is being used to run all the commands together at same time. Now when I do yarn start, all commands are executed along with the react-start, but even after the react is available at http://localhost:3000 the wait-on never executes further and is stucked, eventually the electron never starts.
If tested without wait-on then all commands are executed well along with the electron.
Can someone guide on this?
I had the same issue.
All I needed to do was to change it from wait-on http://localhost:3000 to wait-on http://127.0.0.1:3000.
Hope that helps!
I deployed a ReactJS + ExpressJS app on heroku and it renders the index.html but without the React App in it. This is the package.json:
{
"name": "spotifyproj",
"version": "0.1.0",
"private": true,
"homepage": "https://whispering-caverns-57172.herokuapp.com",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.2",
"compression": "^1.7.4",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"morgan": "^1.10.0",
"path": "^0.12.7",
"querystring": "^0.2.0",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-spotify-player": "^1.0.4",
"spotify-web-api-js": "^1.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
"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"
]
}
}
It works fine locally but wont render the app when its deployed...
Solved it in server.js
You gotta tell express to use the build path and not the src or public directory
app.use(express.static(path.join(__dirname, 'build')))
.use(cors())
.use(cookieParser());
I have made a reactjs app. It's just the front-end. So no nodes and databases are added. When I am trying to deploy it to Heroku, I am always facing the same error and couldn't resolve it. I have added the logs and my package.json file.
Package.json
{
"name": "reactapp",
"version": "0.1.0",
"private": true,
"engines": {
"node": "12.17.0",
"npm": "6.14.4"
},
"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",
"bootstrap": "^4.5.0",
"font-awesome": "^4.7.0",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-rating-stars-component": "^1.1.0",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "3.4.1",
"reactstrap": "^8.5.1",
"shards-react": "^1.0.3",
"styled-components": "^5.1.1",
"typescript": "^3.9.5"
},
"scripts": {
"start": "react-scripts start",
"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": {}
}
You're trying to start your app in production with react-scripts start which is actually meant for development. To deploy a Create React App you need to build it and have a server that serves the build folder. That's because you're essentially building a static frontend application instead of a fully fledged backend API, which is what Heroku usually is for.
If you want to deploy with Heroku, you need to use the Create React App buildpack. You can add a buildpack to an existing dyno in the settings section of the UI or in using the heroku CLI:
heroku buildpacks:set mars/create-react-app -a APP_NAME
From next release onwards your app will use the buildpack. For further explanation visit the buildpack repository linked above.