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:
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:
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!