Deploy Your HTML/CSS/Javascript Application on Azure App Service

综合技术 (源链)

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.


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.

Do you think you can beat this Sweet post?

If so, you may have what it takes to become a Sweetcode contributor…Learn More.


JavaScript专题之解读 v8 排序源码 JavaScript 专题系列第二十篇,也是最后一篇,解读 v8 排序源码 前言 v8 是 Chrome 的 JavaScript 引擎,其中关于数组的排序完全采用了 JavaScript 实现。 排序采用的算法跟数组的长度有关,当数组长度小于等于 10 时,采用插入排序,大于 10 的...
唯快不破:Web 应用的 13 个优化步骤 时过境迁,Web 应用比以往任何时候都更具交互性。搞定性能可以帮助你极大地改善终端用户的体验。阅读以下的技巧并学以致用,看看哪些可以用来改善延迟,渲染时间以及整体性能吧! 更快的 Web 应用 优化 Web 应用是一项费劲的工作。Web 应用不仅处于客户端和服务器端的两部分组件当中,通...
How to Use CSS Overflow The CSS overflow property specifies what to do in case content is too large to fit in the container box. It specifies if a scrollbar shou...
利用CSS变量实现令人震惊的悬浮效果 利用CSS变量实现令人震惊的悬浮效果 最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。 怎样才能达...
Any script to make IE show CSS3 / HTML5 same as Fi... I designed a HTML Webpage, and everything look perfect on Chrome and Firefox. But on IE9, its show very bad >_< I wonder, do we have any scr...
Sweetcode.io责编内容来自 (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Deploy Your HTML/CSS/Javascript Application on Azure App Service

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录