Jump to content













Photo
- - - - -

Azure Start Point | Your first Web App

  Posted by Pantelis Apostolidis , in Azure 23 May 2018 · 8 views

<h1 style="text-align: justify;">Azure Start Point | Your first Web App</h1>
<p style="text-align: justify;">In this post series we will go through some basic steps on how to start with Microsoft Azure. For start we will create a Web App.</p>
<p style="text-align: justify;">If you don’t have an Azure Subscription, you can easily create a free trial by just going to <a href="https://azure.micros...s/free/</a></p>
<p style="text-align: justify;">Let’s create our first Web App. Go to the Azure Portal by navigating to <a href="https://portal.azure...l.azure.com</a>and click “+ Create a resource”</p>
<p id="kdjqVBi" style="text-align: justify;"><img class="alignnone wp-image-1882 size-full" src="https://www.e-aposto...3ce4ac1565.png"alt="web app" width="440" height="229" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b03ce4ac1565.png 440w, https://www.e-aposto...565-300x156.png 300w" sizes="(max-width: 440px) 100vw, 440px" /></p>
<p style="text-align: justify;">At the search box write “Web App” and press enter</p>
<p id="czvSmxZ" style="text-align: justify;"><img class="alignnone wp-image-1884" src="https://www.e-aposto...3cf5e0eec3.png"alt="web app" width="826" height="130" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b03cf5e0eec3.png 806w, https://www.e-aposto...eec3-300x47.png 300w, https://www.e-aposto...ec3-768x121.png 768w, https://www.e-aposto...eec3-600x95.png 600w" sizes="(max-width: 826px) 100vw, 826px" /></p>
<p style="text-align: justify;">At the search results. click the “Web App” and at the next screen just press “Create”</p>
<p id="zEjXfDE" style="text-align: justify;"><img class="alignnone wp-image-1885 size-full" src="https://www.e-aposto...3cf900c262.png"alt="web app" width="849" height="274" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b03cf900c262.png 849w, https://www.e-aposto...c262-300x97.png 300w, https://www.e-aposto...262-768x248.png 768w, https://www.e-aposto...262-600x194.png 600w" sizes="(max-width: 849px) 100vw, 849px" /></p>
<p style="text-align: justify;">The “Web App Create” wizard will open.</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 41.8072%;"><img class="alignnone wp-image-1887 size-full" src="https://www.e-aposto...3cfe7a443b.png"alt="web app" width="304" height="439" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b03cfe7a443b.png 304w, https://www.e-aposto...43b-208x300.png 208w" sizes="(max-width: 304px) 100vw, 304px" /></td>
<td style="width: 58.1928%;">Enter a name for the App. This will be the Public name of your App. Azure by default provides the domain *.azurewebsites.net for free.</p>
<p>So in my example the prowebdev.azurewebsites.net will be the URL of my App</p>
<p>Select the Azure Subscription that will used to bill the Web App and a Resource Group. The Resource Group is used to organize the resources and provide role based access control among other.</p>
<p>OS: Select the Operating System platform that will host your Web App. This can be Windows, Linux or a Docker Container. For the test I will select Windows.</td>
</tr>
</tbody>
</table>
<p style="text-align: justify;">As you can see the wizard has selected an App Service Plan by default with a random name and location. The App Service Plan is actually the Web Server that will host out Web App. Click on the “App Service Plan/Location”</p>
<p style="text-align: justify;">Add a name for the Web Server, select the Location that is nearest to you (or your clients) and the Pricing Tier.</p>
<p id="stKUjPt" style="text-align: justify;"><img class="alignnone wp-image-1890 size-full" src="https://www.e-aposto...3d9ed65448.png"alt="web app" width="864" height="275" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b03d9ed65448.png 864w, https://www.e-aposto...5448-300x95.png 300w, https://www.e-aposto...448-768x244.png 768w, https://www.e-aposto...448-600x191.png 600w" sizes="(max-width: 864px) 100vw, 864px" />By pressing OK you will return to the Web App create wizard and press Create. Now you can monitor the creating process of the App form the “Notifications” option at the top right of the portal, it is the button that has a ringing bell image. First you will see the “Deployment in progress…” message and as soon as the App is ready you will see the “Deployment completed” message.</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50%;"><img class="alignnone wp-image-1892" src="https://www.e-aposto...3daafd0ea5.png"alt="web app" width="391" height="160" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b03daafd0ea5.png 479w, https://www.e-aposto...ea5-300x123.png 300w" sizes="(max-width: 391px) 100vw, 391px" /></td>
<td style="width: 50%;"><img class="alignnone wp-image-1893" src="https://www.e-aposto...3dafd6605a.png"alt="web app" width="391" height="199" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b03dafd6605a.png 460w, https://www.e-aposto...05a-300x153.png 300w" sizes="(max-width: 391px) 100vw, 391px" /></td>
</tr>
</tbody>
</table>
<p>Now if you go to the Resource group you will see two resources. The App Service and the App Service Plan. In high level, the App Service Plan is the web server and the App Service is the Web Application.</p>
<p id="qZibTIb"><img class="alignnone wp-image-1895 size-full" src="https://www.e-aposto...5bb84116f0.png"alt="web app" width="415" height="126" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b05bb84116f0.png 415w, https://www.e-aposto...16f0-300x91.png 300w" sizes="(max-width: 415px) 100vw, 415px" /></p>
<p>Now click the App Service and at its blade you can see your applications URL.</p>
<p id="CdmXVxV"><img class="alignnone wp-image-1896 size-full" src="https://www.e-aposto...5bcbb72165.png"alt="web app" width="962" height="168" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b05bcbb72165.png 962w, https://www.e-aposto...2165-300x52.png 300w, https://www.e-aposto...165-768x134.png 768w, https://www.e-aposto...165-600x105.png 600w" sizes="(max-width: 962px) 100vw, 962px" /></p>
<p>Click the URL and you will see the Demo page</p>
<p id="DFDOidB"><img class="alignnone wp-image-1897 size-full" src="https://www.e-aposto...5bcea62a55.png"alt="web app" width="1021" height="384" srcset="https://www.e-apostolidis.gr/wp-content/uploads/2018/05/img_5b05bcea62a55.png 1021w, https://www.e-aposto...a55-300x113.png 300w, https://www.e-aposto...a55-768x289.png 768w, https://www.e-aposto...a55-600x226.png 600w" sizes="(max-width: 1021px) 100vw, 1021px" /></p>
<p><a class="a2a_button_email" href="https://www.addtoany... first Web App"title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_print" href="https://www.addtoany.com/add_to/print?linkurl=https%3A%2F%2Fwww.e-apostolidis.gr%2Fmicrosoft%2Fazure%2Fazure-start-point-your-first-web-app%2F&amp;linkname=Azure%20Start%20Point%20%7C%20Your%20first%20Web%20App" title="Print" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fwww.e-apostolidis.gr%2Fmicrosoft%2Fazure%2Fazure-start-point-your-first-web-app%2F&amp;title=Azure%20Start%20Point%20%7C%20Your%20first%20Web%20App" data-a2a-url="https://www.e-apostolidis.gr/microsoft/azure/azure-start-point-your-first-web-app/" data-a2a-title="Azure Start Point | Your first Web App"><img src="https://static.addtoany.com/buttons/share_save_171_16.png" alt="Share"></a></p><p>The post <a rel="nofollow" href="https://www.e-apostolidis.gr/microsoft/azure/azure-start-point-your-first-web-app/">Azure Start Point | Your first Web App</a> appeared first on <a rel="nofollow" href="https://www.e-apostolidis.gr">Apostolidis IT Corner</a>.</p>


<a href="https://www.e-aposto...first-web-app/"class='bbc_url' rel='nofollow external'>Source</a>