bullcitydave
bullcitydave

Reputation: 933

Heroku Cannot GET /

I am new to Heroku and believe I am following all of the steps outlined on Heroku's website to deploy via node.js – https://devcenter.heroku.com/articles/getting-started-with-nodejs – but despite indications of success, I only see this in the browser when I go to my newly-generated herokuapp.com site.

Cannot GET /

No errors when executing

git push heroku master

My Procfile is simply

web: node app.js

I dont quite understand dynos yet, but there seems to be one running:

heroku ps === web (1X): node app.js web.1: up 2014/07/03 23:55:00 (~ 18m ago)

Then:

heroku open Opening APP-NAME... done

But https://APP-NAME.herokuapp.com/ just displays the Cannot GET / message.

Upvotes: 28

Views: 35605

Answers (9)

Roberto Rodriguez
Roberto Rodriguez

Reputation: 3357

Make sure you have these 2 things in place:

  1. In your package.json, include heroku-postbuild line, in my case is like this, (it might change if you need to do more than one install)
        "scripts": { 
        "heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
      },
  1. In your index.js file, add a condition for production
    if (process.env.NODE_ENV === "production") {
      app.use(express.static("build"));
      app.get("*", (req, res) => {
        res.sendFile(path.resolve(__dirname,  "build", "index.html"));
      });
    }

Express will serve up production assets like our main.js file, or main.css file

Finally- Express looks if the request is for an asset Express will serve up the index.html file if it doesn't recognize the route

Upvotes: 6

sanjsanj
sanjsanj

Reputation: 1022

I had this error and ultimately my problem was that the path I was sending to express.static() was wrong because of my directory structure.

I was able to figure that out by logging out the path and then fixing it.

Upvotes: 0

stoneshishang
stoneshishang

Reputation: 443

I had the same issue. I finially resolved it.

I had two folders for my code. A server folder with all my backend nodejs file and a client folder for all the front end file. That is the issue from the very beginning.

I git init in the server folder, then git commit and git push. It didn't give me any error in the build but in the heroku logs it shows 404.

After research for 5 hours, I figure Heroku Cannot GET / means it can't access the front end file becuase I only deployed the server folder (Duh!).

I got rid of the server folder and moved all my backend file to the same level with client folder, changed some client file path. redid the git init , git commit, git push. Boom! everything works as expected!

So make sure your server files are in the same level with the client folder and deploy the entire code folder.

Hope this helps!

Upvotes: 1

JanBrus
JanBrus

Reputation: 1540

I'm a little bit embarrased but my error was running git push heroku master without the changes being commited.

Upvotes: 1

QauseenMZ
QauseenMZ

Reputation: 1251

Adding these two lines in server.js worked for me:

var distDir = __dirname + "/dist/"; app.use(express.static(distDir));

My dist structure is as follows:

enter image description here

Upvotes: 0

user9784639
user9784639

Reputation: 21

I would think you haven't added the files to git. Whatever file you've edited on your local machine, you need to git add xyz.ext, git commit -m "Message", git push heroku master -u (-u will save the 'heroku master' parameters so future additions you will only need to type git push). In short, every time you're asked to deploy the app, you need to git add, git commit, git push. Hope that helps.

Upvotes: 2

Omar
Omar

Reputation: 3060

I dont know why it worked but i changed the location of my angular /dist from [root]client/dist to [root]/dist which is at the same directory level as server.js

Upvotes: 1

diegolameira
diegolameira

Reputation: 81

almost 3 years, but I'm answering for reference.

  • generally /dist is a build process generated directory, it's temporary and changes a lot while working in our sources, so /dist is not versioned.
  • on your package.json you can add a script called postinstall with this build process, let's say you have a task in gulp called build...so "postinstall": "gulp build"
  • if you manage your project's dependencies in bower too, npm install --save bower and "postinstall": "./node_modules/bower/bin/bower install && gulp build"

Just a simple example croped for your package.json

{
   "dependencies: {
    "bower":"^1.8.0",
    "grunt":"^1.0.1",
   },
   "scripts": {
    "start": "node ./www.js",
    "build": "grunt dist",
    "postinstall": "./node_modules/bower/bin/bower install && npm run build"
   }
}

Obvious you're probably done and better nowadays...I'm just referencing it for next consultings.

Upvotes: 8

bullcitydave
bullcitydave

Reputation: 933

I had my dist directory included in my .gitignore file so I was not committing dist to my repo and not pushing it to Heroku. Therefore, Heroku could not find any content to serve.

I updated my .gitignore, committed, and pushed, and my app shows up just fine on Heroku now.

Upvotes: 33

Related Questions