As you might expect, we'll need a few tools and accounts to get started. Once those are setup, we can focus on setting up our starting site and get to the fun part - coding!
- Install tooling
- Generate the starter site
- Create your Azure Static Web App
Azure Static Web Apps integrates with GitHub via GitHub Actions. As such, we'll need both Azure and GitHub accounts. If you're a student, there are a host of free services available with Azure for Students!
- Sign up for GitHub Student Developer Pack, which grants access to GitHub Pro for free and numerous third party offers
- Sign up for Azure for Students, which includes $100 in free credit you can use over the course of the year, and access to several free services
- If you're not a student, you can still access $200 on Azure (valid for 30 days)
We're going to use Visual Studio Code as our development environment. With Code you're able to write apps using whatever language and framework you choose. There's also a robust marketplace which includes some wonderful extensions, including a few we're going to take advantage of.
- Git (if not already installed)
- Node.js version 12
- Only version 12 is supported at the time of this writing
- Azure Functions Core Tools
- Install Visual Studio Code (if not already installed)
- Install extensions
- Azure Functions, which we'll use to add server-side resources
- Azure Static Web Apps, which we'll use to create our Static Web App
- Azure Databases, which we'll use to manage our database
- Live Server, a wonderful extension for local development
To streamline the creation of your app we've created a template with code ready for you to use! You'll create a new repository on GitHub based on this template.
- Navigate to the GitHub template
- Name your new repository
- Click Create repository from template
With the repository created, let's clone the code locally and open it in Visual Studio Code.Open a command-line or terminal window and execute the following commands.
NOTE: Replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub account name and <YOUR_REPOSITORY_NAME> with the name of your repository)
git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/<YOUR_REPOSITORY_NAME>
cd <YOUR_REPOSITORY_NAME>
code .Let's setup our deployment! Azure Static Web Apps manages deployment by using a GitHub Action. In a nutshell, every time you push or merge new code into your main branch a script will run to redeploy your code. We're going to use Visual Studio Code to set everything up in Azure.
- Start by clicking the Azure icon on your toolbar
- In the STATIC WEB APPS section, sign in to both GitHub and Azure as prompted
- Click Create Static Web App
IMPORTANT Make sure there is no forward slash (/) in front of public when setting the location of client code
- In the dialog box, provide the following information as prompted
- Name of your site
- Name of the branch (main by default)
- custom for the build preset
- public for the location of your app
- api for the location of your Azure Functions code
- Empty the location of your client code (it's already built, so no special folder is needed)
- Choose a region near you
Congratulations! You've now created and deployed your site! The deployment process will take just a couple of minutes.
After a couple of minutes have passed, right click your new site in the Static Web Apps extension and select Browse Site. You can see your site live!
You will receive a message on the site about configuring your database, which is our next step!.
NOTE: You will notice the URL is set to a random couple of words followed by a hex value. Fortunately, you can setup your own custom domain.