Setup Angular 2 Nodejs Structure – Angular CLI – Express

Angular 2 js is finally released after rolling up from all development phases, Alpha, Beta and release candidates. And Now we can code with the stable version. I was frequently going through Angular 2 and has worked with all previous version of Angular Beta and Release Candidate updates with some of my demo project ready. As Angular 2 is finally released, one of my Client asked me to start up an ecommerce based project with Angular 2 and nodejs. As I am soon going to initialize the project work, the first basic step for me to know about about how to integrate and setup Angular 2 Nodejs project structure and to make client Angular communicate with Server Nodejs Setup.

Setup Angular 2 Nodejs Structure - Angular CLI - Express
Setup Angular 2 Nodejs Structure – Angular CLI – Express

I used to play with Angular 2 code in my free time to create some demo, which also excites me to share my Angular 2 code with my team. As Angular 2 is very new and my team used to code with Angularjs 1 which is quite different to Angular 2, I engaged myself and two more coders of my team full time to work on this (angular 2 nodejs ecommerce based) project, so that me and both of my coders can learn, understand and accomplish the project within time constraint maintaining quality.

Lets give me a try to explain you how we can setup Angular 2 Nodejs Structure. Before getting into project structure, I am assuming that you would be aware of Angular 2 basics(components, routes, services, etc) and Nodejs (I am using Express Framework here).

prerequisites:

If you have not installed Angular CLI then you need to install it before going through this tutorial i.e by running


npm install -g angular-cli

OR

npm install -g angular-cli@latest

Note: Both the Angular CLI and generated project have dependencies that require Node 4 or higher, together with NPM 3 or higher.

Setup Angular 2 Nodejs Structure – Angular CLI – Express

Lets first create a Project folder at your desired location i.e I am creating folder name as nodejs-angular2-setup 


mkdir nodejs-angular2-setup

Make a directory, lets called it as client inside your project folder i.e nodejs-angular2-setup, where we are going to store all angular 2 code. You don’t need to use mkdir command, instead we can use Angular CLI to create a client generated code i.e


ng new client

Make sure you have already installed angular cli latest version. Now lets navigate to client and run and build angular 2 code i.e


cd client

ng build

ng serve 

You may check the output of Angular 2 code at http://localhost:4200. This way your client Angular 2 setup work is completed.

Secondly, also check if you can see generated files in dist folder inside client directory (this files were generated by ng build command). Now we are going to use this generated ‘dist folder’ and render this angular generated html javascript over nodejs port. Dist folder contains combined bundle html and javascript file which is finally used as your client data.

Coming back to parent folder i.e node-angular2-setup in your command line console to create a structure for server nodejs.

Lets first create a directory called as server inside main project and navigate to server directory.

Lets run init command, which would create a package.json file i.e


npm init

And provide input as required i.e Name, version, description etc for app as can be seen in the image provided below.

Setup Angular 2 Nodejs Structure - Angular CLI - Express
Setup Angular 2 Nodejs Structure – Angular CLI – Express

In the console, check if you are at server folder, and type in to install and initialize express.


npm install express --save

Now lets create a file app.js insider server and paste in following code.


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

app.use('/',express.static(__dirname+'/../client/dist'));

app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname+'/../client/dist','index.html'))
});

app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});

app.listen(3000, function () {
console.log('Example listening on port 3000!');
});

module.exports = app; 

Finally your app structure would look like this:

Setup Angular 2 Nodejs Structure - Angular CLI - Express
Setup Angular 2 Nodejs Structure – Angular CLI – Express

You might be aware of the above code. We are just asking nodejs to serve static content from the dist folder of client i.e generated by angular 2. In this way when we will start the node express application, angular 2 code should serve the html and javascript content.

Finally start the server, and check if angular2 code is served on port 3000 (you may change the port number by defining in app.js). For starting nodejs server, just navigate to project home directory, and run following command from console.


node server/app.js

If you enjoyed and understand the article do share this post with your friends and collegaes. Also Do subscribe this blog to get the latest updated version of all upcoming post of Angular 2 js and nodjes.