How to use NodeJS, Express, and Bower to Create AngularJS apps

Recently I heard someone say that “IDE makes you ignorant, so don’t rely on it”. The thought behind this is that as .NET developers, we cannot think of life beyond Visual Studio, so we become ignorant and don’t care about the behind the scenes complexities. We create a project by selecting a specific project template and manage the different required packages using the NuGet package manager. Super simple, right? Well, not necessarily.

In this article, we’ll explore another way to create an application using JavaScript at the server and at the client, by having NodeJS run it on the server and Angular run it on the client.

Note: Image taken from the web. A special thanks to original image creator.

We will start with creating an angular application in Visual Studio, and then proceed to create the same Angular application using a few components of the MEAN stack: NodeJS, Express, and Bower. Specifically, this post will cover the following topics:

• Creating an AngularJS application in Visual Studio
• Installing NodeJS on Windows
• Setting up the sublime text for JavaScript development
• Installing Bower
• Installing Angular dependencies using Bower
• Creating an Angular application
• Installing Express
• Creating a web server using Express to serve the Angular app

Creating an AngularJS application in Visual Studio

We can create an AngularJS app in Visual Studio by going to File-New Project and then selecting ASP.NET Web Application project template from the Web tab. We are going to create an AngularJS application running on IIS express, so we will choose the Empty template.

I am using Visual Studio 2013 for the purpose of this blog. Once the project is created, we can add an Angular library using the NuGet package manager.

After successful installation of the Angular library you can see Angular files in the Scripts folder of the project.

 

We are all set to write the first AngularJS app using Visual Studio. Let’s go ahead and add an HTML file and the required reference on that to write our first Angular app. In the image below you’ll see that I’ve added Index.html, a reference to the Aangular library, and I’ve created a simple app as shown below:

 

On F5, the Angular app will run in ISS Express, which is Visual Studio’s default web server. We should see the application as it appears below:

Right now, our application is running on the local host and at port 53520. Very easily, we can configure the port number by right clicking on the project, and from the context menu in the web tab, we can edit the Project Url as shown below:

 

As you can see, using Visual Studio, it’s very simple to create an Angular app. Like I mentioned earlier in this post, the use of IDE sometimes makes us ignorant - many complexities have been taken care of by Visual Studio so that we don’t even have to think about them. For us, writing an Angular app was very easy.

Okay, but now how do I create an Angular App on Windows without Visual Studio?

There are many ways to create an Angular app on Windows without using Visual Studio - or any IDE for that matter.  Next I’m going to show you how an Angular app can be created using:

• NodeJS as the web server
• Bower to install any client side dependencies
• Sublime text as the code editor

Install NodeJS

We’ll start by installing NodeJS on Windows. To do that, navigate to http://nodejs.org/ and click on INSTALL to get an MSI file to be installed on Windows. Make sure that the NodeJS variable has been added to the environment variable of windows. To verify that NodeJS installed successfully, open the command prompt and type the command node. Then you’ll get a node shell in which you can run JavaScript code:

 

Configure SublimeText for JavaScript development

After successfully installing NodeJS, let’s configure Sublime Text for the JavaScript development. To do this we need to create a build system for the JavaScript in Sublime Text. To create the build, in Sublime Text navigate to Tools->Build Systems->New Build System, and enter the code as shown below:

 

After saving the file, you will find a build for JavaScript in Tool->Build System. You’ll need to select that to perform JavaScript development. After selecting the JavaScript build, in Sublime Text you can run JavaScript by using Ctrl+B.

Creating an Application folder and using Bower to install Angular dependency

As of now we have set up NodeJS and Sublime Text. Now we need to install bower. Using Bower we can manage all of the client side dependencies. To do that, let’s create a new folder on the file system and install Bower inside that. In my case, I’ve created a folder named HelloWorld2. In the newly created folder, first run the following command: npm init

This command will ask you few questions, but if you’re unsure of any answers, simply leave the default value there. This command will create a file named package.json in the folder.  

Next run the command npm –nstall –g bower to install Bower as shown in the image below:

After successful installation of Bower, we need to install all Angular dependencies. These can be installed by executing the command bower install angular.

 

After successfully installing the command, you will find a subfolder named bower components. Inside the bower_components sub folder, you will find an Angular folder. This folder will contain all the required Angular files.

As of now, we have installed NodeJS, Sublime Text and we’re using the Bower-required Angular dependencies. Now let’s go inside the root folder (the folder we created in the previous step) and create a file named Index.html. To do this, let’s add a folder to the project by clicking Project-> Add Folder to Project and add the HelloWorld2 folder we created in the previous step.

Once that folder is added to the project, you can find that in the left of the Sublime text.

 

Right click on HelloWorld2 and create a new file, press Ctrl+S to save it, and name it as Index.html:

In Index.html, we will add the reference to Angular and create an Angular application.

Installing Express

So far we’ve created the Angular application using NodeJS and Bower. Now we need a web server to serve HTML, CSS and JavaScript. In this step we’ll create a simple web server using Express. We can install Express using npm install express. Run the command as such:

npm install express --save

After successful installation of Express, you will find that package.json has been updated as shown here:

Next add a file server.js in the root of the folder.

As you’ll see in the code, Express will serve files from the root directory and then the app subdirectory. So make sure to put the Angular app file and Bower components file inside the app subfolder. Your folder structure should more or less look like this:

Next, go ahead and run the node application using the node command. Run the command node server.js  - this will start the server on port 1001:

Now we can run the Angular application using the web server created using Express on port 10001.

Now we have an Angular application running on the web server, using JavaScript on the server and at the client!

I hope this article will help you in getting started with the MEAN stack - and help you realize that using open source is not as tough as it seems!