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.
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:
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.
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.
Install Gridsome CLI tool:
npm install --global @gridsome/cli
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
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.
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.
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.
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🎉
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.