Search code examples
javascriptangularjsnode.jsurl-routingdeployd

Running deployd and angular.js app on the same server


I'm trying to run a deployd API on the same server as my AngularJS app, but deployd seems to be conflicting with the app routing.

My deployd server is listening on port 5000 and looks like this:

var deployd = require('deployd');

var server = deployd({
    port: process.env.PORT || 5000,
    env: 'production',
    db: {
        host: 'localhost',
        port: 27017,
        name: 'deployd',
        credentials: {
            username: 'myUsername',
            password: 'myPassword'
        }
    }
});

server.listen();

server.on('listening', function() {
    console.log("Server is listening");
});

server.on('error', function(err) {
    console.error(err);
    process.nextTick(function() { // Give the server a chance to return an error
        process.exit();
    });
});

My node server for the AngularJS app is listening on port 3000 and looks like this:

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(process.env.PORT || 3000);

The app loads fine, although it is not hitting the API as expected when making a call like this:

$http.get('localhost:5000/foo')

or this:

$http.get('http://my.public.ip.address:5000/foo')

And my page routing (in HTML5 mode, with no # in the URL) is getting hijacked by deployd -- so a URL routed by AngularJS for '/foo' is hitting the API and returning "Cannot GET /foo".

This is all happening on a server that is also running Apache, but that is configured to forward requests for my domain to port 3000 using something like this:

NameVirtualHost *:80
<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        ServerName my.domain.com

        ProxyPreserveHost       on
        ProxyPass /             http://localhost:3000/

        <Location />
          Order allow,deny
          Allow from all
        </Location>
</VirtualHost>

If I use the # in the URL, like http://my.domain.com/#/foo that will return the page template dictated by the AngularJS router, but it is missing data because the API is not being hit on port 5000.

Any help would be greatly appreciated.


Solution

  • Turns out this was a problem with my Express server.js code and had nothing to do with Deployd. I kept seeing the Cannot GET /foo message and just assuming Deployd was trying to fetch a resource, but in fact Express was not loading index.html (which loads AngularJS and my routing code), because it was just trying to load a static file called foo instead.

    Here is my fixed server.js:

    var express = require('express');
    var app = express();
    
    app.use(express.static(__dirname + '/public'));
    app.use(function(req, res) {
        res.sendfile(__dirname + '/public/index.html');
    });
    
    app.listen(process.env.PORT || 3000);
    

    Now, if the static file foo does not exist, it loads index.html and allows my AngularJS router to take the wheel.