Building Star Wars Crawler with Azure Static Web Apps - Part 3

Glaucia Lemos - May 2 '22 - - Dev Community

Deploying the Application to Azure Static Web Apps

We have our application working locally now, nothing better than making it available to the world so that we can show everyone what we have developed.

In this case we are going to use Azure Static Web Apps.

But firstly, what is Azure Static Web Apps? Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository. Belo you can see the whole workflow around the ASWA:

image-aswa-workflow.png

And we're going to deploy our application using directly in the Visual Studio Code using the extension:

Open up VS Code and let's get into the Azure Portal right there! Click on the Azure icon and sign in with your Azure account:

Screen-Shot-04-18-22-at-01-42-PM.png

Go to the Create Static Web App with a + sign:

Screen-Shot-04-18-22-at-01-57-PM.png

Now, follow these steps:

  1. Include a app name. Ex.: intro-starwars-app
  2. Select a region for hosting our app.
  3. Now, choose the build preset to configure default project structure. In this case we are not using frameworks. Just JavaScript, HTML and CSS. In this case choose: custom
  4. Now we need to include the location of our application. For our application will be: /public
  5. The final step is to include the location of our build output. In this case, remove build and leave blank

A box will open, click on the link: Open Actions in GitHub

Screen-Shot-04-18-22-at-04-44-PM.png

Once you click it, you will be redirected to the GitHub Actions repository page showing the entire build workflow (C.I and C.D).

Screen-Shot-04-18-22-at-04-52-PM.png

Now let's return to the Azure Static Web Apps Extension and right click on Browser Site

Screen-Shot-04-18-22-at-04-54-PM.png

And see the app in action!

star-wars-intro.gif

If you want, you can see the deployed application HERE - Star Wars Intro App

Final Words

Today we have learned how to create a Star Wars Intro App using: HTML, CSS and JavaScript/Node.js. And finally we hosted our application using the Azure Static Web Apps service.

Here I would like to let some good resources about Azure Static Web Apps & GitHub Actions:

And to stay on top of several other news, be sure to follow me on Twitter!

Twitter

And subscribe on my Youtube Channel - Glaucia Lemos to see weekly new videos about Web Development, Node.js & JavaScript!

Screen-Shot-12-31-20-at-01-06-AM.png

See you! 😍

Image
The Tower of Hanoi Algorithm in Java: A Detailed Guide

webdev, beginners, programming, tutorial
Image
Eureka and Consul - Service Discovery Tools

api, springboot, k8, kubernetes
Image
Come Aggiungere Stili CSS a una Pagina HTML: Guida per Principianti | How to Add CSS Styles to an HTML Page: A Beginner's Guide

html, css, webdev, beginners
Image
Open Plots in Meerkhanpet
Image
Fantasy Sports Software

fantasysportssoftware, sportsappsoftware, fantasy, fantasyappsoftware
Image
Drupal 9 to 10 Migration Services

drupal, drupal10, drupalcommunity, acquia
Image
100k TPS with Rollups: What’s Working and What Are We Missing?

rollups
Image
Upgrade Ruby using dual boot

ruby, rails, webdev, devops
Image
🎉 iPhone 15 Pro Max Giveaway! 📱🎊
Image
Unleashing the Full Potential of Neo4j and LangChain in Knowledge Graphs

langchain, neo4j, graphql, cypher
Image
Open Plots in Meerkhanpet
Image
How to create a password strength meter with Tailwind CSS and JavaScript

javascript, tailwindcss, tutorial
Image
mjs vs cjs with Event Loop

node, javascript, webdev
Image
Appium With Java: A Comprehensive Guide

appium, appiumwithjava, automationtesting, java
Image
Open Plots in Gummadivalli
Image
Discover Bangkok’s Nightlife with a Tuk Tuk and Food Tour

tuktukinbangkok, tuktukridesinbangkok, tuktuknighttourinbangkok, tuktukfoodtourinbangkok
Image
credo system
Image
Do You Really Need a Salesforce Data Analyst?

blog, howto
Image
How to Convert SDFT to DOCX: A Step-by-Step Guide

csharp, dotnet, programming, development
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player