How to deal with node and angular path behind of apache proxy

Escrito por aserrano. Posteado en Angular JS, Desarrollo, ExpressJS, Javascript, Node

I was setting up a server with apache and node.
Apache will redirect all requests from /api to node where an angular app should be work.

I was searching for a solution of this problem but I didn’t find it the right one.

Maybe this is not the better solution ever but It’s working for me.

The first step is prepare Apache to deal with proxy…like this.

Redirect /api /api/
 
            ProxyPass http://localhost:3100/
            ProxyPassReverse http://localhost:3100/

Apache will remove the “/api/” before requesting a page to the node server.

Prepare node to read production.json config and a default.json config file for your development environment

I have use config for this

npm install --save config

Prepare the production config json like this (and the development config):

...
"PRODUCTION_URL" : {
    "JS_URL": "/api"
  }
...

JS_URL will be empty “” in a development environment.

Now prepare the html that loads angular scripts and css. I’ve used for this purpose ejs files and I’ve prepared two initial angular html, one for logged users and one for no logged users.
Both looks like similar but they have different functionalities.

Node code for serve file…

var router  = express.Router();
var config = require('config');
 
...
 
var urlADD = config.get('PRODUCTION_URL');
 
router.get('/', function (req, res) {
 
  res.render('login.html.ejs',{JS_URL:urlADD.JS_URL});
});
 
//JAVASCRIPT CONFIG FILE
router.get('/config.js', function (req, res) {
 
    res.render('config.js.ejs',{JS_URL:urlADD.JS_URL});
});

prepare html file in this case login.html.ejs…

...<script src="&lt;%= JS_URL %&gt;/config.js"></script><script src="&lt;%= JS_URL %&gt;/bower_components/angular/angular.min.js"></script><script src="&lt;%= JS_URL %&gt;/bower_components/angular-route/angular-route.min.js"></script>....

And prepare config.js.ejs file. I’m using it to generate a global javascript variable to pass to the controllers or other javascript files.

var JS_URL = '&lt;%= JS_URL %&gt;';

I have a file with all the api urls or templates url. This is important because now we have to prepend the production server url like this…
Prepare your file like this…

var CTE_API_URL                 =   JS_URL + '/api/v1';
 
var CTE_TEMPLATE_DIR            =   JS_URL + '/app/tmplnl/login';
 
...
 
var CTE_URL_LOGIN_LOGIN             = JS_URL + '/auth/login'; 
 
...
var CTE_TPL_APP             =       CTE_TEMPLATE_DIR + '/app/tmpl/app.templ.html';
var CTE_TPL_LOGIN           =       CTE_TEMPLATE_DIR + '/login.templ.html';

Now you’ve only to prepare angular to load templates or API functions…

...
$stateProvider.state('login', {
            url: '/login',
            templateUrl: CTE_TPL_LOGIN,
            controller: 'LoginController',
            access: {requiredLogin: false}
        })
..
 
$scope.logo = JS_URL + '/img/logo.png'; //to be passed to an angular template
 
..
 
$http.get(CTE_URL_GET_PROCESS)
                    .success(function (data) {
....
});

"Trackback" Enlace desde tu web.

Comentarios (1)

Deja un comentario

Time limit is exhausted. Please reload CAPTCHA.

Nota legal

(C) Antonio Serrano 2012