DEV Community

Cover image for #07: Deploying Static Web Apps
Nitya Narasimhan for Microsoft Azure

Posted on • Updated on • Originally published at azurestaticwebapps.dev

#07: Deploying Static Web Apps

Welcome to Week 1, Day 7 of #30DaysOfSWA!!

You made it this far! Give yourself a pat on your back already! 😊

By now, we have learnt what Static Web Apps is, and how to build, add APIs and configure the application. We’ve also deployed a couple of fun apps as a tribute to Star Wars! But we’ve so far explored deploying using the Github Actions path.

  • What if we want some other CI/CD tool?
  • What if our project resides safely in an Azure DevOps repository?
  • What if we don’t want a CI/CD solution AT ALL?

Fear not! Because today we’re gonna explore other ways of deploying a Static Web App on Azure 😊

What We'll Cover

  • Deploy With Azure DevOps
  • Deploy From GitLab and BitBucket
  • Deploy Using ARM Template
  • Exercise: Explore the ARM Tools VS Code Extension

Deploy with Azure DevOps

Deploying using Azure pipelines CI/CD has never been easier!

Static Web Apps supports projects which are stored in Azure repos and helps in creating a smooth CI/CD pipeline to automatically trigger the changes on every commit to the main branch. What more? With the latest changes checked in for Azure DevOps, we can now set up the azure pipeline via Portal with a single click! Here’s a quick video demonstrating how to use DevOps as a pipeline, as well as touching on the numerous other enhancements brought in off-late, such as stable staging environments, password protected websites, build and deploy split, and lots more! 😊


Deploy via GitLab and BitBucket

But what if we wanted a third-party Provider? Static Web Apps as of today officially supports CI/CD pipelines from GitLab and BitBucket! We just have to follow a few simple steps as discussed in the documentation for both GitLab and BitBucket, and voila! We’ll have a beautifully configured pipeline which takes care of the automatic trigger on commits for us. Isn’t this beautiful? 😊


Deploy using ARM Template

For the CLI lovers out there, we can also deploy in Static Web Apps using ARM Templates! The ARM - or Azure Resource Manager Template - is used in preparing the workflow template. On deploying the ARM Template to Azure Static Web Apps, it triggers the Github Actions, which further takes care of our CI/CD needs. Do check out the exercise later in the blog for a quick hands-on using ARM Templates!

But what about .. deploying without a CI/CD??

Suppose we want a one-time deployment solution? Or we don’t want to depend on a CI/CD tool at all! No worries! We have you covered! Wonder how that is supported? Stay tuned to the #30DaysOfSWA series and discover the new upcoming features to enable this! 😉 <3<3


What's Next?

This concludes Week 1 of the #30DaysOfSWA with a focus on "Core Concepts". Join us for the upcoming week focused on "Usage Examples" where we look at how Azure Static Web Apps can be used with various static site generators and front-end frameworks, to create applications that showcase a wide range of user experiences.


Resources

Now that we’ve explored the alternatives we have, let’s go have some fun with it!! Here are a few quickstarts you can try out!

  1. Deploy using BitBucket
  2. Deploy using GitLab
  3. Deploy using Azure DevOps and Portal Quickstart
  4. Use an ARM template quickstart

Discussion (2)

Collapse
lacmansoftware profile image
lacmansoftware

Thank you for your posting.
That's very useful for developers.
And I have an experience in deploying website to heroku.com.
Have you ever done before with heroku?
It's also useful for developers.
I'd like you to describe about this more and your post will become more useful and
beloved.
Thank you.

Collapse
reshmisriram profile image
Reshmi

Hey @lacmansoftware!
Glad you liked the content :) Yes, I have tried a couple of apps in Heroku as well. But if you are looking for an integration with Heroku and Static Web Apps - I am afraid that's not something we do. Heroku is a full-fledged app-hosting cloud service which comes at par with our sister product - Azure App Services. But they do not have the additional provision of breaking the application down to the static and serverless contents while hosting (which is where Azure Static Web Apps comes into picture). I'd highly recommend you try hosting your application via Static Web Apps for FREE and then compare and see how well it suits your needs :)

Wish you Godspeed! :)