DEV Community

Cover image for Static web apps, VS Code, streaming, and Azure
Kim ๐Ÿ™ƒ
Kim ๐Ÿ™ƒ

Posted on โ€ข Edited on

3 1

Static web apps, VS Code, streaming, and Azure

A week and a half ago I got to join @lizziepika from @Twilio to talk about devrel, community, web apps, and more. In that stream on #GreatHairCodeShare I showed Lizzie how to get started with static web apps on Azure using the Azure Static Web Apps service.

This is the write up I said I would do on how to leverage this service in Azure :) - to read the first half of the stream overview checkout my blog post here: What I learned streaming about Azure

The amazing web app I created for the demo: https://github.com/kim-codes/lizzie-demo (that was a joke - it's a very basic web app)

You can watch the stream here: https://www.twitch.tv/videos/730261909
The Azure Static Web Apps demo starts at around 34 minutes :)

In the stream, part 1 I walk through creating a fake web app from scratch (with minimal HTML, CSS, and JavaScript), I then push my code to GitHub. I setup Static WebApps in Azure through the VS Code extension. I never have to leave VS Code (this assumes I already setup my Azure account with VS Code - I have done this previously when setting up Azure Functions).

In the initial setup of Azure Static Web Apps it creates a GitHub Action for me on my repo to monitor my main branch for changes. This GitHub Action then triggers in Azure to build my app to production (having built my app from the GitHub repo). Again, all this is done without leaving VS Code.

Screenshot of VS Code editor

In part 2, around 50 minutes into the stream, I create an API with Azure Functions and I edit my app to call the API. I push the changes to GitHub which then automatically builds and deploys my app to Azure and the changes are reflected in my production site. Also, all done from VS Code!

screenshot of testing the api

Scenario: the scenario may be that you have some web app, built with some fancy JavaScript framework, that you need to ensure is secured and which calls an api that you also want to ensure is secured. You also want it to be globally available (basically put your content closer to users) and you want it to publish automatically. So - what you'll do is host your code on GitHub, enable GitHub Actions (done through the setup of Azure Static Web Apps), the GitHub Action will monitor your repo for changes and automatically build and deploy your app (and API with Azure Functions) to Azure and be served to your users.

For those asking - Azure Static Web Apps supports JavaScript and TypeScript front-end apps including frameworks like Vue.js, React, Angular, and others.

Let me know how you liked the stream and if you've tried Azure Static Web Apps!

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 more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

๐Ÿ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay