0

by the way, NOT a duplicate of 19 Javascript features work on localhost but not when deployed to Heroku

I am going to sleep so I can leave my tunneled localhost

enter image description here

up for now which is what I see when I run npm run dev from my machine. And by the way, I feel like this should be some sort of simple package.json fix, so here's my package.json:

{
"name": "hps_prework",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "dev": "node app.js",
  "start": "node app.js",
  "build": "next build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},
"engines": {
  "node": "11.6.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
  "@material-ui/core": "^3.9.2",
  "@material-ui/icons": "^3.0.2",
  "babel-loader": "^8.0.5",
  "jquery": "^3.3.1",
  "js-cookie": "^2.2.0",
  "koa": "^2.7.0",
  "koa-session": "^5.10.1",
  "next": "^8.0.3",
  "python-shell": "^1.0.7",
  "react": "^16.8.4",
  "react-dom": "^16.8.4",
  "react-scripts": "^2.1.8",
  "webpack": "^4.28.3"
},
"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

}

But here is what my app looks like deployed to heroku:

enter image description here

and here is the console output:

enter image description here

which leads me to believe some resources aren't being loaded for some reason.

What am I missing? repo

Lastly, this is heroku logs --tail ...

2019-03-21T05:40:54.000000+00:00 app[api]: Build succeeded 2019-03- 
21T05:41:00.603480+00:00 heroku[web.1]: Starting process with command `npm 
start` 2019-03-21T05:41:03.185110+00:00 app[web.1]: 2019-03-            
21T05:41:03.185129+00:00 app[web.1]: > hps_prework@1.0.0 start /app 2019-03- 
21T05:41:03.185131+00:00 app[web.1]: > node app.js 2019-03- 
21T05:41:03.185132+00:00 app[web.1]: 2019-03-21T05:41:03.463015+00:00 
app[web.1]: > Ready on http://localhost:25866 2019-03- 
21T05:41:04.432538+00:00 heroku[web.1]: State changed from starting to up 
2019-03-21T05:41:06.070888+00:00 heroku[router]: at=info method=GET path="/" 
host=summaraize.herokuapp.com request_id=96091bf7-f9c1-45f1-b3b9- 
5b74ce58826f fwd="104.38.101.109" dyno=web.1 connect=0ms service=517ms 
status=200 bytes=3943 protocol=https
notacorn
  • 3,526
  • 4
  • 30
  • 60
  • do you have any configs in your server.js file on have to serve static files in production `if (process.env.NODE_ENV === 'production') { ... }` – Hend El-Sahli Mar 21 '19 at 06:12
  • @HendEl-Sahli my next.config.js looks like `module.exports = { // some configuration assetPrefix: process.env.NODE_ENV === 'production' ? '/{summarAIze}' : '', // another configuration };` – notacorn Mar 21 '19 at 06:22
  • and this would be the only other relevant line in server.js (for me, app.js) `const dev = process.env.NODE_ENV !== 'production';` – notacorn Mar 21 '19 at 06:23
  • Have you tried [clearing storage](https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage#clear-storage) in the chrome dev tools? – JBallin Mar 21 '19 at 07:06
  • I looked at it, but it says the website is using 0B of something like 31000B available, so that probably isn't it @JBallin – notacorn Mar 22 '19 at 14:33

1 Answers1

1

Nextjs docs custom server package.json instructions:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

Example app using a custom server (express in this case) mars/heroku-nextjs-custom-server-express’s package.json:

"scripts": {
  "dev": "node server.js -p $PORT",
  "build": "next build",
  "heroku-postbuild": "next build",
  "start": "node server.js -p $PORT"
},

Your package.json:

You should add the heroku-postbuild script and set NODE_ENV and/or PORT in your start script if needed.

JBallin
  • 8,481
  • 4
  • 46
  • 51
  • I don't think the post-build script (which I added anyway) changed anything because I have been watching the logging output as heroku builds my app and regardless of whether the script is called "build" or "heroku-postbuild" it does the same thing at the same time, and heroku has also added this info during the build process: `-----> Change to Node.js build process Heroku has begun executing the "build" script defined in package.json during Node.js builds. Read more: https://devcenter.heroku.com/changelog-items/1573` – notacorn Mar 22 '19 at 14:27
  • These are the scripts I've tried so far, none of whom have worked: `"scripts": { "dev": "node app.js", "build": "next build", "start": "next start -p $PORT", "heroku-postbuild": "next build" },` `"scripts": { "dev": "node app.js", "build": "next build", "start": "NODE_ENV=production node app.js", "heroku-postbuild": "next build" },` – notacorn Mar 22 '19 at 14:29