Create a Source Code Directory
On your laptop, create a directory named csci432 to hold the code we write in this class.
Set Up Your VSC Workspace
Start VSC and open the editor to the csci432 directory you created. In this workspace, create two subdirectories; one named projects and another named public_html.
The projects directory will hold our development code. When we’re finished writing an app we’ll build it to create a production ready version of the app. We’ll copy over this production ready version of the app to the public_html folder.
Create a Webpage
Add a file named index.html in your public_html directory and add html code to the file so that it displays your name.
Create a GitHub Repository
Log into GitHub and create and empty repository named vue-apps.
Create a Local Repository
Open the terminal in VSC. Type the following commands to create a local git repository, stage your code, commit your changes, and push the code to GitHub. Replace username with your GitHub username.
cd public_html git init git add . git commit -m 'initial commit' git remote add origin git@github.com:username/vue-apps.git git branch -M main git push -u origin main
Log into GitHub and verify that the files in your public_html directory are on in the vue-apps repository.
Create an Azure Static Web Site
Navigate a browser to https://portal.azure.com/#home. Click the Static Web Apps button. On the next screen, click the Create static web app button.
Project Details
- Subscription: Azure for Students
- Resource Group: Press Create new and enter vue-apps for the Name. Press OK.
Static Web App details
- Name: vue-apps
Hosting plan
- Plan type: Free
Azure Functions and staging details
- Region: East US 2
Deployment details
- Source: GitHub
- GitHub account: Press Sign in with GitHub. Click Authorize Azure-App-Service-Static-Web-Apps then log into GitHub. After logging in, enter the following information.
- Organization: Your GitHub username
- Repository: vue-apps
- Branch: main
Build Details
- Build Presets: leave blank
Press Review + create.
Press Create.
After your site has been provisioned, Azure will display Your deployment is complete. Below that, click Go to resource.
In the main 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 is running. 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 a workflow that pushes your code to Azure. Eventually, you should see your 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
When you created the static web app, GitHub created an action workflow and added a .yml file to your GitHub repository. That workflow will automatically push all changes to the GitHub repository to your Azure website. No intervention on your part is needed.
We’ll later want to push new files to the GitHub repo (so they get uploaded to Azure), but we won’t be able to until we pull the .yml file into the local repo. To sync the repos, make sure your terminal working directory is public_html. Then 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 GitHub. You can view the status of the workflow by navigating to your GitHub repository and clicking on the Actions tab.
© 2023, Eric.