How I Hosted My App on Microsoft Azure App Service

How I Hosted My App on Microsoft Azures App service

After building Solar system, the next challenge was getting it online so others could access it.

In this article, I'll walk through how I deployed the application AppService, the issues I encountered, and the lessons I learned along the way.

We will go through

• How I setup the web app
• How I configured the hosting environment
• How I deployed the application

• Challenges I faced and how I solved them

• Key lessons from the experience

About the Application

Before diving into deployment, here's a quick overview of the app.

Features

it just a simple App that just shows the rotation of the earth and moon

Tech Stack

• Frontend: HTML, CSS and js
• Backend: none
• Database: none
• Hosting Platform: Microsoft Azure

Prerequisites

Before deploying the application, I made sure I had:

• An account on the Azure
• Source code for my app
• stable internet connection
• Deployment-ready application

Step 1: Preparing the Application

logging on to microsoft azure platform dashboard

Step 2: Creating the Resource group

Next, I created a new resource group.

The process involved:

1. Using the search bar to look for resource groups
2. clicking on the icon
3. selecting your subscription
4. Choosing a region
5. Reviewing and creating the resource

Step 3: Creating an App Service resource.

After creating the hosting resource, I want to create a new web app on the app service.
Steps:

1. Using the search bar to look for App service
2. Click on creating a new web app
3. Give it a name and select a resource group
4. Configure the web according to your needs

Name and resource group selection

plan and Operating system selection

Step 4: Configuring the App

this is the overview of the newly created app

The Newly created app is empty so when the url is accessed it is blank.

Step 5: Deploying the Application

With everything configured, I initiated the deployment.

1. I access the Kudu Environment

1. click on the debug console

1. click on the "site"

1. click on the "wwwroot"

1. click on the HTML Document

1. Replace the default code with your preferred own

The hosting platform automatically built and deployed the application.

Step 6: Testing the Live Application

Once deployment completed successfully, I tested:

Everything worked as expected.

**Challenges I Encountered

**.

This was a new experience so i wasnt able to navigate the process cleanly

Some key takeaways from this deployment process:

This serves as a Platform as a Service
This allows us to host app online