I've made a very simple MERN app, without a mongo database, by using create-react-app. When I deploy to heroku all I am presented with is a blank page. I have tried numerous things with no luck. The API is sending email correctly and the page title is correct, but all of the content is missing. Please take a look for me, this is my first deploy.
Here's the code: https://github.com/samames/essae
Here's the deploy: https://protected-wave-21372.herokuapp.com/
Many thanks
--edit--
here are the logs:
2020-11-13T18:00:38.000000+00:00 app[api]: Build succeeded
2020-11-13T18:00:38.289382+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-11-13T18:00:38.395329+00:00 heroku[web.1]: Process exited with status 143
2020-11-13T18:00:53.206813+00:00 heroku[web.1]: Starting process with command `node backend/index.js`
2020-11-13T18:00:56.521645+00:00 app[web.1]: app listening at http://localhost:9508
2020-11-13T18:00:57.608133+00:00 heroku[web.1]: State changed from starting to up
2020-11-13T18:01:03.750237+00:00 heroku[router]: at=info method=GET path="/" host=protected-wave-21372.herokuapp.com request_id=216189ff-cb13-4b39-8d8a-155df094c5b6 fwd="176.26.189.232" dyno=web.1 connect=1ms service=52ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:03.902311+00:00 heroku[router]: at=info method=GET path="/static/js/main.2940f24a.chunk.js" host=protected-wave-21372.herokuapp.com request_id=34237762-907b-4211-b154-8ee408429549 fwd="176.26.189.232" dyno=web.1 connect=16ms service=11ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:03.903848+00:00 heroku[router]: at=info method=GET path="/static/css/main.8c8b27cf.chunk.css" host=protected-wave-21372.herokuapp.com request_id=a1e4b2db-48b9-401c-9e4c-f0f4a3cfb84a fwd="176.26.189.232" dyno=web.1 connect=14ms service=13ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:04.022038+00:00 heroku[router]: at=info method=GET path="/static/js/2.a8698f08.chunk.js" host=protected-wave-21372.herokuapp.com request_id=bc42d048-b7df-4d05-96d3-46524fb9dcd5 fwd="176.26.189.232" dyno=web.1 connect=0ms service=13ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:04.238582+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=protected-wave-21372.herokuapp.com request_id=b777ec00-6257-42b8-9a14-17774d0d2475 fwd="176.26.189.232" dyno=web.1 connect=76ms service=32ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:04.464416+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=protected-wave-21372.herokuapp.com request_id=641614ee-8c0e-421f-8962-1049bb5e486c fwd="176.26.189.232" dyno=web.1 connect=54ms service=20ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:12.011012+00:00 heroku[router]: at=info method=GET path="/" host=protected-wave-21372.herokuapp.com request_id=a2fedc75-f471-4db8-8c5f-185d3df4c2f7 fwd="176.26.189.232" dyno=web.1 connect=146ms service=69ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.321043+00:00 heroku[router]: at=info method=GET path="/static/css/main.8c8b27cf.chunk.css" host=protected-wave-21372.herokuapp.com request_id=36f0c3af-eb7d-4c42-8ed4-db9c55ccb444 fwd="176.26.189.232" dyno=web.1 connect=29ms service=23ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.331957+00:00 heroku[router]: at=info method=GET path="/static/js/main.2940f24a.chunk.js" host=protected-wave-21372.herokuapp.com request_id=9d008e30-fc1e-4e7b-a47e-40871e1c9df2 fwd="176.26.189.232" dyno=web.1 connect=33ms service=30ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.334294+00:00 heroku[router]: at=info method=GET path="/static/js/2.a8698f08.chunk.js" host=protected-wave-21372.herokuapp.com request_id=1b957b00-06e5-4011-a3c5-a35a4309a27e fwd="176.26.189.232" dyno=web.1 connect=32ms service=26ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.494914+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=protected-wave-21372.herokuapp.com request_id=722289d9-d546-48f1-9ae4-8b8c8ff1b6f3 fwd="176.26.189.232" dyno=web.1 connect=30ms service=20ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.496361+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=protected-wave-21372.herokuapp.com request_id=1d3a9073-1df4-4465-a57c-c6fbd20cf5cf fwd="176.26.189.232" dyno=web.1 connect=27ms service=22ms status=200 bytes=2532 protocol=https
The problem is quite simple - there is typo in static files path. Just change
this line to app.use(express.static(path.join(__dirname, '../frontend/build')));. Without those missing .. express cannot find requested static files and it fallbacks to app.get('*', (req, res). In other words, your index.html file is returned instead of any static file.
Related
2023-02-04T23:44:59.721312+00:00 app[web.1]: Node.js v18.13.0
2023-02-04T23:44:59.863463+00:00 heroku[web.1]: Process exited with status 1
2023-02-04T23:44:59.923817+00:00 heroku[web.1]: State changed from up to crashed
2023-02-04T23:44:59.726175+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/" host=ancient-fjord-54261.herokuapp.com request_id=889838b4-68b1-4f29-a43b-69a1a596ebdf fwd="75.97.100.189" dyno=web.1 connect=0ms service=28172ms status=503 bytes=0 protocol=https
2023-02-04T23:45:05.030038+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=ancient-fjord-54261.herokuapp.com request_id=44e68370-195a-4e1e-97c7-66a443516f57 fwd="75.97.100.189" dyno=web.1 connect=5001ms service= status=503 bytes= protocol=https
Here's the code in my app.js. I pushed this and the other files to Heroku. Heroku CLI updated, all packages installed. Compared my app.js to the get-started index.js and made some changes to my app.js and still getting the error and won't open.
I'm doing a course on udemy for web development and its not updated for this year, so I'm having to troubleshoot every now and then. First time on stackoverflow so I need a little bit of help.
Can anyone help me with fixing this or provide me with some links to help out with troubleshooting?
I had everything perfect, But suddenly I'm having this problem.DO not know why it is happenning.
Error:
heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/products/minhaj12113#gmail.com" host=lit-hamlet-04037.herokuapp.com request_id=03953580-e411-420d-b9ae-fe5e121f8b1d fwd="103.84.133.224" dyno=web.1 connect=0ms service=8ms status=503 bytes=0 protocol=https
I get the error invalid host header
I don't know the reason please if anyone can help
.env
HOST=herokuapp.com
server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(process.env.PORT);
package.json
"proxy": "http://localhost:5000",
when write Heroku log in console return this
if it will help you to find any solution and thanks all for trying
app[web.1]: Attempting to bind to HOST environment variable: herokuapp.com
app[web.1]: If this was unintentional, check that you haven't mistakenly set it in your shell.
app[web.1]: Learn more here: https://cra.link/advanced-config
app[web.1]:
app[web.1]: Could not find an open port at herokuapp.com.
app[web.1]: Network error message: listen EADDRNOTAVAIL: address not available 3.218.84.197
app[web.1]:
heroku[web.1]: Process exited with status 1
heroku[web.1]: State changed from starting to crashed
heroku[web.1]: State changed from crashed to starting
heroku[web.1]: Starting process with command `npm start`
app[web.1]:
app[web.1]: > client#0.1.0 start
app[web.1]: > react-scripts start
app[web.1]:
app[web.1]: Attempting to bind to HOST environment variable: herokuapp.com
app[web.1]: If this was unintentional, check that you haven't mistakenly set it in your shell.
app[web.1]: Learn more here: https://cra.link/advanced-config
app[web.1]:
app[web.1]: Could not find an open port at herokuapp.com.
app[web.1]: Network error message: listen EADDRNOTAVAIL: address not available 23.21.41.134
app[web.1]:
heroku[web.1]: Process exited with status 1
heroku[web.1]: State changed from starting to crashed
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=ahmed-radi-bank-system.herokuapp.com request_id=1fe76374-c2b2-4742-8274-ac29595f176b fwd="156.222.196.219" dyno= connect= service= status=503 bytes= protocol=https
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=ahmed-radi-bank-system.herokuapp.com request_id=729f1256-9d7e-4cfa-83e7-0fcb59b886a2 fwd="156.222.196.219" dyno= connect=
service= status=503 bytes= protocol=https
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=ahmed-radi-bank-system.herokuapp.com request_id=7cea8936-c5d5-4171-9c79-e6795e805cc9 fwd="156.222.196.219" dyno= connect= service= status=503 bytes= protocol=https
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=ahmed-radi-bank-system.herokuapp.com request_id=581a5de7-c23d-496e-a27f-5ade070cc55b fwd="156.222.196.219" dyno= connect=
service= status=503 bytes= protocol=https
I will upload my project on Netify
I have tried numerous online solutions or fixes for this error while trying to deploy a very basic React.js app on Heroku. My app builds successfully when I run git push heroku master , but every time I try to open it I am getting an application error with logs reading:
2020-05-14T03:16:02.986304+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=ravenous-react-application.herokuapp.com request_id=b4546431-d236-4c53-90de-cea6185c1d86 fwd="34.100.75.75" dyno= connect= service= status=503 bytes= protocol=https
To my understanding, everything should be set up correctly. My repo can be found here https://github.com/christulin/ravenousReactApp.
Any help would be very much appreciated!
You have incorrect procfile text file. See Define a Procfile. Change the content from web: node app.js to web: node server.js.
Besides, the imported modules of your code have path issue, it will cause build failures. This is PR
Before logs:
2020-05-19T04:48:13.097431+00:00 heroku[web.1]: State changed from starting to crashed
2020-05-19T04:48:13.015546+00:00 app[web.1]: internal/modules/cjs/loader.js:979
2020-05-19T04:48:13.015557+00:00 app[web.1]: throw err;
2020-05-19T04:48:13.015558+00:00 app[web.1]: ^
2020-05-19T04:48:13.015561+00:00 app[web.1]:
2020-05-19T04:48:13.015561+00:00 app[web.1]: Error: Cannot find module '/app/app.js'
2020-05-19T04:48:13.015562+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:976:15)
2020-05-19T04:48:13.015563+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:859:27)
2020-05-19T04:48:13.015563+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
2020-05-19T04:48:13.015563+00:00 app[web.1]: at internal/main/run_main_module.js:17:47 {
2020-05-19T04:48:13.015564+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2020-05-19T04:48:13.015564+00:00 app[web.1]: requireStack: []
2020-05-19T04:48:13.015564+00:00 app[web.1]: }
2020-05-19T04:48:16.833580+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=tranquil-chamber-64150.herokuapp.com request_id=b7e02a7c-c7bc-4a96-9d01-197be203938e fwd="118.183.246.243" dyno= connect= service= status=503 bytes= protocol=https
2020-05-19T04:48:20.721578+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=tranquil-chamber-64150.herokuapp.com request_id=38422262-6c70-4850-af93-7caf9f3d80cb fwd="118.183.246.243" dyno= connect= service= status=503 bytes= protocol=https
2020-05-19T04:48:36.257873+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=tranquil-chamber-64150.herokuapp.com request_id=d2f7a9e2-01ee-4bf1-953d-2a2074c39ed6 fwd="118.183.246.243" dyno= connect= service= status=503 bytes= protocol=https
after logs:
2020-05-19T04:56:54.432489+00:00 heroku[web.1]: State changed from crashed to starting
2020-05-19T04:57:00.000000+00:00 app[api]: Build succeeded
2020-05-19T04:57:08.755488+00:00 heroku[web.1]: State changed from starting to up
2020-05-19T04:57:09.895681+00:00 heroku[router]: at=info method=GET path="/" host=tranquil-chamber-64150.herokuapp.com request_id=db435d3a-961c-40e5-b9a1-c51cc2059606 fwd="118.183.246.243" dyno=web.1 connect=0ms service=23ms status=200 bytes=2722 protocol=https
2020-05-19T04:57:10.539700+00:00 heroku[router]: at=info method=GET path="/reset.css" host=tranquil-chamber-64150.herokuapp.com request_id=d5f3f55b-2605-4e8b-9bfd-b195bb45cc22 fwd="118.183.246.243" dyno=web.1 connect=0ms service=5ms status=200 bytes=1292 protocol=https
2020-05-19T04:57:10.542937+00:00 heroku[router]: at=info method=GET path="/static/css/main.ba71d789.chunk.css" host=tranquil-chamber-64150.herokuapp.com request_id=b00408f2-cf8a-4cda-acb6-1535683c4cf6 fwd="118.183.246.243" dyno=web.1 connect=1ms service=5ms status=200 bytes=3787 protocol=https
2020-05-19T04:57:10.817450+00:00 heroku[router]: at=info method=GET path="/static/js/2.15bfb385.chunk.js" host=tranquil-chamber-64150.herokuapp.com request_id=28eb63be-e3f2-4006-afce-f114d45539b6 fwd="118.183.246.243" dyno=web.1 connect=2ms service=12ms status=200 bytes=131654 protocol=https
2020-05-19T04:57:11.043548+00:00 heroku[router]: at=info method=GET path="/static/js/main.9d3c77a1.chunk.js" host=tranquil-chamber-64150.herokuapp.com request_id=09329487-90ac-4529-9473-7c990f4aef87 fwd="118.183.246.243" dyno=web.1 connect=3ms service=5ms status=200 bytes=5526 protocol=https
2020-05-19T04:57:25.207521+00:00 heroku[router]: at=info method=GET path="/static/media/background_search_desktop.902df4c5.jpg" host=tranquil-chamber-64150.herokuapp.com request_id=bf1a2880-e00d-420f-b7bd-b0a94e522572 fwd="118.183.246.243" dyno=web.1 connect=1ms service=103ms status=200 bytes=3133600 protocol=https
Your web application is online:
I solve my issue like this by installing the buildbpack https://github.com/mars/create-react-app-buildpack and also by adding procfile with this web: bin/boot, Hope it helps.
I use react router make single page application, and I try to build it with npm run build then I upload build folder to my web-server but my website just shows background. I want to know how to make it work.
2017-04-26T19:06:27.864737+00:00 app[web.1]: npm ERR! Or if that isn't
available, you can get their info via:
2017-04-26T19:06:27.864910+00:00 app[web.1]: npm ERR! npm owner ls notes-app-client
2017-04-26T19:06:27.865077+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2017-04-26T19:06:27.870949+00:00 app[web.1]:
2017-04-26T19:06:27.871279+00:00 app[web.1]: npm ERR! Please include the
following file with any support request:
2017-04-26T19:06:27.871450+00:00 app[web.1]: npm ERR! /app/npm-debug.log
2017-04-26T19:06:27.993054+00:00 heroku[web.1]: State changed from starting to
crashed 2017-04-26T19:06:42.961236+00:00 heroku[router]: at=error code=H10 desc="App
crashed" method=GET path="/" host=educationapp.herokuapp.com
request_id=72015192-8122-4fba-beb0-69c8f1e38129 fwd="49.228.99.168" dyno=
connect= service= status=503 bytes= protocol=https
2017-04-26T19:06:43.534651+00:00 heroku[router]: at=error code=H10 desc="App
crashed" method=GET path="/favicon.ico" host=educationapp.herokuapp.com
request_id=83684431-92be-4080-a2f8-7165e21f6c72 fwd="49.228.99.168" dyno=
connect= service= status=503 bytes= protocol=https
2017-04-26T19:14:57.478915+00:00 heroku[router]: at=error code=H10 desc="App
crashed" method=GET path="/" host=educationapp.herokuapp.com
request_id=022a219d-2299-4d23-b713-6bb75497f0e6 fwd="49.228.99.168" dyno=
connect= service= status=503 bytes= protocol=https
2017-04-26T19:14:57.922975+00:00 heroku[router]: at=error code=H10 desc="App
crashed" method=GET path="/favicon.ico" host=educationapp.herokuapp.com
request_id=ae9bf961-22a9-47f8-be5d-234d97f83ca3 fwd="49.228.99.168" dyno=
connect= service= status=503 bytes= protocol=https
Heroku don't have official deployment buildpack for React apps. So you have to use create-react-app-buildpack by Mars Hall.
Here is the link to get this.
Please follow this documentation. It will help you if you have started your development using create-react-app.