Deploy a Gridsome App on Azure Static Web Apps

Microsoft Build happened a few weeks back, among the various exciting news, one of my favorite ones was the newly unveiled Azure Static Web Apps. I'm excited to give it a try and show you how to deploy a Gridsome web application. There's already enough tutorials about this why write more? Well, because I couldn't find one with a Gridsome example and I decided to take on the opportunity, there's never enough written tutorials on a subject.

What is Azure Static Web Apps?

Azure Static Web Apps is a service that automatically builds and deploys full-stack web apps to Azure from a GitHub repository.

These are some of the features it ships with out of the box:

• Free web hosting
• Free SSL Certificates
• Authentication Integrations
• Custom Domains
• Globally distributed

Here's a more detailed guide on how Azure Static Web Apps Works.

In this tutorial, We'll go over how to deploy a static website to Azure using the Static Web Apps service. For this example, I have a Gridsome app I'll like to deploy to this service, and I'll walk through how to set up and deploy my app.

Prerequisites

To follow this guide, you need to have basic knowledge of Vue.js, have an Azure account, Node.js installed, and a GitHub account handy.

Step 1:

Install Gridsome CLI tool:

npm install --global @gridsome/cli

Step 2:

I’m using a starter project I created to get things moving fast here. Go ahead and run the command to create a new Gridsome project.

gridsome create my-blog https://github.com/lauragift21/gridsome-minimal-blog

Now run your app locally with the command.

npm run develop

Step 3:

We have our Gridsome application up and running, Let's push the app to GitHub we'll do so using the following commands:

git add.

git commit -m 'my new gridsome blog'

Next, create a repository on GitHub called my-fancy-blog or use any fancy name you want and run the following commands:

git remote add origin git@github.com:<YOUR-USER-NAME>/my-fancy-blog.git`

git push -u origin master

We've now added our application to GitHub successfully. Let's move on to the last step.

Step 4:

This is where we deploy the web app on Azure Static Web Apps.

You need to have an active Azure account to follow these next steps.

• Login to your Azure account and navigate to Azure Portal
• Click on create a resource

• Search for Static Web Apps and click create

• Next, pick a subscription from the dropdown and pick a resource group in my case, I selected the default subscription and created a new resource group.
• Give your app a name and choose a region that’s closest to you.
• Click on the sign in with the GitHub button. It'll enable you to connect your repository to Azure Static Web Apps.

• Once you have GitHub connected, you can choose your GitHub repository and choose the branch you want to deploy.

• Specify a folder location to store static output in my case I’m using the dist directory.

Azure sets up a default npm run build in my GitHub actions workflow which can be customized to a different command. In my case, I didn't need to set that up since it's the default command.

In the last step, we can review our configuration to make sure we have everything set up correctly and click create to get the app deployed.

That's it! You'll get redirected to a page showing your app deployment is ongoing.

• To check how things are working under the hood, Log on to GitHub and check the actions tab on your repo.

You should see the actions running, and when that ends, your app should be live. Check back on the Azure portal you should see a browse button by clicking on it will take you to your deployed app🎉

Conclusion

That was fun! I'm quite impressed with how straightforward it was to get this working. In just a few clicks, I deployed version of my site. If you're interested in learning more about how to deploy another kind of application, The Azure team has a well-documented guide on how to do that. I hope this was helpful as much I enjoyed writing and trying out Azure Static Web Apps.