React project hosted in heroku fails when open - reactjs

So deployed a React project to heroku using bitbucket pipelines that is working well, but now can't seem to make heroku to open the project don't have the script npm start in my package.json and what is recommend is to create a file Procfile that is a txt and inside have
web: index.html
in my webpack:
entry: {
bundle: './src/index.js'
},
output: {
publicPath : '/',
path: path.resolve(__dirname,'build'),
filename: '[name].[chunkhash].js'
},
and in package.json
"scripts": {
"heroku-prebuild": "npm install --only=dev",
"clean": "rimraf build",
"build": "npm run clean && webpack -p",
"serve": "webpack-dev-server --progress --colors"
},
in the heroku logs getting:
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/"
host=projectname.herokuapp.com
request_id=a2bc33da-f938-4d7b-9395-b40442f9b2c0 fwd="88.157.88.35"
dyno= connect= service= status=503 bytes= protocol=https
heroku[router]: at=error code=H10 desc="App crashed" method=GET
path="/favicon.ico" host=projectname.herokuapp.com
request_id=b2de2bdf-528e-4f97-9fe9-7f313e025ebd fwd="88.157.88.35"
dyno= connect= service= status=503 bytes= protocol=https
Not using the create-react-app and if possible didn't want to add node express to point to the react project https://blog.bitsrc.io/react-production-deployment-part-3-heroku-316319744885
So do I need to point to build/index.html in Procfile?? or is it some other way all the examples have seen are about create-react-app and node express....

Was able to find the solution in the following blog where as stated the heroku runs by default npm start command if the Procfile is missing or add in the Procfile the line web: npm start and as stated in the blog the start command in package.json runs serve -s build where the serve is a package to point the build folder where is located the bundle and the index.html file and now it already works well. Heroku should have a default option to point to a default folder.. but all attemps that had tried failed... so thanks for #Bernard Bado and his blog for pointing to the solution.

Related

Deploying nextjs app on Heroku - error status H20

I'm new to react and nextjs. I managed to develop a simple website in nextjs and when i build the project in local system using npm run build without any error it works properly then i tried to deploy in heroku in the dashboard it shows build succeded and deployed but when i check the project using the given link it shows application error. After i check the heroku logs its shows Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch like this. By checking some threads about this link i managed to restart heroku but no use still the same problem. Also i've changed the port from 3000 to 5000 by changing in package.json .It'll be so helpfull if anyone point out the issue.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 5000"
},
This is my heroku log
2020-07-24T05:14:15.020173+00:00 heroku[web.1]: Starting process with command `npm start`
2020-07-24T05:14:17.215400+00:00 app[web.1]:
2020-07-24T05:14:17.215416+00:00 app[web.1]: > abcapp#0.1.0 start /app
2020-07-24T05:14:17.215416+00:00 app[web.1]: > next start
2020-07-24T05:14:17.215416+00:00 app[web.1]:
2020-07-24T05:14:17.458010+00:00 app[web.1]: ready - started server on http://localhost:3000
2020-07-24T05:14:37.208072+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=abcapp.herokuapp.com request_id=55de2c51-58d2-430d-883d-7a1bc05cecfc fwd="157.46.187.156" dyno= connect= service= status=503 bytes= protocol=https
2020-07-24T05:15:15.482693+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2020-07-24T05:15:15.502706+00:00 heroku[web.1]: Stopping process with SIGKILL
2020-07-24T05:15:15.584970+00:00 heroku[web.1]: Process exited with status 137
2020-07-24T05:15:15.629010+00:00 heroku[web.1]: State changed from starting to crashed
2020-07-24T05:15:17.145562+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=abcapp.herokuapp.com request_id=9e610deb-8e1e-4ca6-9e60-7516bc36cd92 fwd="157.46.187.156" dyno= connect= service= status=503 bytes= protocol=https
I've solved this issue by updating package.json like the below.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p $PORT"
},

React app keep crashing on heroku / node.js

2020-07-21T14:16:10.473788+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=reacthelloworld.herokuapp.com request_id=e53b2e2b-48a5-4251-844a-ebb4c202cad7 fwd="65.92.155.165" dyno= connect= service= status=503 bytes= protocol=https
2020-07-21T14:16:13.905886+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=reacthelloworld.herokuapp.com request_id=6a6143e4-0d01-4127-981e-b1652f909441 fwd="65.92.155.165" dyno= connect= service= status=503 bytes= protocol=https
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
-----> Caching build
- node_modules
-----> Pruning devDependencies
audited 1646 packages in 12.038s
62 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
Build succeeded!
-- Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
Compressing...
Done: 59.7M
-- Launching...
Released v3
https://reacthelloworld.herokuapp.com/ deployed to Heroku
I know it could be few things all over but I think heroku is not recognizing the path, I did deployed apps before but had to change the computer and re install node all over, at this point need an advice please
I think you are trying to host your React app on Heroku.
If that's the case, you can build React locally and upload static files to Heroku (this can help).
Or if you are trying to host your Node.js app which has React frontend, you should build the React app first and upload the Node.js app with it to Heroku. Heroku provides Node.js environment.
EDIT:
It turns out that npm/yarn was the issue.
Using yarn resolves the error.

React App deploying but not running in heroku

Thank you in advance for any help with this issue, i have been trying to solve it for some hours now...
I have created a react app with create-react-app and it's running fine in the local server, deployed it to heroku and it deployed sucessfully, but it does not open.
When i do heroku logs --tail i get the bellow errors:
2020-04-23T15:32:00.547380+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.16.17.130/
2020-04-23T15:32:00.547959+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-04-23T15:32:00.548051+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-04-23T15:32:00.548120+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-04-23T15:32:00.548312+00:00 app[web.1]: Starting the development server...
2020-04-23T15:32:00.548312+00:00 app[web.1]:
2020-04-23T15:32:00.680072+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-23T15:32:01.946329+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-carlosamorim.herokuapp.com request_id=3c71f08a-4492-40b7-bb6c-82055d05f0bd fwd="89.153.213.119" dyno= connect= service= status=503 bytes= protocol=https
2020-04-23T15:32:02.587450+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-carlosamorim.herokuapp.com request_id=3a20431f-789e-4da8-a151-438205b055e9 fwd="89.153.213.119" dyno= connect= service= status=503 bytes= protocol=https
2020-04-23T15:33:23.144950+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-carlosamorim.herokuapp.com request_id=d043557d-ed3f-474a-ba84-0d14c2ac2696 fwd="89.153.213.119" dyno= connect= service= status=503 bytes= protocol=https
2020-04-23T15:33:23.414482+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-carlosamorim.herokuapp.com request_id=f612d864-2e2e-4669-a33d-9b5edb23732d fwd="89.153.213.119" dyno= connect= service= status=503 bytes= protocol=https
My package.json :
https://github.com/CarlosAmorimProjects/portfolio/blob/master/package.json
Anyone experienced and solved the same issue ?
Thank you
Update :
I was able to deploy it and it's running at Vercel.com, i used buildpack create-react-app and it's working perfectly, i cannot apply that same builpack on heroku.
I suspect the problem is related to that.
The default buildpack when deploying is that of node.js. You needed to use the create-react-app buildpack (as seen below).
heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open
helpfull link: https://dev.to/webdevraj/deploy-a-react-app-on-heroku-the-right-way-5efo

Deploying Next.js Project to Heroku Failure

I'm trying to Deploy my next.js project on heroku but on the app run, it fails and this is the log of the failure.
2019-11-17T18:23:33.067077+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=pens-nextjs.herokuapp.com request_id=f01abc4b-bf9b-4f2e-8b8e-06184580bfc8 fwd="41.232.85.202" dyno= connect= service= status=503 bytes= protocol=https
2019-11-17T18:23:37.203987+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=pens-nextjs.herokuapp.com request_id=f4f94391-c79c-4503-9751-fe8a6c5461d3 fwd="41.232.85.202" dyno= connect= service= status=503 bytes= protocol=https
2019-11-17T18:23:38.045712+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=pens-nextjs.herokuapp.com request_id=98cc2b80-5631-4af1-9889-26abecca6aec fwd="41.232.85.202" dyno= connect= service= status=503 bytes= protocol=https
I was also facing the same issue.
I added favicon.ico in public folder of my NextJs App. Also, add following lines in your package.json
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p $PORT",
"heroku-postbuild": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
Hope this works for you!
Next.js binds to port 3000 by default, while Heroku expects your server process to bind to the port supplied in the PORT environment variable. You can make the Next.js server to bind to this port by modifying package.json to have "start": "next start -p $PORT".

Application fails to run on Heroku

I have NodeJs application with yeoman, grunt, bower installed. I generatedm angularjs app using yeomen. Local version of application runs with no problem by typing grunt serve. Moreover application was successfully deployed to Heroku by grunt deploy link. When trying to access application on heroku it shows:
Application Error An error occurred in the application and your page
could not be served. Please try again in a few moments.
If you are the application owner, check your logs for details.
In application log (Heroku dashboard > Activity):
Deployed
Build succeeded
-----> Node.js app detected
-----> Reading application state
package.json...
build directory...
cache directory...
environment variables...
Node engine: >=0.10.0
Npm engine: unspecified
Start mechanism: Procfile
node_modules source: package.json
node_modules cached: true
NPM_CONFIG_PRODUCTION=true
NODE_MODULES_CACHE=true
-----> Installing binaries
Resolving node version >=0.10.0 via semver.io...
Downloading and installing node 0.10.35...
Using default npm version: 1.4.28
-----> Building dependencies
Restoring node modules from cache
Pruning unused dependencies
npm WARN package.json nodejsw3#0.0.0 No repository field.
Installing any new modules
npm WARN package.json nodejsw3#0.0.0 No repository field.
-----> Checking startup method
Found Procfile
-----> Finalizing build
Creating runtime environment
Exporting binary paths
Cleaning npm artifacts
Cleaning previous cache
Caching results for future builds
-----> Build succeeded!
nodejsw3#0.0.0 /tmp/build_9b26539892553ae79f16e539e2f083e0
????????? (empty)
WARNING: Avoid semver ranges starting with '>' in engines.node
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
-----> Discovering process types
Procfile declares types -> web
-----> Compressing... done, 6.8MB
-----> Launching... done, v9
https://myapp.herokuapp.com/ deployed to Heroku
Project structure:
Log
2015-02-07T17:49:56.504866+00:00 heroku[router]: at=error code=H10 desc="App cra
shed" method=GET path="/" host=myapp.herokuapp.com request_id=257d316d-98
d1-4d21-a170-7c27e42b907e fwd="10.10.10.11" dyno= connect= service= status=503
bytes=
2015-02-07T17:49:57.762152+00:00 heroku[router]: at=error code=H10 desc="App cra
shed" method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=
f109ba40-e921-486a-a79a-7a7d842705a7 fwd="10.10.10.11" dyno= connect= service=
status=503 bytes=
2015-02-07T17:53:40.155437+00:00 heroku[router]: at=error code=H10 desc="App cra
shed" method=GET path="/" host=myapp.herokuapp.com request_id=7e0e784c-0e
76-48b1-ad3e-bbf74b400e31 fwd="10.10.10.11" dyno= connect= service= status=503
bytes=
2015-02-07T17:53:41.454002+00:00 heroku[router]: at=error code=H10 desc="App cra
shed" method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=
4d56eacf-5515-48e4-9b5d-34ccc4c4457e fwd="10.10.10.11" dyno= connect= service=
status=503 bytes=
2015-02-07T17:54:20.109125+00:00 heroku[router]: at=error code=H10 desc="App cra
shed" method=GET path="/" host=myapp.herokuapp.com request_id=b244e431-81
d6-4f82-a0e0-1e845a45a449 fwd="10.10.10.11" dyno= connect= service= status=503
bytes=
2015-02-07T17:54:21.286203+00:00 heroku[router]: at=error code=H10 desc="App cra
shed" method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=
e2c7d762-a88c-49f6-a15b-e1768e7310d5 fwd="10.10.10.11" dyno= connect= service=
status=503 bytes=
2015-02-07T17:57:14.924093+00:00 heroku[web.1]: State changed from crashed to st
arting
2015-02-07T17:57:16.809601+00:00 heroku[web.1]: Starting process with command `n
ode index.js`
2015-02-07T17:57:18.731681+00:00 app[web.1]: module.js:340
2015-02-07T17:57:18.736235+00:00 app[web.1]: at Function.Module._resolveFile
name (module.js:338:15)
2015-02-07T17:57:18.736237+00:00 app[web.1]: at Function.Module._load (modul
e.js:280:25)
2015-02-07T17:57:18.736241+00:00 app[web.1]: at require (module.js:380:17)
2015-02-07T17:57:18.736243+00:00 app[web.1]: at Object.<anonymous> (/app/ind
ex.js:1:77)
2015-02-07T17:57:18.732015+00:00 app[web.1]: throw err;
2015-02-07T17:57:18.736244+00:00 app[web.1]: at Module._compile (module.js:4
56:26)
2015-02-07T17:57:18.731200+00:00 app[web.1]:
2015-02-07T17:57:18.732021+00:00 app[web.1]: ^
2015-02-07T17:57:18.736232+00:00 app[web.1]: Error: Cannot find module 'express'
2015-02-07T17:57:18.736239+00:00 app[web.1]: at Module.require (module.js:36
4:17)
2015-02-07T17:57:18.736246+00:00 app[web.1]: at Object.Module._extensions..j
s (module.js:474:10)
2015-02-07T17:57:18.736247+00:00 app[web.1]: at Module.load (module.js:356:3
2)
2015-02-07T17:57:18.736249+00:00 app[web.1]: at Function.Module._load (modul
e.js:312:12)
2015-02-07T17:57:18.736251+00:00 app[web.1]: at Function.Module.runMain (mod
ule.js:497:10)
2015-02-07T17:57:19.580364+00:00 heroku[web.1]: Process exited with status 8
2015-02-07T17:57:19.592340+00:00 heroku[web.1]: State changed from starting to c
rashed

Resources