How to Deploy Web Apps with Azure | by James Briggs | Towards Data Science

Azure — or any other cloud service — has made sharing the fruits of our creative labor easier than ever.
We can take an app built with Angular (an incredibly easy framework to pick-up) and deploy it to the world quicker than the time it takes to make coffee.
That, to me, is truly phenomenal; the ease and speed at which we can develop and deploy are mind-boggling. It unchains our innovative spirit — allowing us to share with the world in minutes.
This article will take us through the steps from lonely Angular app to highly available, hyper-connected Angular app.
All of the services we will use are free (thanks Microsoft) and — honestly — super easy to use. In short, we will cover:
> Preparing Our App
> Setting up our Azure App Service
> Create our Deployment Pipeline with Azure DevOps
Enjoy!
First, we need an app — if you don’t have one, no problem — we can use a Natural Language Generation app, which you can find on GitHub here.
The App Compilation step is repeated in our Azure pipeline. It can be skipped now — but it is useful to be aware of, and useful to confirm that our app compiles.
Azure needs a dist/ directory — which is an Angular-built distribution directory — containing our entire app compiled and ready for production.
To build dist/ we open the Angular CLI and navigate to our Angular app directory. We then tell Angular to build using the production configuration with ng build --prod — the app will then compile into the dist/ directory.
We need to make sure our ng build --prod command outputs our app directly into the dist/ directory. By default, Angular will distribute to dist/<app-name>/ — we change this in angular.json:
Now, inside the dist/ directory we should be able to see index.html — if it is not there, find where it is and adjust the "outputPath" value in angular.json accordingly.
First, we need to head over to the Azure portal — the front-page of the Azure cloud. If you need to sign up, go for it, it should only take a minute.
azure.microsoft.com
Now that we have signed in to the portal, we should be welcomed to the portal screen. If this is your first time in Azure, you will need to sign up for a free trial (we will be sticking to the free tier so that we won’t use any credit!).
We sign up by clicking the big square that says something like “Start with an Azure free trial”.
Once we’ve signed up, we create an App Services instance, like so:
Here we will need to key in a few details for our app. Most of these options will be specific to what you are building — but for Runtime stack select ASP.NET V4.7 and of-course choose the Region closest to you:
Following this, we need to select our Windows Plan — if you have no plan set-up already, we will need to create one. Select Create a resource group and press Dev / Test to find the Free option, like so:
Now we have created our App Service resource! We can view all of our resources by clicking the top-left button (the three horizontal lines) and clicking All Resources.
We can then navigate to our webpage by typing <app service name>.azurewebsites.net into our browser. Where we will see:
Now we need to set up our Azure DevOps project. To do this, head to Azure DevOps and sign in with the same Microsoft account you used in the Azure Portal.
After signing in, you should see the option to create a New organization in the top-right of your screen, click this.
We will then see another window where we name our organization and assign a geography for our organization’s projects. I’m based in Rome, so I chose West Europe.
On the next screen, we can create our project:
Now we have our project set-up, we need to connect our GitHub repository and set up a production build pipeline.
To connect to our GitHub repository, navigate to the Pipelines area with the right toolbar, and click Create Pipeline.
We will be taken to a new window where Azure will ask us where our code is — we are pulling in an existing GitHub repo, so we click GitHub.
We then Authorize AzurePipelines to access our GitHub account in the next window.
The next step is to select the repository we would like to use, for me that is jamescalam/nlg-project — you can use your own repo or simply fork this one.
Now we need to Approve & Install Azure Pipelines for our selected repository.
On the next step, we configure our pipeline to use Node.js with Angular which will generate the following YAML script:
In the script, we can see the steps of our pipeline YAML set-up. First, on line 6 is the trigger — set to master — meaning that whenever the master branch in our GitHub repo is updated, our YAML script will be triggered.
Next — on line 10 — we can see that this will be run on a virtual machine (VM) running Ubuntu. We then see on line 13 that the script will install Node.js to our VM.
Finally, our YAML script installs the Angular CLI and then builds our app using the same method we used earlier to create the dist/ directory — this performs the same function (we can skip this in the earlier stage too, but it is useful for confirming that the app compiles without error).
But we are missing one final step, the deployment to our Azure App Service.
To add this, find Show assistant in the top-right corner — click this. Now we will see a list of all the tasks we can add to our YAML script; we need Azure App Service deploy:
After clicking on this, a form will appear. All we need to do is add our Azure subscription (mine is this weird Russian text — I have no idea why), our App Service name and finally change the Package or folder to dist/.
Now we will get the Azure App Service deploy code added to our YAML script — make sure this is added at the end of the script. So our YAML script should consist of:
triggerpoolsteps- task (install Node.js)- script (npm install Angular CLI and build app)- task (deploy to Azure App Service)
We click save and commit changes to our repo. Finally, click Run.
The YAML pipeline will take a minute or so to run. If nothing seems to be happening and the Job status is stuck in Queued, refresh the page and permit the pipeline to use your description if prompted to do so.
Our job status will change to Success on completion — now we can navigate to our deployed web app using the same web address we used earlier — <app service name>.azurewebsites.net — for me, this is meditations-ai.azurewebsites.net.
That’s all — we now know how to deploy Angular apps with Azure App Services. There are a few skill sets that are not too difficult to learn but make an immense impact on what we can build — this is one of them.
Being able to take an app that we have built-in Angular, and share it with the world quicker than the time it takes to make coffee truly is phenomenal.
If that wasn’t enough, not only have we deployed an app — but we have hooked it directly to our GitHub.
So now, every time we want to push the newest release of our web app to the world, we simply type git push — to me, that is incredible.
I hope that this article is as useful to you as it is for me. I would love to hear your thoughts, questions, or comments — so feel free to get in touch via Twitter or in the comments below.
Thanks for reading!
Interested in more Angular? Feel free to check out this article I wrote on the basics behind building a TensorFlow-based Angular app: