Azure App Service is the fastest way to deploy an HTML/CSS/Javascript application in minutes on Azure. All you need is an Azure account and repo.
Creating an HTML5 Empty Web App
To create an App Service, you need to go to “New” and search “HTML5 Empty Web App” (as indicated in the screenshot below), and click on the element in the result list.
In the next step, just click on the “Create” button to configure your application.
Fill in the form with the “App Name,” which is used to generate a URL to access your application. Then choose the “Subscription” and the “Resource Group.” I usually prefer to create one resource group for each App Service. Next, choose the App Service Plan and click on “Create new” to create and configure your App Service Plan.
Every App Service needs an App Service Plan. The App Service Plan is the configuration of the infrastructure where your application will run. You can choose a shared infrastructure or a dedicated one. The Azure App Service provides an address to access your application, and if you don’t need to configure a custom domain, you can choose the free option. This is very useful for testing applications. If your application will receive a significant access flow, you need to choose a plan that allows scaling of your infrastructure or management of traffic.
To create the App Service Plan, fill in “App Service plan” with the name of the plan, and choose the “Location” and the “Pricing tier” according to your application needs. Then click on “OK.”
You will next go back to the “HTML5 Empty Web App” form, where you can choose whether or not to enable “Application Insights.” This is a good option to monitor your application, and it provides advanced information about traffic and application response.
After finishing, just click on “Create” and wait for deployment of the resource.
Configuring the App Service
In the App Service view, you can see all the possibilities for configuration. The “Deployment” group contains the options to deploy your web application. And the “Settings” group has advanced options such as SSL certificates, custom domains, and scaling. It also includes a function to stop your application, so if you need to quickly block access to the application, that is an option!
Now, to deploy the application, choose “Deployment options.” This will show a default configuration of the default site deployed. We need to remove this configuration before adding the new one. To remove it, click on “Disconnect.”
Click on “Setup” to configure the new source where your application code is.
There are many options for online repositories, and you can even choose Dropbox. For this example, I’m using Bitbucket as the source.
The next step is authorization of access to your repositories and users. After this, you will see all your projects, and you can choose the HTML/CSS/Javascript project. (The great functionality here is the option to choose the branch.) With this, we can have one App Service for production and another to test using different branches.
Pick one branch and click on “OK” to associate the project with the App Service.
That’s all, folks! Now, on the overview screen, click on “Browser” to be redirected to the web application URL.
Conclusion
This means of deploying a web application is easy and fast. It provides a normal flow of development, and each commit will be automatically deployed to your App Service application without the effort of creating an infrastructure for continuous deployment. It’s an amazing option for landing pages that need a rapid fix and scaling options.
