In this module, we will create a new project in VSC that will be the start of our static website. We’ll then create a git repository and push it to GitHub. Last, we will deploy an Azure static site and use a GitHub action to push the code in the repository to the static site.
Create a VSC Project
Using a file explorer application that came preinstalled on your laptop, create a directory that will hold all of the project files for your website and for the API server that we will develop later. Give the directory a meaningful name, like the name of the app. The location of the directory doesn’t matter, you just have to know where it is.
Inside the directory you just created, create two subdirectories; one named web-app and one named api-server.
Next, start VSC. On the Welcome tab choose Open and select the web-app directory that you just created. You should now see web-app at the top of the Explorer pane on the left-hand side.
Create a Home Page
Inside your web-app directory, create a file named index.html. This will be the home page for the app. Add html code to to the file to it simply displays the name of the app.
As I mentioned in the last class, you have free reign to build out the client as you’d like. I’ll give you snippets of client side code here and there, but I we won’t be building the client together. We’ll build the API server together. The client is your responsibility. As such, feel free to organize your files in any way you like. The only restriction is that your index.html file must be in the root of your project directory. You may want to create subdirectories named css and js in the web-app directory – or not. You will have a lot of files in the client, so keep it organized.
Create a Git Repository
Open a terminal pane in VSC. In the terminal, change the working directory to the web app’s directory (web-app) if not already there. Recall we can view the working directory using the pwd command and change the working directory using the cd command.
Now initialize a git repository by issuing the following command in the terminal.
$ git init
Now add the index.html file to the git staging area using the following command.
$ git add index.html
Next we want to commit the changes to the staged files using the command below.
$ git commit -m "initial commit"
Create a GitHub Repo
Now on GitHub, create a new repository for the code that is in your web-app directory. We’ll be creating a separate repository for the api server later, so use a name that is meaningful.
After you’ve created the repository, you should see a box on the webpage that reads Quick setup — if you’ve done this kind of thing before. In that box press, press the SSH tab. This changes the commands needed to push code using SSH key authentication.
Using the terminal in VSC, run the 3 commands that are listed under …or push an existing repository from the command line.
If you refresh your GitHub page, you should see your app’s code.
Create an Azure Static Web Site
Navigate a browser to https://portal.azure.com/#home. Under Azure Services, click the More services arrow. Scroll down to Web & Mobile and click the Static web apps button. Next, click Create and set up the service so that it matches the information below.
Project Details
- Subscription: Azure subscription 1 (or whatever the default is)
- Resource Group: Press Create new and enter web-app (or something meaningful) for the Name. Press OK.
Static Web App details
- Name: web-app (or something meaningful)
Hosting plan
- Plan type: Free: For hobby or personal projects
Azure Functions and staging details
- Region: East US 2
Deployment details
- Source: GitHub
- GitHub account:
- Next to Sign in with GitHub, click Click here to login.
- Click Authorize Azure-App-Service-Static-Web-Apps then log into GitHub.
- Back on the Create Static Web App use the dropdown menus to choose the following information.
- Organization: (Your GitHub username)
- Repository: (whatever you named your web app repository)
- Branch: main
Build Details
- Build Presets: leave blank
Press Review + create.
When the screen updates, press Create.
After your site has been provisioned, Azure will display Your deployment is complete. Below that, click Go to resource.
Behind the scenes, Azure created a .yml file and added it to your repo. This file is called a GitHub action workflow file Whenever you push code to GitHub from VSC the workflow file will be automatically run which will deploy your code to your Azure site.
After the code in your Github repo has been deployed to Azure, in the main Azure pane, under Essentials, you will find a URL. This URL is the URL for your website. Click on the URL to verify that your site has been updated. If there is a screen that says Azure is waiting for your content, wait a minute, then refresh your screen. It takes a few minutes for GitHub to run the workflow that pushes your code to Azure. Eventually, you should see your app’s name on the web page. If all is well, email your instructor your website URL and bookmark your website; otherwise work with your instructor to resolve the issue.
Sync Your Local Repo with Your GitHub Repo
As mentioned above, when you created the static web app, GitHub created an action workflow file and added it to your GitHub repository. We’ll later want to push new files to the GitHub repo (so they get deployed to Azure), but we won’t be able to until we pull the .yml file into the local repo. To sync the repos, issue the following command:
git pull origin main
Test the GitHub Workflow
Well, there you have it. You’ve created a website, pushed it to GitHub, and created an Azure static web app that will be automatically updated when you push changes to GitHub. Try it out.
- Make a change to index.html
- Add index.html to the repo staging area
- Commit the changes
- Push the commit to GitHub
After the GitHub workflow has completed, navigate to your website to verify that the changes made it to your site. Remember that it takes a couple of minutes for GitHub to run the workflow to push your changes to Azure. You can view the status of the workflow by navigating to your GitHub repository and clicking on the Actions tab.
© 2024, Eric McGregor. All rights reserved. Unauthorized use, distribution and/or duplication of this material without express and written permission from the author is strictly prohibited.