Cloud

HOW TO CREATE AN AZURE WEB APP

By on April 1, 2017

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.

Azure portal Dashboard

Figure 1 – Azure Dashboard

Once you are there Click on the “New” tab. And then click on “Web + Mobile” and select “Web App”.

Create a 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.

Enter web app details

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.

Get publish profile

Figure 4 – Extracting Publish profile and Hostname from Web App dashboard.

Finding the username and password on the publish profile

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.

  1. Server – The FTPS hostname of your web app
  2. Port – 21
  3. Username – Username from the publish profile
  4. 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.

Entering credentials and viewing the file hierarchy of the server

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/

 

CONTINUOUS DEPLOYMENT

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.

  1. Visual Studio Team Services
  2. OneDrive
  3. GitHub
  4. Local Git repository
  5. BitBucket
  6. DropBox

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.

 Selecting the prefered deployment

Figure 8 – Selecting the prefered deployment

Selecting the repository

 

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.

TAGS
4 Comments
  1. Thushan Kavishka

    April 3, 2017

    Nice tutorial for a beginner..Good job:)

  2. Pavith Buddhima

    April 5, 2017

    Jobe done wel !, nice

  3. Hasitha Walpola

    April 10, 2017

    Interesting one! Well explained.. Keep it up!

  4. Sonal Muthukumarana

    April 23, 2017

    Good Read !

Comments are closed.

BRION MARIO
Kalamulla, SRI LANKA

My name is Brion Mario. And I am a Developer/ Musician/ Designer/ Entrepreneur/ Blogger from Sri Lanka. I'm a Software Engineering undergraduate at University of Westminster. I enjoy writing very much and please tag along and read my journey......

ADVERTISING
Follow me on Twitter