Deploy a Gridsome App on Azure Static Web Apps

Gift Egwuenu - Jun 9 '20 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now run your app locally with the command.

npm run develop
Enter fullscreen mode Exit fullscreen mode

screenshot of gridsome blog

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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

setting up azure static web apps

  • Search for Static Web Apps and click create

setting up azure static web apps

  • 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.

setting up azure static web apps

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

setting up azure static web apps

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

setting up azure static web apps

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.

setting up azure static web apps

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

setting up azure static web apps

setting up azure static web apps

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

setting up azure static web apps

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🎉

Deployed version of the blog

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.

Originally published on my blog

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .