Deploy AngularJS Web App With Node.js

In this blog, you will learn how to deploy AngularJS Web app with Node.js.

Introduction

The developer develops Web app and deploys them for execution on the Browser, so that the client can browse it. An application developed by using JavaScript, AngularJS, BootStrap, NodeJs is very easy to deploy. Here, I will explain the step osf deployment of AngularJs App, using NodeJs. 

Prerequisites

1. Node.Js should be installed into your machine. 

        Source - https://nodejs.org/en/download/

Set up AngularJS Project.

The steps are given below-

1. Create one folder named "MyProject".
2. Create sub folder inside MyProject named "App" -- This folder will contain the project files and resources.

Take one "package.json" file inside "MyProject" Folder and put the content, as given below-

{
  "name": "MyProject",
  "version": "0.0.1",
  "description": "My Project",
  "dependencies": {
    "express": "*"
  },
  "engine": "node >=0.6.x",
  "scripts": {
    "start": "node server.js"
  },
  "main": "server.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "MyProject",
  "license": "MyProject",
  "bugs": {
    "url": ""
  },
  "homepage": ""
}

Take one "Server.js" file inside, as given below-

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

app.use(express.static("App"));

app.get('/', function (req, res) {
    res.redirect('/');
});

app.listen(8080, 'localhost');
console.log("MyProject Server is Listening on port 8080");

Here, you can define your own port and put IP of your machine in place of "localhost".

Navigate to folder "MyProject", using command prompt like cd f:\MyProject.

 

Now, type command npm install

It will be, as given below-

 

It will install npm and create a folder with the name "node_modules". Also, it will install the dependencies, which you will put inside package.json file.

 

Now, type command npm start and it will start npm, as shown below-

 

Now, open your Browser and type - localhost:8080.

 

It will open your Web app.

Project Structure

The project structure is given below-

 

 

app.js file is an entry point of this Web app, so it should define the state, using URL router, as shown below-

(function () {
    "use strict"
    var app = angular.module("myApp", ["ui.router"]);

    app.config(["$stateProvider", "$urlRouterProvider",
      function ($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise("/");
          $stateProvider
            .state("home", {
                url: "/",
                templateUrl: "home/home.html",
                controller: "homeController",
                controllerAs: "homeController",
                authenticationReqired: false
            });
      }
    ]);
}());

Here, I define the default state "home" and its URL is "/" . In the same URL, I defined inside server.js file, as shown below- 

app.get('/', function (req, res) {
    res.redirect('/');
});

Thus, it will redirect to home state containing "/" URL on the Browser. 

Conclusion

NPM (Node Package Manager) is very good for the deployment of Web apps. It is very easy to deploy.