title: Javascript (Angular) not loading when using Express
body: <p>I'm trying to get my application deployed to a public domain using node.js, express.js, and Heroku (or Modulus.io).</p>
  
  <p>Everything was working fine in the development environment. But when I try to deploy it to Heroku or Modulus, I run into a lot of problems with PORT and Express. Right now I'm trying to deploy to Heroku.</p>
  
  <p>The project is built on angular-seed, and I made a few changes to package.json and how the server starts in order for it to work with Heroku.</p>
  
  <p>Right now, the local server (localhost:5000) loads a static HTML page (index.html works fine), but none of the CSS or Javascript is being loaded to the page. Same thing with the deployed app on Heroku.</p>
  
  <p>Here are the changes I made to package.json (from the one provided in angular-seed):</p>
  
  <pre><code>...
  "scripts": {
    "start": "node web.js",
    ...
  "main": "web.js",
  ...
  </code></pre>
  
  <p>Here is what web.js looks like:</p>
  
  <pre><code>var express = require("express");
  var logfmt = require("logfmt");
  var app = express();
  
  app.use(logfmt.requestLogger());
  
  app.use(express.static(__dirname + '/app'));
  
  
  app.get('/', function(req, res) {
    //res.send('Hello World!');
    res.sendfile('./app/index.html');
  });
  
  var port = Number(process.env.PORT || 5000);
  app.listen(port, function() {
    console.log("Listening on " + port);
  });
  </code></pre>
  
  <p>In the HTML index file, </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/app.css"/&gt;
  &lt;/head&gt;
  
  &lt;body&gt; 
  ... 
    &lt;script src="../bower_components/angular/angular.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/services.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
    &lt;script src="js/filters.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I start the server using "foreman start" in the command prompt and it loads the local server just fine with the plain HTML. I've also tried using instead:</p>
  
  <pre><code>app.configure(function() {
      app.use(express.static(__dirname + '/public')); 
      app.use(express.logger('dev')); 
      app.use(express.bodyParser());  
  });
  </code></pre>
  
  <p>in web.js, but when I start the server, I get an error saying "TypeError: undefined is not a function" pointing at the period at "app.configure".</p>
  
  <p>The error in the console says:</p>
  
  <pre><code>GET http://localhost:5000/bower_components/angular/angular.js 404 (Not Found) localhost/:22
  GET http://localhost:5000/bower_components/angular-route/angular-route.js 404 (Not Found) localhost/:23
  GET http://localhost:5000/bower_components/angular-sanitize/angular-sanitize.js 404 (Not Found) localhost/:24
  GET http://localhost:5000/bower_components/angular-animate/angular-animate.js 404 (Not Found) localhost/:25
  Uncaught ReferenceError: angular is not defined 
  ... etc
  </code></pre>
  
  <p>I've been trying to Google a solution, but most of them are from a year ago which does not seem to work anymore. Any help is appreciated. Thanks!</p>
  
  <hr>
  
  <p>Followup error:
  Now I can't push it to Heroku. Everything works fine locally though.
  Here's terminal output when I try to push it to Heroku:</p>
  
  <pre><code>Counting objects: 5, done.
  Delta compression using up to 8 threads.
  Compressing objects: 100% (3/3), done.
  Writing objects: 100% (3/3), 285 bytes | 0 bytes/s, done.
  Total 3 (delta 2), reused 0 (delta 0)
  To ssh://git@github.com/[...]
     a655423..98d78e4  master -&gt; master
  user@ubuntu:~/directory$ git push heroku
  warning: push.default is unset; its implicit value is changing in
  Git 2.0 from 'matching' to 'simple'. To squelch this message
  and maintain the current behavior after the default changes, use:
  
    git config --global push.default matching
  
  To squelch this message and adopt the new behavior now, use:
  
    git config --global push.default simple
  
  See 'git help config' and search for 'push.default' for further information.
  (the 'simple' mode was introduced in Git 1.7.11. Use the similar mode
  'current' instead of 'simple' if you sometimes use older versions of Git)
  
  Fetching repository, done.
  Counting objects: 5, done.
  Delta compression using up to 8 threads.
  Compressing objects: 100% (3/3), done.
  Writing objects: 100% (3/3), 285 bytes | 0 bytes/s, done.
  Total 3 (delta 2), reused 0 (delta 0)
  
  -----&gt; Node.js app detected
  
         PRO TIP: Specify a node version in package.json
         See https://devcenter.heroku.com/articles/nodejs-support
  
  -----&gt; Defaulting to latest stable node: 0.10.21
  -----&gt; Downloading and installing node
  -----&gt; Restoring node_modules directory from cache
  -----&gt; Pruning cached dependencies not specified in package.json
  -----&gt; Node version changed since last build; rebuilding dependencies
  
         &gt; ws@0.4.31 install /tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws
         &gt; (node-gyp rebuild 2&gt; builderror.log) || (exit 0)
  
         make: Entering directory `/tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'
           CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
           SOLINK_MODULE(target) Release/obj.target/bufferutil.node
           SOLINK_MODULE(target) Release/obj.target/bufferutil.node: Finished
           COPY Release/bufferutil.node
           CXX(target) Release/obj.target/validation/src/validation.o
           SOLINK_MODULE(target) Release/obj.target/validation.node
           SOLINK_MODULE(target) Release/obj.target/validation.node: Finished
           COPY Release/validation.node
         make: Leaving directory `/tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'
  
         &gt; phantomjs@1.9.7-5 install /tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma-phantomjs-launcher/node_modules/phantomjs
         &gt; node install.js
  
         Downloading http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2
         Saving to /tmp/phantomjs/phantomjs-1.9.7-linux-x86_64.tar.bz2
         Receiving...
         Error requesting archive.
         Status: 403
         Request options: {
           "protocol": "http:",
           "slashes": true,
           "auth": null,
           "host": "cdn.bitbucket.org",
           "port": null,
           "hostname": "cdn.bitbucket.org",
           "hash": null,
           "search": null,
           "query": null,
           "pathname": "/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2",
           "path": "/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2",
           "href": "http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2"
         }
         Response headers: {
           "content-type": "text/html",
           "content-length": "14134",
           "connection": "keep-alive",
           "date": "Sat, 24 May 2014 00:28:20 GMT",
           "last-modified": "Sat, 24 May 2014 00:08:24 GMT",
           "etag": "\"999f4f548bfffe25245dc29e49c57e9c\"",
           "accept-ranges": "bytes",
           "server": "AmazonS3",
           "age": "49096",
           "x-cache": "Hit from cloudfront",
           "via": "1.1 7718496b82dfc64dff52dbb3d7f07f3b.cloudfront.net (CloudFront)",
           "x-amz-cf-id": "kA4IYvDWX-l2HNW8EzztjY9STY96Ns0vsZDWTUaloDmJTnwJakcDIg=="
         }
         Make sure your network and proxy settings are correct.
         npm ERR! weird error 1
         npm ERR! not ok code 0
  
   !     Push rejected, failed to compile Node.js app
  </code></pre>
  
  <hr>
  
  <p>Followup Error 2:
  Okay, that fixed the problem of not being able to push to Heroku. So now I can push changes to Heroku, but the AngularJS and CSS are still not displaying on the Heroku domain. I checked the console on the domain, which says: </p>
  
  <pre><code>GET http://myapp.herokuapp.com/bower_components/angular-sanitize/angular-sanitize.js 404 (Not Found) lit-inlet-8601.herokuapp.com/:24
  GET http://myapp.herokuapp.com/bower_components/angular-animate/angular-animate.js 404 (Not Found) lit-inlet-8601.herokuapp.com/:25
  Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
  Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
  Error: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the modul...&lt;omitted&gt;...1) angular.js:78
  </code></pre>
  
  <p>This is strange because it works fine locally. On the inspect element Sources tab, it seems to be missing some directories (namely, angular-animate and angular-sanitize). I tried running both "heroku run bower install angular-sanitize" and "heroku run bower install angular-animate" in the terminal but it didn't fix the problem. </p>
  
  <p>"foreman start" and "npm start" both start the server locally and everything displays as it should.</p>
  
  <p>My index.html file is under the app_name/app/ directory and web.js is located in the app_name directory. I haven't changed any of the scripts to load Angular in the index.html file, so it still looks as listed above.</p>
  
  <p>My app.js file which is located in app_name/app/js should be listing the dependencies correctly:</p>
  
  <pre><code>angular.module('myApp', [
    'ngAnimate',
    'ngSanitize',
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
  ])...
  </code></pre>
  
  <p>I am not sure what could be causing this. Any help is appreciated. Thanks!</p>