titoih
Reputation: 602
After heroku deployment, it looks like can't find my react app files: GET / 404
I build separately two apps: one react app client side and API rest with node and express
After follow many tutorials I find always some problem. It looks like I don't have connection between both apps, it doesn't seem to be a index.html file in my code.
I have this in my package.json
"scripts": {
"start": "react-app-rewired start",
"build-dev": "dotenv -e .env.development react-app-rewired build",
"build-prod": "dotenv -e .env.production react-app-rewired build",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
}
I did npm run build and I copied this files to public/ folder in my API (server side)
I already changed this line in app.js as:
app.use(express.static(path.join(__dirname, 'public/index.html')));
In my api (server side), at public folder I pasted everything from npm run build (cliend side application), even the index.html. The full content of this file is:
<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script><script>"addEventListener"in document&&document.addEventListener("DOMContentLoaded",function(){FastClick.attach(document.body)},!1),window.Promise||document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"><\/script>')</script><title>A-Web</title><link href="/static/css/2.393a28fb.chunk.css" rel="stylesheet"><link href="/static/css/main.969b3049.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.7b0a8543.chunk.js"></script><script src="/static/js/main.c4eaec6f.chunk.js"></script></body></html>
I got these logs from heroku:
2019-08-31T09:02:04.410915+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.410916+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.413683+00:00 app[web.1]: GET / 404 3.094 ms - 23
2019-08-31T09:02:04.250521+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=ee83af00-4c66-4a52-a5e7-2966876625c1 fwd="89.128.30.48" dyno=web.1 connect=1ms service=6ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.413054+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=378720ba-9c05-464e-930e-74690578d64b fwd="89.128.30.48" dyno=web.1 connect=1ms service=7ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.594472+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=ad2abe4a-722b-497c-b97d-6e52e0fb7775 fwd="89.128.30.48" dyno=web.1 connect=1ms service=7ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.593770+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.593788+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.593790+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.593792+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.593793+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.593795+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.593796+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.593798+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.593802+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.593803+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.593804+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.593806+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.593807+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.593808+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.593810+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.593811+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.593812+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.596042+00:00 app[web.1]: GET / 404 3.656 ms - 23
2019-08-31T09:02:04.711085+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.711089+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.711091+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.711092+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.711094+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.711095+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.711097+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.711098+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.711099+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.711101+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.711102+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.711103+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.711104+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.711106+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.711107+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.711108+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.711110+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.734709+00:00 app[web.1]: GET / 404 4.202 ms - 23
2019-08-31T09:02:04.861445+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.861467+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.861469+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.861470+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.861472+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.861473+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.861475+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.861476+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.861477+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.861479+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.861480+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.861481+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.861482+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.861484+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.861485+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.861487+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.861488+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.864485+00:00 app[web.1]: GET / 404 7.108 ms - 23
2019-08-31T09:02:05.052743+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:05.052746+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:05.052748+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:05.052750+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:05.052751+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:05.052753+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:05.052754+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:05.052755+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:05.052757+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:05.052758+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:05.052759+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:05.052761+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:05.052762+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:05.052763+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:05.052764+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:05.052766+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:05.052767+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:05.055590+00:00 app[web.1]: GET / 404 3.642 ms - 23
When I make heroku open, console shows me:
Failed to load resource: the server responded with a status of 404 (Not Found)
{
message: "Not Found"
}
I just need to upload to heroku to have production enviroment. It seems like everything is correct, I try a lot of tutorials and nothing work for me case.
my github:
PD: I am using AntDesign.
Upvotes: 0
Views: 4843
Answers (3)
Daniel
Reputation: 11
I got the same "404 The requested path could not be found" and solved it by removing build from .gitignore
Upvotes: 1
user11786999
Reputation:
I debugged it with this code in server.js
app.use(express.static(path.join(__dirname, '/client/build')))
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '/client/build', 'index.html'))
})
and i removed build folder from .gitignore in client folder. When you re using create react app in default build folder is in .gitignore. Remember to make fresh build before deploy.
Upvotes: 0
titoih
Reputation: 602
finally, I did this:
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
and the heroku application is, fortunately online...
however, I am getting serveral problems to navigate throught it.
Thanks Chirs G.!
Upvotes: 0
Related Questions
- React app returning HTTP error 404 when deployed to heroku
- Heroku Create React app deploy no such directory
- Cannot find file on trying to deploy to heroku (works locally)
- Heroku error on deployment of app: 'Error: cannot find module '/app/index.js'
- Heroku - Node.js - React App - Build failed - "Cannot find file"
- After deploying React app to Heroku from dev env, Fetch requests broken - all GET requests returning index.html - others are 404
- "Could not find a required file. Name: index.html" Error When Deploying React App on Heroku
- Express + React + Heroku can't find a file
- Heroku : Error: ENOENT: no such file or directory, open '/app/build/index.html'?
- Webpack not found when app deployed to Heroku