Introduction to Azure Static Web Apps and GitHub Hosting

12 min readMar 19, 2023

This article covers the Microsoft Learn event “Introduction to Azure Static Web Apps and GitHub Hosting”

Hi, everyone 🥳✨!

My name is Sarah, a Computer Science major and Microsoft Learn Student Ambassador. This article covers the recent event I co-hosted with Jeremiah Oluseye on the 11th of March, 2023, titled “Introduction to Azure Static Web Apps & GitHub Hosting.” The event was a hands-on workshop that delved into the basics of GitHub Codespaces, GitHub Pages, and Microsoft Cloud Computing (Azure), demonstrating how to host a JavaScript React portfolio website using these two free platforms.

Our goal for this event was to also make it inclusive to individuals outside of the tech field by providing a hands-on walkthrough on how to build and host an online portfolio or website to showcase one’s services and information. We believe that having an online presence can benefit anyone, regardless of their field or expertise.

If you missed the event, don’t worry! You can still use this article as a reference.

Quick intro to the Microsoft Learn Student Ambassador program, who we are and what we do!

Microsoft Learn Student Ambassadors are on-campus leaders with a passion for making a difference, building vibrant tech communities and sharing the latest technologies with their peers. They mentor fellow students, organize hack-a-thons and ideate to solve problems. Some of the benefits of the “MLSA” program include: Access to Microsoft 365, plus TechSmith Snagit and Camtasia screen capture and recording software, Visual Studio Enterprise subscription and $150 monthly Azure credits, Exam certification vouchers, LinkedIn Learning, Free Name.com domain name, Event support, Engagement with Cloud Advocates and Microsoft MVPs, Student Ambassador Milestone badges to highlight program accomplishments, and so on. The community is open to everyone ❤️.

Step 0: Definitions

Let’s get the technical jargon out of the way before we dive into the exciting stuff!

Azure for Students account: As a college student, the last thing you need is to incur charges experimenting with cloud services. Fear not! Microsoft’s Azure for Students program provides you with a $100 credit to use on their platform. This means you can play around with Azure services like virtual machines, databases, and more, without worrying about breaking the bank.
GitHub Pages: Want to show off your website to the world? GitHub Pages lets you host a website directly from your GitHub repository. It’s an easy-to-use platform that allows you to projects. The best part? It’s completely free, and you don’t need to set up a web server or manage hosting.
GitHub Codespaces: Say goodbye to the hassle of setting up a local development environment. GitHub Codespaces is a cloud-based integrated development environment (IDE) that lets you work on your projects directly from your browser. This means you can code from anywhere, on any device, without worrying about the setup process. I like to think of it as an on-the-go tool for Developers.
Azure Static Web Apps: Building and deploying full-stack web apps can be a daunting task, but not with Azure Static Web Apps! This service automatically builds and deploys your web app to Azure from your code repository. This means you can focus on building your app and leave the deployment to Azure. Easy peasy!

Now that we’re all on the same page, let’s dive into how to host your portfolio website using GitHub Codespaces and Azure!

Step 1: Create a free Azure Account

Before we get started, you’ll need to create a free Azure for Students account. Head over to the Azure For Students site and sign up using your student email. You’ll get a $100 credit to use on Azure services, which will be more than enough for what we’re doing today. If your university is not on the recognized list of universities Microsoft has, you might have to contact a Microsoft Support agent who will provide you with a one-time voucher code so you can activate your student account. You’ll find that option once you access the above link.

Don’t worry, if you’re not a student, you can use a regular free Azure account instead!

Step 2: Project kick-off 🚀

Now that you’ve got your free Azure account, it’s time to set up your project. First, let’s create a repository on GitHub. Don’t worry if you’ve never done this before — it’s super easy! Simply follow this link and click the “Use this template” button to create a new repository based on a pre-defined template.

Next, let’s define some important terms you’ll need to know:

GitHub repository: This is where you’ll store all of your project’s files and revision history. You can use the repository to discuss and manage your project’s work.
Git: Git is a distributed version control system that tracks changes in any set of computer files. You’ll use Git to manage changes to your project files.
‘Generate’ function in GitHub: This is a feature that lets you create a new repository using a pre-defined template. When you create a new repository in GitHub, you can choose to create it from scratch or from a template. If you choose to create it from a template, you’ll see a list of available templates to choose from.

Now that we’ve got the terminology out of the way, let’s move on to making your website!

Step 3: Create your portfolio

Note: the following instructions are contained in your project’s READ.me file.

Create a repository from this template. Select the repository owner, provide a name, a description if you’d like and if you’d like the new repository to be public or private. You’ll notice that the project contains several folders and files such as:
✨ /.devcontainer > devcontainer.json: Configuration file used by Codespaces to configure Visual Studio Code settings, such as the enabling of additional extensions.
✨ ./src: HTML, JS and CSS files used to build your portfolio site.
✨ .eslintrc: Settings for ESLint that is included for code consistency and quality.
✨ .prettierrc: Settings for Prettier that is used to format code.
✨ package.json and package-lock.json: Defines the project information for Node.js, dependent packages and the versions needed of each.
Before creating the Codespace, enable GitHub Copilot for your account. If it is not enabled, take a look on Make changes using Copilot
Navigate to the main page of the newly created repository.
Under the repository name, use the Code drop-down menu, and in the Codespaces tab, select “Create codespace on main”.

5. GitHub will now initialize your Codespace. This will take a couple of minutes.

6. Once it’s loaded, you should see a Visual Studio Code environment with a terminal section at the bottom. Codespaces will install all the required extensions in your container by executing npm install. Once the package installs are completed, Codesaces will execute npm start to start your web application running within your Codespace. If these commands didn’t run automatically, you can type them into the terminal yourself.

7. When the web application has successfully started, you will see a message in your terminal saying that the server is running at port 1234 within your Codespace:

The localhost link will be a github.dev link in your broswer.

Note: NPM is the Node Package Manager, it makes it easy for developers to download and install packages (collections of code) that other developers have created and shared and use them in their own projects.

Event Question: “Can we share the link we get at this point?”

Answer: No, the link you get at this point is only a local instance of your website, meaning it can only work within your own computer. Imagine you have a book on your bookshelf at home. You can read the book whenever you want, but if a friend wants to borrow the book, they cannot do so unless you physically hand the book to them. Similarly, a localhost link is like a book on your personal bookshelf — it is only accessible from your own computer and cannot be shared with others unless you physically transfer the file or deploy the website to a public server (Azure and GitHub in our case). That is why we deploy our site using Azure Static Web Apps and GitHub Pages.

Step 4: Customize your site 🤩!

1️⃣ Add your “about me” and social accounts

Within App.jsx you will see a variable called siteProps. This is a JavaScript object (an instance of a real-world object like a Jeep, cat or door) that holds the key value pairs needed to customize your name, title, email, and social accounts. Edit the values to suit your description, e.g.: changing the name value from “Alexandrie Grenier” to “Sarah Solarin”. The name and title values will be displayed at the top of your page.

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "microsoft",
};

2️⃣ Update images

This portfolio site includes 3 images: top section (Home) background, “About me” background and portfolio section (desk). For this event, we only edited the image in the ‘Home’ section.
If you’ve been able to get the site up and running, you should see that the first thing that stands out is the image of a woman holding a laptop in the Home section. You might want to edit this to an image of you.
Inside your src folder, there is an ‘images’ folder that contains the images the website uses (src > images). You could add your image using the ‘Add file’ icon in the left top hand corner of your Codespace, it should look like this:

You could also drag and drop your new image into the images folder.

Once you’ve gotten the image you would like to use, go to the Home.jsx file in Components folder located in the src folder (src > Components > Home.jsx) to update the image as well as the alt text for the image i.e. text that appears when an image doesn’t successfully load:

Home.jsx — section at top of the page, main image you will see when site loads (woman standing by server wall.)

import image from "../images/server-wall.jpg";
const imageAltText = "woman holding laptop standing by server room with glass wall";

My image name was ‘Sarah’s Photo.jpeg’ so I simply changed the import line to be:

import image from "../images/Sarah's Photo.jpeg";

This loaded my picture on the Home section of the portfolio website.

3️⃣ Add projects you’ve worked on or any online details you’d like to share 🧑‍💻

If you have any projects or information you would like to share, the Portfolio section is the place to do so. It could be a blog, event, project, website, services page or anything else you can think of.

Go to Portfolio.jsx then the projectList variable. This is a JavaScript array of objects. Each item you want to highlight needs a: title, description, and URL.

The sample design has 4, but the number you include is up to you.

const projectList = [
  {
    title: "10 Things to know about Azure Static Web Apps 🎉",
    description: "Collaboration to create a beginner friendly....",
    url: "https://dev.to/azure/10-things-to-know-about-azure-static-web-apps-3n4i",
  },
  {
    title: "Web Development for Beginners",
    description: "Contributed sketch note imagery to accompany...",
    url: "https://github.com/microsoft/web-dev-for-beginners",
  },
  {
    title: "My Resume Site",
    description: "Created from Microsoft's resume workshop...",
    url: "https://github.com/microsoft/workshop-library/tree/main/full/build-resume-website",
  },
  {
    title: "GitHub Codespaces and GitHub.dev",
    description: "Video interview to explain when to use GitHub.dev...",
    url: "https://www.youtube.com/watch?v=c3hHhRME_XI",
  },
];

You can replace this section with any of your projects and links. For example, this was how I edited mine:

const projectList = [
  {
    title: "gRPC Kafka Messaging System 🎉",
    description:
      "gRPC-based messaging system built using NestJS and Apache Kafka. The project provides a simple and scalable solution for communicating between different services in a distributed system. It uses gRPC for reliable and efficient communication between services. ",
    url: "https://github.com/Tu-Code/Nestjs-Kafka",
  },
  {
    title: "P2P Paystack Wallet API",
    description:
      "The P2P wallet system is a fast, secure and easy way to make use of this web application; it enables users fund their personal accounts and transfer to other users within the system. This application utilizes the PayStack API.",
    url: "https://github.com/Tu-Code/P2P-Wallet.git ",
  },
  {
    title: " User Management CRUD API with UI",
    description:
      " User Management CRUD API with Front-end UI for easier User Experience. Tools used: MongoDB, Mongoose, Node.js, Express, Vue.js, HTML, CSS, Bootstrap.",
    url: "https://github.com/Tu-Code/User-Management ",
  },
  {
    title: "ILuvCoffee CRUD API",
    description:
      "It allows users to Create, Read, Update, and Delete (CRUD) coffee data using gRPC, a high-performance open-source RPC framework. The project aims to provide a simple and efficient solution for managing coffee data in a distributed system.",
    url: "https://github.com/Tu-Code/Iluvcoffee",
  },
];

Event Question: “Do we have to make use of this template before being able to use GitHub Codespaces or Azure hosting?”

Answer: No, you don’t! You could write your code from scratch, make use of any other template or even make use of a previously exiting project. It doesn’t even have to be a portfolio website. You can host whatever you want!

Step 5: Putting your Portfolio website on the internet 🚀!

We’re done editing the site! Time to host it on the internet.

1️⃣ Deploying Your Site On Azure Static Web Apps

Click the Azure icon in the left sidebar. Log in if you are not already, and if new to Azure, follow the prompts to create your account.
From the Azure menu click “+” sign and then “Create Static Web App”.
If you are not logged into GitHub you will be prompted to log in. If you have any pending file changes you will then be prompted to commit those changes.
✨ Run the “git add .” command to stage the changes you’ve made to all your files — Saving all the changes you just made.
✨ Run the “git commit -m ‘Added personal information to website’” command to commit the changes with your message — Git takes a snapshot of the changes you have made to your files since the last commit and saves it as a new version. This version is assigned a unique identifier, called a commit ID, that allows Git to keep track of all the different versions of your files over time.
✨ Run the “git push” command to push the changes to your remote repository on GitHub — If you return to your GitHub repository and reload your page, you should see that it has now taken note of all changes you made.
Set your application information when prompted:
✨ Region: pick the one closest to you — Geographical location closest to you.
✨ Project structure: select “React” — You have chosen to use React as the main framework for building your application.
✨ Location of application code: / — Directory or folder where you have saved the code files for your application. In this case, the location is set to the root directory (/) of your application.
✨ Build location: dist — Directory or folder where the final build files of your application will be stored.
When complete you will see a notification at the bottom of your screen, and a new GitHub Action workflow will be added to your project. If you click “Open Action in GitHub” you will see the action that was created for you, and it is currently running.
Note: If you’d like to change the default link that Azure provides for your site. Here’s how.

1️⃣ Deploying Your Site On GitHub Pages

Open package.json and update the following values:
✨ homepage: set to http://{github-username}.github.io/{repo-name}, where github-username is your GitHub username and repo-name is the what you named this portfolio repo when you created it
✨ build-gh: replace github-username with your GitHub username and repo-name with the repository name
Commit and push those changes to package.json to your GitHub remote repo like we did for Azure Static Web Apps.
Open a new terminal from the menu or by pressing ctrl + shift + ` (or open top left menu, select “Terminal” and “New Terminal”)
Within the terminal window run npm run deploy. This will first run the pre-deploy script to build the project, followed by the deploy script that will push those bundled files to a new branch on your repo (gh-pages) that will be used for you GitHub Pages site.
When completed, within your repo, go to Settings and Pages. There you will see that a page has been set up to for you against the gh-pages branch, and you should see the URL (that should match the “homepage” value you set in package.json).

We have now successfully hosted our site on Azure Static Web Apps and GitHub Pages! These links are now accessible to everyone and are available on the internet 24/7. You can send your links to your friends and also to me on LinkedIn.

You can add them to your WhatsApp bio, LinkedIn contact section, Instagram page, Facebook profile, in messages you send to recruiters/employers and much more!

P.S, check out the GitHub Octernships to connect with industry partners in paid professional experiences and mentorship on Open Source and Software Development 😉.

If you have any questions, please feel reach out to me on LinkedIn!