Azure Applied Skills: Deploying a Simple Web Game With Github and App Service

What is Azure App Service?

Azure App Service is a fully managed Platform-as-a-Service (PaaS) that allows developers to build, deploy, and scale web applications and RESTful APIs without managing cloud infrastructure. It supports multiple programming languages, including .NET, Java, Node.js, Python, and PHP, making it a versatile choice for cloud-based applications.

In this guide, we will walk through deploying a static web application to Azure App Service, ensuring it's live and accessible via a custom URL.

We will also use AI to generate the code for this application, demonstrating how AI can assist in rapid development.

Before we begin, ensure you have the following:

• Azure Subscription: You need an Azure account to deploy resources. If you don’t have one, sign up for a free account here
• Text Editor: We need a text editor to format the generated code. I recommend VS Code
• Github account and Git set up on your local machine. You must also be logged into git in the terminal/power-shell locally.
• Reliable AI. I recommend Chat GPT 4-o or Deepseek

Lets get started

Creating our static web app. We're generating the game of Snake

• Open an AI of your choice. Prompt it to make a static HTML web page with a creative idea of your choice. In this example, I will prompt it to create the game of snake. Here is an example prompt used:
  create a static web app in a single HTML file (CSS and JS included) of the game of snake
  We need the file to be contained in a single HTML documents for maximum simplicity

• Create a folder on your local machine. Open the folder in VS code. Make a file called game.html or whatever name you want to call it (we will rename it to index.html later)
  

• Paste the code generated by AI into the file
  

• Test the code with the VS code live server extension. Install it to easily test your html files. Once installed, click Go Live at the bottom of the page
  

• This will open the browser with the AI generated game
  

• Prompt the AI to change to code and add things to your liking. Here is an example:

prevent page scroll when game starts. add press space to start. Add movement not only with arrow keys but with wasd

• Keep prompting the AI to modify the code until you are satisfied with the result that you tested in live server.

• Add a README.md file to your project. Explain your game in this file. Tip: you can also use AI to generate the contents of this file for you.
  

• Once All these steps are set up, we now need to prepare the file to be deployed in then next steps. Change the name of the HMTL file to index.html.

Setting up Git

• Once satisfied, we will now create a repository for this project. Log into Github on your web browser. Select new repository
  

• Name the repository

• Make a description

• Keep repository public for easy viewing

• Don't create the README file, we've already done so locally

• Click Create Repository
  

• Copy the Git URL or SSH (if you have SSH set up)
  

• Open your terminal/powershell locally and navigate to your project folder that contains the game files. Conversely, you can open VS code, drag up from the bottom status bar and select terminal as shown:
  

Enter these commands. Ensure that Git is installed on your machine

git init
git add index.html README.md 
git commit -m "message about first commit"
git remote add origin copied_git_url
git push --set-upstream origin main

Replace with appropriate values. Note that live server creates a folder called .vscode. It is not necessary or recommended to add this file and commit it to the Git repository. You can also delete this folder and enter git add . to more easily add the files to commit.
This will push your files to Github. From there we can link it to Azure app services and deploy the Web Page

Setting up Azure App Services

• In the Azure console, search for and select App Services
  

• Click create and select Static Web App:
  

• Select your Azure subscription

• Select resource group or create new. In this example, I created a new one called app_service_practice

• Name the static web app

• Select hosting plan type. In this example, I selected free, as this is just a hobby project

• Select Github as source. Click on Click here to login
  

• Log into your When the prompt appears. Click on Authorize AzureAppService. Enter your password.

• More fields will appear. Select your github organization, the new repository and the main branch.

• Leave build presets, App location, Api location and Output location as defaults

• Click review + create
  

• Click create
  

• Once deployment is complete, click go to resource
  

• Wait a few moments then click the live link
  

• Your website will now be live