Create NodeJS – ExpressJS static file server in a minute

It’s pretty straight-forward tutorial for anybody to understand. Suppose, you want to run your AngularJS static application in your local PC with pretty URLs and other features. You may need to create a stand-alone static file server.

So here you can do that with NodeJS and Express.

– Just create a package.json file in your application root. and write the following json configuration there.


{
  "scripts": {
    "server": "node static-server.js"
  },
  "dependencies": {
    "express": "^4.14.0",
    "node-static": "^0.7.7",
    "path": "^0.12.7"
  }
}

And after that create a JS file name ‘static-server.js’ with the following code where ExpressJS will serve you static files.


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

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

app.get('*', function(request, response, next) {
    //__dirname + '/public' is your main file location of a
    response.sendfile(__dirname + '/public');

    //if you want to run AngularJS app with html5Mode(true)
    //then you have to run server via index.html
    //response.sendfile(__dirname + '/public' + '/index.html');
    //Write your own angularJS index file location
});

app.listen(8081, function(){
    console.log('Starting server at http://localhost:8081')
});

Now you are all set. Now install all nodejs dependency libraries by npm install command and then run ‘npm run server’ command to start your static server. After successfully started (can see in console) you can visit your static web server from http://localhost:8081 (you can change port as your wish). I think this will help you and your team.

AngularJS and API Backend via nginx proxy – Sample nginx virtual host

If you want to run your AngularJS front-end web application and run nginx as your API proxy server, then the following nginx virtual host configuration can help you.


#AngularJS frontend with proxied API backend
server {
        listen 80;
        server_name your-angularjs-public.url;

        root your/angularjs/app/root-directory;
        index index.html;

        location / {
                # If you want to enable html5Mode(true) in your angularjs app for pretty URL
                # then all request for your angularJS app will be through index.html
                try_files $uri /index.html;
        }

        # /api will server your proxied API that is running on same machine different port
        # or another machine. So you can protect your API endpoint not get hit by public directly
        location /api {
                proxy_pass http://api-server-url;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        #Static File Caching. All static files with the following extension will be cached for 1 day
        location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
                expires 1d;
        }
}

This will help you lot to configure your Nginx proxy for your API backend and run your API with AngularJS based web application interface.

Twig and AngularJS curly braces conflict solution

Whoever loves to work with Twig template system for their PHP driven web application may want to implement AngularJS within Twig template. But the main problem will be Twig’s curly braces. AngularJS and Twig both use __ inside their template to output data. So simply, it can cause trouble to work with this two lovely systems together in your application.

But here is the solution. According to AngularJS $interpolateProvider docs I figured out the easy solution. You can change AngularJS __ symbol with any other symbol. Cool! So see how you will override that configuration.

var app = angular.module('myApp', []);

app.config(function($interpolateProvider){
  $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

Now you can use {[{ }]} symbol for your AngularJS. And Twig use **. So problem solved. From now on you can use AngularJS within your Twig template system.

AngularJS Resource use for RESTful apps

This example will help you to learn how to interact between your backened RESTful apps and AngularJS. AngularJS has a service factory called ngResource which you can use to do CRUD operation with your RESTful backend application.

Here you just need to define the service factory which will get all notes by calling an ajax request to your http://yourRESTAPIBackendserver.url/notes. Also you can do rest of the CRUD services with that script. This script represents very basic usage of ngResource. So you learn it and try to DYI.

Don’t forget to add the main angularjs library and ng resource service library in your html head tag.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.0-rc.2/angular-resource.js"></script>