Running deployd and angular.js app on the same server

Question

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.

score 2 · Accepted Answer · answered Jun 25 '14 at 16:48

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.

score 0 · Answer 2 · answered May 21 '14 at 18:52

0

have you checked that from a browser that port 3000 as well as 5000 is reachable?

Because you are using proxy pass it makes me think that those ports aren't open. And because angular is run client side, it will never be able to connect to the api if the 5000 port is closed.

answered May 21 '14 at 18:52

Zerot

196
2

This is most likely it, but can't test until later tonight. I was writing my JS like it was server-side code, purposely not opening port 5000 to the public because I didn't think I needed to. I normally code in Java & PHP, so stuff like this gets me every time. Cheers! – Shaun Scovil May 21 '14 at 21:12

Running deployd and angular.js app on the same server

2 Answers2