DEV Community

Glaucia Lemos for Microsoft Azure

Posted on • Updated on

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.

swa-overview.png

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!

GitHub logo Azure / static-web-apps-cli

Azure Static Web Apps CLI ✨

Azure Static Web Apps CLI

NPM version Node version CI status Contributions welcome

logo

The Static Web Apps CLI, also known as SWA CLI, serves as a local development tool for Azure Static Web Apps. It 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 and ACL roles
  • Deploy your app to Azure Static Web Apps

Important Notes

If you have suggestions or you encounter issues, please report them or help us fix them. Your contributions are very much appreciated. πŸ™

The CLI emulates commonly used capabilities of the Azure Static Web Apps cloud service. Some differences are expected. Always deploy and test your apps in Azure to confirm behavior.

Quickstart

Installing the CLI with npm, yarn or pnpm:

  • To install the CLI globally, use:

    npm install -g @azure/static-web-apps-cli
    Enter fullscreen mode Exit fullscreen mode
    …

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Captura-de-Tela-2021-08-03-a-s-23-43-51.png

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

npm install -g @azure/static-web-apps-cli
Enter fullscreen mode Exit fullscreen mode

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

mkdir swa-cli-demo
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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:

Captura-de-Tela-2021-08-04-a-s-01-15-35.png

Step 02:

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

Captura-de-Tela-2021-08-04-a-s-01-21-19.png

Step 03:

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

step-02.png

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

Captura-de-Tela-2021-08-04-a-s-01-27-59.png

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-03.png

Step 06:

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

step-06.png

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-07.png

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-08.png

Step 09:

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

step-09.png

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

astro-swa-demo.gif

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:

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

Twitter

See ya! 😍

Discussion (0)