So far we have seen a few samples of single page applications that are secured by Azure AD, however, those samples are usually setup to run in Visual Studio and IIS which when you are building a JavaScript front end application may not be always what you want. So I took that sample application and modified it with the goal of being able to run the application without the use of Visual Studio and IIS and also be able to edit the application in a lighter IDE such as Visual Studio Code. Let’s dive in and see what that looks like.

Running the Sample in VS Code

Since one of the advantages of using Visual Studio Code is that you can edit an application by simply navigating to the folder where the application exists, this first step was simple. All I had to do is point VS Code to the root folder where the sample code is located and open up that folder, VS Code is great about opening up the rest of the files below that root folder and allowing you to edit them as if you had open a VS Project:

I then moved all of the ‘.html’ files into the root of the folder and modified the app.js file to reflect the changes by simply removing the prefix file paths from the routes:

Then I made sure that I set the paths for any JavaScript resources to the root of the folder:

And that was all that was needed to set up the HTML and JavaScript files to be editable and ready to run from VS Code. Next we will delve into how we can run the application using a Node.JS based server.

Setting up the Client HTTP Server

So I wanted to run the application from the command line using Node.JS, and while you can run IIS from the command line also, it is not as popular to do so if you are developing front end applications. On the other hand there is a simple and ‘zero-configuration’ http server for running AngularJS applications from the command line with zero friction, enter the: http-server

As the documentation on the http-server site explains, the way to get the server installed on your machine is simply by running an npm command:

npm install http-server –g

And that is all that is needed to get the http-server installed on your machine.

NOTE: I assume that you have Node.js and NPM installed on your machine, if you don’t then please head over to this page and install the latest version for your system: https://nodejs.org/en/

Creating a Development Certificate

Before you run the http-server you will have to make sure that you have a certificate available to pipe into the command line execution. This is similar to running IIS on your local machine using a self-signed certificate, except that the format of the certificate needed by the http-server is a bit different. It requires the use of a PEM encoded certificate, but you can generate a self-signed certificate that follows this format by using the Open SSL command line. If you have Linux or Mac then Open SSL is already built into the command line. However, if you are using Windows then you can get the binaries and run the same command. Setting up Open SSL is beyond the scope of this blog post, but if you follow the previous link you can find resources on how to set that up.

The following is a sample Open SSL command taken from this Stack Overflow post, it is exactly what you will need which is the reason why so many of us are thankful for SO these days, but I digress, here is the command:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

This command will generate two files: cert.pem and key.pem. After the files have been generated, copy them and place them under the root of your VS Code folder:

Running the Application

The way you run the application is very simple, just navigate to the start up file in the root of the folder ( in this case ***index.html ***) and right click on the file and choose Open in Command Prompt:

Once the command console launches, you just type this command to start the server and launch the application:

http-server -S -C C:{Path_To_Your_VS_Code_Root_Folder}\cert.pem -K C:{Path_To_Your_VS_Code_Root_Code_Folder}\key.pem -P https://localhost/ -p 44326 –cors

You can refer to the http-server available options for more information about the command above. Essentially we are asking the server to run using HTTPS with a self-signed certificate for which we give the http-server the file path to the certificate, then we ask the server to allow calls to ‘localhost’ to be proxy by it, we specify the port (44326) and we allow CORS.

The result is that now we are authenticated into the application via Azure AD, and it’s all being done via the http-server without the need to run IIS or IIS Express:

The nice thing about this approach is that you can use VS Code, which provides a nice development experience without the need for a full blown copy of Visual Studio installed.

Fixing Certificate Errors

If you run into errors because your certificate is self-signed, you can just follow this article step by step to import your cert.pem file into the trusted store in Windows: https://blogs.msdn.microsoft.com/robert_mcmurray/2013/11/15/how-to-trust-the-iis-express-self-signed-certificate/

Although this post was created using Windows, the same principles could apply if you are using a Mac. Thus, if you need to fix self-signed certificate errors on a Mac you can head over to this article which walks through the process step by step: https://certsimple.com/blog/localhost-ssl-fix

I hope this was useful to you. Until next time, happy coding!