Building Applications with Astro Build & Azure Static Web Apps CLI!

In May 2021 Azure Static Web Apps was released. A service that allows you to automatically deploy Full Stack applications (from the Back-End to the Front-End) completely free of charge on Azure from the GitHub repository.

The most interesting thing about Azure Static Web Apps is that this service integrates perfectly to host your application or static content globally and in a distributed way, on the Back-End side, creating API's using the Azure Functions service, including authentication resources, custom routing and even route-based authorization!
And best of all: hosting for free!

But, what is the Azure Static Web Apps CLI?!

Well, today's focus will be on a tool linked to this service that will allow you to locally emulate your static applications very quickly and dynamically: Azure Static Web Apps CLI!

According to the Azure Static Web Apps CLI tool repository with SWA CLI you can:

• ✅ Serve static app assets, or proxy to your app dev server
• ✅ Serve API requests, or proxy to APIs running in Azure Functions Core Tools
• ✅ Emulate authentication and authorization
• ✅ Emulate Static Web Apps configuration, including routing

Another important point to mention here is that you can emulate any static project or a Front-End application structure, whether it be:

• ✅ React
• ✅ Angular
• ✅ Svelte
• ✅ Vue
• ✅ Next.js
• ✅ Blazor/WebAssembly!

Fine! Talking is good! But it's so much better when we have DEMOS! So, let's code now and run a very simple demo of how we can use this tool locally!

Demo Time!

First thing we need to do is install Node.js! Always try to install the LTS version!

In this demo, I'll use a new framework that could be a big trend in the development world: Astro Build.

I won't be going into details about this framework, because that's not the focus of this article. But if you would like to know more, you can watch the video below:

To speed up our demo a little more, I created a template project that I kindly ask you to download or git clone it:

git clone https://github.com/glaucia86/astro-swa-demo.git

If you wish, you can make the necessary modifications. Like, change images and other stuff! I highly recommend when you start a new Astro project, choose the option: Portfolio. You will have this same template to start with, maybe a new static portfolio site!

Go to the astro-demo folder and install the packages locally using the command:

npm install

Type the npm start command to start the project. Open the browser to the page: http://localhost:3000/

If you see it as shown in the image below, it's because everything worked just fine!

Now let's go to the next step! Open your command line and type the command:

npm install -g @azure/static-web-apps-cli

Create a folder so we can test this tool. In my case, I created a folder with the following name:

mkdir swa-cli-demo

Now comes the coolest part, where just with the command line you can create an example static page. To do so, run the command below:

swa start http://localhost:3000 --run "npm start"

Now open the browser to http://localhost:4280/.

What does this mean to us? In fact, we are emulating the Azure Static Web Apps server. From this endpoint, we can even test Back-End APIs with this endpoint or even simulate an integrated login authentication. Since Azure Static Web Apps supports this. (More information HERE)

Cool! Isn't it?

Deploying the application using Vs Code!

To perform the steps below, you need to allocate your project on GitHub and have a free Azure account!

Now let's deploy this application using the Azure Static Web Apps extension in Visual Studio Code!

You can download the Azure Static Web Apps extension for VS Code HERE

Now open the project in Visual Studio Code and let's follow these steps:

Step 01:

Click in the + button as shown in the image below:

Step 02:

Here you should define the application name. The name must be unique!

Step 03:

As Astro is not yet listed in the extension, let's choose the custom option:

Step 04:

Here we will be defining the location of our application. Be very careful, if your application (project root) is in some subfolder (which is my case). In this example, from my project, the root of the project is in the astro-demo folder

Step 05:

And, finally, we have to define where the Astro artifact files are being generated. According to the documentation, it is located in the dist folder (for different frameworks there are different artifact folders. To learn more, click HERE)

Step 06:

Then it will open a box that will take you to the next step (i.e. the GitHub repository)

Step 07:

Now we will be taken to the project repository website, it will show a folder containing a yaml file and in addition, an action being executed by GitHub.

Step 08:

There is now a job action running there! This demonstrates that our application is communicating with the Azure platform and, in addition, creating a C.I and C.D belt for us!

Step 09:

In case everything works out! Now let's go to the last step!

Step 10:

Switch back to Visual Studio Code and open the SWA extension again. And, look for the newly created application! Right click on: browser site

Now open the browser! And, you will see your project available globally and ready for everyone to see!

You can see a online version: HERE

Final Words!

Azure Static Web Apps helps and facilitates us when we want to deploy static applications in a way: simple, fast and dynamic! And the best part about it all - integrated with GitHub Actions! Thus creating a treadmill of C.I and C.D automatically for us! Fantastic, isn't it?!

If you want to know more or even try this service for free, I highly recommend the courses below:

• ✅ Azure Static Web Apps documentation

• ✅ Free Course - Build applications with Azure DevOps

• ✅ Free Course - Publish an Angular, React, Svelte, or Vue JavaScript app with Azure Static Web Apps

• ✅ Free Course - Create and publish a static web app with Gatsby and Azure Static Web Apps

• ✅ Tutorial: Publish a Gatsby site to Azure Static Web Apps

• ✅ Tutorial: Publish a Hugo site to Azure Static Web Apps

• ✅ Tutorial: Publish a VuePress site to Azure Static Web Apps

• ✅ Deploy static-rendered Next.js websites on Azure Static Web Apps

• ✅ Deploy server-rendered Nuxt.js websites on Azure Static Web Apps

• ✅ Tutorial: Publish a Jekyll site to Azure Static Web Apps

And to stay up to date with many other news, be sure to follow me on twitter!

See ya! 😍