Heroku showing error for typescript and React.JS

Question

I just learnt Typescript and tried to push it to Heroku to run online. However, I got this problem. Can anyone help me what is wrong with the configuration? I already have a Profile with web: npm start.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.54",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "@types/styled-components": "^5.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "styled-components": "^5.1.1",
    "typescript": "^3.7.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"
    ]
  }
}

When I tried to run it on heroku, these error shows up. Can anyone help me point out where I get wrong on the code? Thank you.

2020-08-20T02:04:52.768419+00:00 app[api]: Initial release by user kevxxxxx
2020-08-20T02:04:52.768419+00:00 app[api]: Release v1 created by user kevkxxxxx
2020-08-20T02:04:52.863227+00:00 app[api]: Enable Logplex by user kevkwxxxx
2020-08-20T02:04:52.863227+00:00 app[api]: Release v2 created by user kevkwxxxx
2020-08-20T02:05:02.000000+00:00 app[api]: Build started by user kevkwxxxx
2020-08-20T02:06:24.621179+00:00 app[api]: Release v3 created by user kevkwxxxx
2020-08-20T02:06:24.621179+00:00 app[api]: Deploy b542e4e6 by user kevkwxxxx
2020-08-20T02:06:24.637255+00:00 app[api]: Scaled to web@1:Free by user kevkwxxxx
2020-08-20T02:06:33.000000+00:00 app[api]: Build succeeded
2020-08-20T02:06:33.778274+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:06:37.345544+00:00 app[web.1]: 
2020-08-20T02:06:37.345569+00:00 app[web.1]: > [email protected] start /app
2020-08-20T02:06:37.345570+00:00 app[web.1]: > react-scripts start
2020-08-20T02:06:37.345570+00:00 app[web.1]: 
2020-08-20T02:06:40.190225+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.1.122/
2020-08-20T02:06:40.190782+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-08-20T02:06:40.190901+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-08-20T02:06:40.191007+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-08-20T02:06:40.191239+00:00 app[web.1]: Starting the development server...
2020-08-20T02:06:40.191239+00:00 app[web.1]: 
2020-08-20T02:06:40.320581+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:06:40.357851+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:06:40.361139+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T02:06:48.334774+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:06:50.949971+00:00 app[web.1]: 
2020-08-20T02:06:50.949997+00:00 app[web.1]: > [email protected] start /app
2020-08-20T02:06:50.949997+00:00 app[web.1]: > react-scripts start
2020-08-20T02:06:50.949998+00:00 app[web.1]: 
2020-08-20T02:06:53.410228+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.19.104.146/
2020-08-20T02:06:53.410751+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-08-20T02:06:53.410902+00:00 app[web.1]: ℹ ��wds｣: Content not from webpack is served from /app/public
2020-08-20T02:06:53.411003+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-08-20T02:06:53.411229+00:00 app[web.1]: Starting the development server...
2020-08-20T02:06:53.411231+00:00 app[web.1]: 
2020-08-20T02:06:53.535298+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:06:53.573752+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:06:54.608604+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-depths-86821.herokuapp.com request_id=a715a5b6-5ebd-46a1-bc83-e5af1a8adf93 fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T02:06:55.888464+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=guarded-depths-86821.herokuapp.com request_id=1c2e5980-a5b3-4a14-93b5-76ab3a8a4e1f fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T02:15:00.000000+00:00 app[api]: Build started by user kevkwoxxxxx
2020-08-20T02:16:25.020488+00:00 app[api]: Deploy 96a06fc7 by user kevkwoxxxx
2020-08-20T02:16:25.020488+00:00 app[api]: Release v4 created by user kevkwxxxx
2020-08-20T02:16:25.756806+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T02:16:33.000000+00:00 app[api]: Build succeeded
2020-08-20T02:16:38.637718+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:16:44.452152+00:00 app[web.1]: 
2020-08-20T02:16:44.452164+00:00 app[web.1]: > [email protected] start /app
2020-08-20T02:16:44.452164+00:00 app[web.1]: > react-scripts start
2020-08-20T02:16:44.452164+00:00 app[web.1]: 
2020-08-20T02:16:46.910272+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.19.70.186/
2020-08-20T02:16:46.910678+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-08-20T02:16:46.910753+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-08-20T02:16:46.910818+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-08-20T02:16:46.910981+00:00 app[web.1]: Starting the development server...
2020-08-20T02:16:46.910981+00:00 app[web.1]: 
2020-08-20T02:16:47.027054+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:16:47.064473+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:16:49.868294+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-depths-86821.herokuapp.com request_id=2fa4ba33-25e5-4954-96c1-0ae870df9733 fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T02:18:16.488972+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T02:18:25.931282+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:18:29.027258+00:00 app[web.1]: 
2020-08-20T02:18:29.027291+00:00 app[web.1]: > [email protected] start /app
2020-08-20T02:18:29.027292+00:00 app[web.1]: > react-scripts start
2020-08-20T02:18:29.027292+00:00 app[web.1]: 
2020-08-20T02:18:32.269220+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.23.86/
2020-08-20T02:18:32.269587+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-08-20T02:18:32.269687+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-08-20T02:18:32.269808+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-08-20T02:18:32.270062+00:00 app[web.1]: Starting the development server...
2020-08-20T02:18:32.270063+00:00 app[web.1]: 
2020-08-20T02:18:32.371853+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:18:32.411618+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:18:49.691244+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-depths-86821.herokuapp.com request_id=b04d3419-ee10-4063-865f-d34ed4aee58e fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https

there is an error code of H10 in that log. did you Google it to see what it was? — Dan O
– Dan O, Commented Aug 20, 2020 at 2:37

vighnesh153 · Accepted Answer · 2020-08-20 02:35:16Z

1

You are using Webpack dev server. That server is not production ready and has a lot of different confiurations.

In simple words, in React, you use npm start to launch your app on your dev server. If you want to host your app, then you first build the artifacts by running npm run build which will generate all the artifacts in the dist folder in your application. Then, you take the contents from the dist directory and deploy it on a server.

To deploy it anywhere, you will need a server to host your files. Heroku, however has automated some of the deployment process for hosting apps.

Check this blog published by the Heroku team which shows how you can deploy the application with ZERO config.

answered Aug 20, 2020 at 2:35

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Heroku showing error for typescript and React.JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related