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

In Might 2021 Azure Static Web Apps was launched. A service that lets you robotically deploy Full Stack purposes (from the Again-Finish to the Entrance-Finish) utterly freed from cost on Azure from the GitHub repository.

Probably the most fascinating factor about Azure Static Web Apps is that this service integrates completely to host your software or static content material globally and in a distributed method, on the Again-Finish aspect, creating API’s utilizing the Azure Functions service, together with authentication resources, customized routing and even route-based authorization!
And better of all: hosting for free!



However, what’s the Azure Static Net Apps CLI?!

Effectively, at the moment’s focus will probably be on a software linked to this service that can will let you domestically emulate your static purposes in a short time and dynamically: Azure Static Web Apps CLI!

Azure Static Net Apps CLI ✨

Azure Static Net Apps CLI (preview)

The Static Net Apps CLI, often known as SWA CLI, serves as a neighborhood improvement software for Azure Static Web Apps. It may possibly:

  • Serve static app belongings, or proxy to your app dev server
  • ServeΒ API requests, or proxy to APIs working in Azure Features Core Instruments
  • Emulate authentication and authorization
  • Emulate Static Net Apps configuration, together with routing

Static Net Apps CLI is in preview. When you’ve got ideas otherwise you encounter points, please report them or assist us repair them. Your contributions are very a lot appreciated. πŸ™

The CLI emulates generally used capabilities of the Azure Static Net Apps cloud service. Some variations are anticipated. At all times deploy and check your apps in Azure to verify habits.

Quickstart

Utilizing npm or yarn:

  • Set up the cli
    npm set up -g @azure/static-web-apps-cli
    Enter fullscreen mode

    Exit fullscreen mode

  • Open a SWA app folder on the root (exterior any /api or /app…

In line with the Azure Static Web Apps CLI software repository with SWA CLI you may:

  • βœ… Serve static app belongings, or proxy to your app dev server
  • βœ… Serve API requests, or proxy to APIs working in Azure Features Core Instruments
  • βœ… Emulate authentication and authorization
  • βœ… Emulate Static Net Apps configuration, together with routing

One other essential level to say right here is that you would be able to emulate any static venture or a Entrance-Finish software construction, whether or not it’s:

  • βœ… React
  • βœ… Angular
  • βœ… Svelte
  • βœ… Vue
  • βœ… Subsequent.js
  • βœ… Blazor/WebAssembly!

Effective! Speaking is nice! But it surely’s so significantly better when we’ve DEMOS! So, let’s code now and run a quite simple demo of how we will use this software domestically!



Demo Time!

Very first thing we have to do is set up Node.js! At all times attempt to set up the LTS model!

On this demo, I will be utilizing a brand new framework that could possibly be an enormous pattern within the improvement world: Astro Build.

I will not be going into particulars about this framework, as a result of that is not the main target of this text. However if you want to know extra, you may watch the video under:


To hurry up our demo just a little extra, I created a template venture that I kindly ask you to obtain or git clone it:

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

Exit fullscreen mode

If you want, you may make the mandatory modifications. Like, change pictures and different stuff! I extremely suggest if you begin a brand new Astro venture, select the choice: Portfolio. You should have this similar template to begin with, perhaps a brand new static portfolio website!

Go to the astro-demo folder and set up the packages domestically utilizing the command:

npm set up
Enter fullscreen mode

Exit fullscreen mode

Sort the npm begin command to begin the venture. Open the browser to the web page: http://localhost:3000/

If you happen to see it as proven within the picture under, it is as a result of every little thing labored simply advantageous!

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

Now let’s go to the subsequent step! Open your command line and sort the command:

npm set up -g @azure/static-web-apps-cli
Enter fullscreen mode

Exit fullscreen mode

Create a folder so we will check this software. In my case, I created a folder with the next title:

mkdir swa-cli-demo
Enter fullscreen mode

Exit fullscreen mode

Now comes the best half, the place simply with the command line you may create an instance static web page. To take action, run the command under:

swa begin http://localhost:3000 --run "npm begin"
Enter fullscreen mode

Exit fullscreen mode

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

What does this imply to us? Actually, we’re emulating the Azure Static Net Apps server. From this endpoint, we will even check Again-Finish APIs with this endpoint and even simulate an built-in login authentication. Since Azure Static Net Apps helps this. (Extra info HERE)

Cool! Is not it?



Deploying the appliance utilizing Vs Code!

To carry out the steps under, it’s good to allocate your venture on GitHub and have a free Azure account!

Now let’s deploy this software utilizing the Azure Static Net Apps extension in Visual Studio Code!

You possibly can obtain the Azure Static Net Apps extension for VS Code HERE

Now open the venture in Visible Studio Code and let’s comply with these steps:



Step 01:

Click on within the + button as proven within the picture under:

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



Step 02:

Right here you must outline the appliance title. The title have to be distinctive!

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



Step 03:

As Astro shouldn’t be but listed within the extension, let’s select the customized choice:

step-02.png



Step 04:

Right here we will probably be defining the placement of our software. Be very cautious, in case your software (venture root) is in some subfolder (which is my case). On this instance, from my venture, the foundation of the venture is within the astro-demo folder

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



Step 05:

And, lastly, we’ve to outline the place the Astro artifact information are being generated. In line with the documentation, it’s situated within the dist folder (for various frameworks there are completely different artifact folders. To study extra, click on HERE)

step-03.png



Step 06:

Then it’ll open a field that can take you to the subsequent step (i.e. the GitHub repository)

step-06.png



Step 07:

Now we will probably be taken to the venture repository web site, it’ll present a folder containing a yaml file and as well as, an motion being executed by GitHub.

step-07.png



Step 08:

There’s now a job motion working there! This demonstrates that our software is speaking with the Azure platform and, as well as, making a C.I and C.D belt for us!

step-08.png



Step 09:

In case every little thing works out! Now let’s go to the final step!

step-09.png



Step 10:

Swap again to Visible Studio Code and open the SWA extension once more. And, search for the newly created software! Proper click on on: browser website

Now open the browser! And, you will notice your venture out there globally and prepared for everybody to see!

You possibly can see a on-line model: HERE

astro-swa-demo.gif



Remaining Phrases!

Azure Static Net Apps helps and facilitates us once we need to deploy static purposes in a method: easy, quick and dynamic! And the perfect half about all of it – built-in with GitHub Actions! Thus making a treadmill of C.I and C.D robotically for us! Unbelievable, is not it?!

If you wish to know extra and even do this service without spending a dime, I extremely suggest the programs under:

And to remain updated with many different information, you’ll want to comply with me on twitter!

Twitter

See ya! 😍



Add a Comment

Your email address will not be published. Required fields are marked *