After successfully deploying a Rails app on Heroku, I am now facing challenges with deploying a Rails/React app on the same platform. I have added both Node.js and Ruby buildpacks but seem to be missing a crucial connection between the two environments. Any guidance or assistance would be greatly appreciated as I encounter the following error message. Thank you in advance!
remote: -----> Build
remote: Detected both "build" and "heroku-postbuild" scripts
remote: Running heroku-postbuild
> [email protected] heroku-postbuild /tmp/build_0df26b25
> npm run build && npm install
> [email protected] build /tmp/build_0df26b25
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
63.32 KB build/static/js/2.b0463501.chunk.js
2.48 KB build/static/js/main.61d8b38a.chunk.js
783 B build/static/js/runtime-main.44a3a2b0.js
690 B build/static/css/main.10cdadf4.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
removed 35 packages and audited 1737 packages in 14.177s
71 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
remote: -----> Caching build
- node_modules
remote: -----> Pruning devDependencies
removed 35 packages and audited 1737 packages in 12.724s
71 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
remote: -----> Build succeeded!
remote: -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/ruby.tgz
More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
! Push failed
Verifying deploy...
! Push rejected to gonefishin-frontend.
To https://git.heroku.com/gonefishin-frontend.git
And here is my package.json:
{
"name": "gone-fishin-frontend",
"version": "0.1.0",
"private": true,
"engines": {
"npm": "6.14.6",
"node": "14.5.0"
},
"proxy": "http://localhost:3001",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "cp -a client/build/. public/",
"heroku-postbuild": "npm run build && npm install",
"test": "react-scripts test --env=jsdom",
"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"
]
}
}