HOW TO CREATE AN AZURE WEB APP
Howdy fellow humans! Hope everyone’s doing alright. So today i thought of doing a tutorial on Microsoft Azure Web Apps. For those who do not know, Microsoft Azure is an enterprise-grade cloud computing platform created by Microsoft. This is just a brief description and if you guys are interested in learning more about the service you could dig a little deeper and find out the details but we are not interested in definitions today. What we really want is to create a web app in our portal and host our website there.
So to start with the tutorial you obviously need an account made on Azure. They let you create a free 30 day trial with $150 credits so that you could play around and explore the platform (Click here to create a free account) . What I’ll be using today is an Imagine Subscription (previously known as Dreams Park). Since I’m a student Microsoft offers some features for free including web apps (Click here to get an Imagine Account).
So assuming you have an account, let’s login to the portal. Click here and click on portal on the top right corner of the navigation bar. Then you’ll be taken into your dashboard. It will probably look like the screenshot below.
Figure 1 – Azure Dashboard
Once you are there Click on the “New” tab. And then click on “Web + Mobile” and select “Web App”.
Figure 2 – Create a web app
Done? Excellent. Now we just have to give a name for the web app. For example if I give “apareciumlabs” as the name, the URL will be apareciumlabs.azurewebsites.net. Keep in mind that most of the common names you give might be taken, so put something unique. okay :P. And for the subscription select what ever the subscription you wanna use. And for the Resource group create a new one or use an existing group. If you don’t know, basically a Resource Group is a collection of resources that share the same lifecycle, permissions and policies. If you want to learn more about Resource Groups, click here.
And then you have to create an App Service plan which is the container for our app. Give a name for the plan and select your prefered Region and price tier. Once done press OK.
Now you are pretty much done with the initial stuff. Tick the “pin to dashboard” checkbox if you want your newly created app to appear on the dashboard and press “Create” button.
Well Congrats! You’ve made a Web App. It might take a few minutes for the web app to deploy and to appear on your dashboard. So I would recommend you to get a refill on that coffee :D.
And when the deployment process finishes you will be taken to dashboard of your web app where you will be to see the status, URL, ftp of your web app among others. And if you go ahead and click on the URL you will be taken to your website and it will display the following message.
Your App Service app has been created
Well what you saw was the default home page that azure provides when you create a new web app (hostingstart.html). How do we override that?
Azure doesn’t provide an inbuilt FTP like cPanel or any other hosting platform. You have to use an external FTP client like FileZilla, CyberDuck,WinSCP etc. But I highly recommend CyberDuck which is a nifty little FTP client which is freely available for Windows and Mac both.
But in order to access your web root files we need the Publish Profile i.e the FTP username, password etc. In Order to obtain that information click on the “Get publish profile” button on your webapp dashboard. And a file will be downloaded automatically which you can open up using any text editor. It might look messy but don’t worry you could easily find the “userName” and “userPWD” fields. Now that you have the username and password all that we need to access out web root files id the hostname. You can easily locate this on the app dashboard where it says FTPS hostname. I would recommend choosing the FTPS version over FTP because of the extra security.
Check out the following screenshot if you were unable to locate the necessary details to connect to the server via FTP.
Figure 4 – Extracting Publish profile and Hostname from Web App dashboard.
Figure 5 – Obtaining the username and password from the publish profile
Now that we have obtained the necessary FTP information, let’s go to our FTP client software and try to login to our server.
Open up the software and start a new connection. Enter the information you found in the previous step in the text boxes.
- Server – The FTPS hostname of your web app
- Port – 21
- Username – Username from the publish profile
- Password – Password from the publish profile
Done? Then press connect. NOTE: I’m using CyberDuck and for the FTP clients the procedure should be fairly identical. If everything went fine you should see two folders. The first one is “LogFiles” and the second one is “site”. Expand the site folder and click on “wwwroot”. This is where the magic happens. It is like the public_html folder on your cPanel. You can upload your site files onto this folder and it will be public. Though I would recommend putting all your configuration files outside of the wwwroot folder for safety reasons. And one more thing don’t forget to delete the “hostingstart.html” :D.
Follow the Screenshots below if you couldn’t find the necessary stuff.
Figure 6 & 7 – Opening a new connection in CyberDuck and Finding the wwwroot folder on the server
😀 😀 ALL DONE 😛 😛
All you gotta do now is upload your site files and you’re pretty much done. I’ve uploaded my site and it’s live now. You can check it out from this link – http://apareciumlabs.azurewebsites.net/
What is Continuous Deployment?
Continuous deployment aims to reduce the time elapsed between writing a line of code and making that code available to users in production. In layman’s terms, whatever the changes you do on your repository or your local visual studio project will appear instantly on your website. You just have to push the changes and viola! your changes will go live. So no more manually updating the server and what not. Azure currently supports the following tools for continuous deployment.
- Visual Studio Team Services
- Local Git repository
I would recommend you to use GitHub as it is extremely easy and fun to use. Create a repository there and follow the following steps and you will be able to easily setup your continuous deployment.
Figure 8 – Selecting the prefered deployment
I have already authorized my GitHub account and if this is your first time you will definitely have to authorize it. Select the project like i’ve selected and the branch would be automatically set to master. If you have more than one branch then select the desired branch and press OK button.
And done and dusted. Now you have a Azure powered web app which continuously deploys.
I hope you learnt something by following this tutorial and if you have please leave a feedback. And if you have any questions related to this post you know what to do 😛
I will be back with another tutorial soon and till then stay safe. With ❤️ Brion.