DEV Community

Ghassan Karwchan
Ghassan Karwchan

Posted on • Edited on

3

Deploy A Single Page Application to Azure Static Webapp using TeamCity, Jenkins or any CI, or command line.

I was trying to setup a deployment for an SPA application to an Azure Static Web app using TeamCity, but most of the tutorials I found was doing the deployment through CI/CD of Github's Actions by monitoring a specific branch of a Github repository and deploy automatically whenever we check in into that branch, or the other alternative is using Azure DevOps pipeline.
But what if we don't want to use neither, and instead we need to do it on demand from TeamCity, or any other CI/CD tool?

I found a tool created by Microsoft which provides cli support to manage and deploy to static website.

The tool called Azure Static web app CLI.

The tool provides more than deployment functionality, but has lots of features to emulate authentication, and provide proxy for the API calls from the static web site.

But in this post we will only talk about the deployment using that tool:

  1. install the tool using npm
npm install -g @azure/static-web-apps-cli
Enter fullscreen mode Exit fullscreen mode
  1. login using the command to login to your azure subscription and connect to existing static web app. If you don't have an app yet, then just ignore the app-name argument, and the tool will create a new app for you.
swa login --subscription-id <subscription> --resource-group <group name> --app-name <the app-name> 
Enter fullscreen mode Exit fullscreen mode
  1. navigate to the folder that has the production static files, for example let's assume our deployment files are in folder dist.

  2. if you want to deploy to a new static web app, then just do:

swa deploy ./dist
Enter fullscreen mode Exit fullscreen mode

This will ask you about the name of the new app, and will create it.

In case you want to deploy to an existing static web app, then first you need to get that application token by doing this

az staticwebapp secrets list --name <the name of your app> --query "properties"
Enter fullscreen mode Exit fullscreen mode

This will display a json as follows:

{
  "apiKey": "cf........700f62213"
}
Enter fullscreen mode Exit fullscreen mode

the apikey is the token.

Then run the following:

swa deploy ./dist --deployment-token <the token> 
Enter fullscreen mode Exit fullscreen mode

You will get confirmation as follows:

Image description

This will not deploy to production, but to a preview environment.

So the URL will be the same URL of your static web app, but tailed with "preview".

This feature will give you a chance to check your app, before going to production.

To deploy to production you add --env production to the previous command , so it will be

swa deploy ./dist --deployment-token <token> --env production
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay