Publish Blazor WebAssembly with PWA in Azure Static Apps using GitHub Actions Step by Step

Introduction

Most people adopt mobile devices for their purchase, reading, watching videos, movies and etc. Building mobile apps for their customers, it much cost for small business. At the time, Progressive Web Apps comes out with excellent features with different facilities. I do not say, PWA gives 100 percent native performance but gives good performance and different features also and today popular websites main success is PWA.because it works like a mobile app with its own window and you can add like app into your device home screen and performing like native apps. now days almost all the trending applications have PWA support, some of them below.

1. Outlook
2. Youtube
3. Spotify
4. AliExpress
5. Flipkart
6. Twitter
7. BookMyShow
8. Pinterest

The next question in our mind is What is PWA and how it works?

Progressive Web Apps are websites but they look and feel like apps but you don't need to download them from any store, while you visiting, you have options to add to your home screen. This means users can access all information and capabilities in-app window. It helps more for small businesses to increase engagement and visits.

Great benefits from PWA

• Less data uses
• Improves performance
• Faster loading times
• Engaging user experience
• Working offline with cached data
• Loading instantly
• Independent of network speed
• Running own window, not a browser window
• Add like native apps in device home screen, start menu, dock
• Notifications (Receiving notifications from backend server, even while the user isn't using the app(offline)
• Automatically updating the app in the background

For most apps push notification is the main success to engage the customers with new products and updated products.

Some real-world examples are

• If a new product arrived at the store, we will notify the user by sending a notification to users, people will react to that notification and to visiting our site. The product price reduction will send notifications to uses, then they may purchase.
• If you're a blogger, some content you published or updated the content, we will send the notification to the user, then the reader will come.

Because, every people including me, not visiting the product or blog regularly. cause of busy, If you send the notification, they might have to look at your content or site

Is notification supports all platforms?

Yes, it supports almost all the platforms.

In this demonstration, the Frontend framework is Blazor Web Assembly with PWA and backend Azure Functions with Cosmos Database with Github Actions for CI-CD.

Let start,

Create Github Repository

Go to Github prebuilt vanilla-basic template for Blazor and Azure Functions and click "use this template to create a new repository, after redirection, gives your repository name, and click create repository. After the Repository creations, create a new branch named development and then take the development branch clone to local and go to the cloned path, then create a new Empty Solution in the cloned path. 

Before creating a project, Open Azure Portal and Create a new Azure Static App and configure it with the GitHub repository we created before. Click "Create a resource" and select "Static Web App (Preview)" and select Subscription and Resource Group, then give Name, Region and by default, Github is selected and log in to your GitHub and select the repository you created before and select the master branch.

After the project creation, you will get a live url of your web app and click and browse your site.

Now, back to Visual Studio and right-click Solution Explorer and click Add New Project >> in the new window select Blazor WebAssembly App and check the PWA check box for the PWA and authentication type None and give name as Client else you need to configure Actions. 

In case you forgot check the PWA checkbox you can add later manually.

Now, design something in Index.razor page and run your app locally, I have created cards to show list out products

Next, add Azure Functions App in Same Solutions by going, right-click Solution and Add New Project >> Select Azure Functions and give named API.

For a backend we need data, so now return back to Azure Portal and create a new Azure Cosmos Database. In Azure Portal create a new resource under Databases select Azure Cosmos Database and give an account name and select API ( Cosmos database supports different APIs for query) and Location, then select Capacity Mode is Serverless, It's in Preview but loves this preview. Because it only billing when you use and More details about Serververss in Microsoft dev blog and account type. Now you can click the create button.

Once the database created, open Storage using Storage Explorer or use Storage Explorer to View and Edit Data. Then create a new database and container.

Now think all the applications have images. So we need to store those images also, but we choose Cosmos database it is much cost. So we need some blob storage. Azure Cosmos database provides the ability to query metadata and links to blobs stored in the blob storage. For creating Storage Account>> go-to resources and click Create a resource>> select Storage Account and give account name then click create. After that Create a new Container and set the access level Blob, so only you can interact from the web app else it won't allow you to read. Again, take blob storage Keys for upload images and create an Images container in Azure Blob Storage. 

 Everything setup is done in Azure. Now back to Visual Studio and Create a new Azure Function for Adding Product. For that go to Solution Explorer and Right Click the Api project and select add >> new Function >> in the window select HTTP Trigger named AddProduct.cs. In this function, we are adding the image first in blob storage, then we are adding, the Absolute url and Product in Azure Blob Storage. Below is the code for adding products. 

Add the Connection strings we kept from the Cosmos database and blob, add them into your local.setting.json file. While moving to live we need to store the connection string in the Static Web App Configuration. 

Now, Add another HttpTrigger for getting added products in the database. For that, go to Solution Explorer and right-click Add >> Azure Functions >> Select HTTP Trigger Set named GetProducts.The Code is below.

Now run the application the Api and in console check, all the function running

Ok, now our client and APIs are working fine locally, it time to move into production, already we have configured all the deployment setup. Now Push the code into the development branch and create a new Pull Request. After GitHub automatically runs the test automatically, If the test passed it notify the admin or maintainer to merge via mail and GitHub notification. 

After you click to merge the request it automatically shows the stage version of your live application with new changes

After the changes in the main branch, Github actions start building and deploying into Azure automatically

The default action automatically creates while you creating Static Web App. For deployment, you need a deployment key from Azure and storage the Key in Action secrets Under settings. You can get the from the Static Web App home page.

It takes a few min to build and deploy in life, The sites down in less than min. 

Now check app is  live below

In Azure Function we have the option to see the running Azure Function in Azure Portal.

Now back to Github and open .github folder >> workflows>>and  click .yml file. This is the configuration or pipeline configuration between the resource group and Azure Static Web Site. If you created the project name as a different name, update the configurations in app_location. 

we added a Database connection string in the local setting file, Now we need to same or new database connection string in the Static Web App Configuration. For that, open Azure Portal>>go to static web apps >> click configuration and new key values and click add. The key name must give what you have given locally, else Azure Function not able to contact the database

We have done all the development, now check app and APIs are working fine. The first check client app is working running and it running or not. Yeah, it running it also supports PWA and installing into local also.

Add new product using AddProduct Function App to test it working. it works perfectly, data has been added in Cosmos Database and Blob.

Next check our live APIs are working in Postman, because, we've set GetProduct API to also support only Post Request.

We did complete the web application, now we can see what other possibilities there.

Notification support

We can send a notification to the users who all subscribed. you must configure some settings in your Client and Server for saving the user tokens and for asking to subscribe notification also we need some keys to send notification from the server-side. For sending PWA notifications we need VAPID keys, for creating the VAPID key, you different online tools, and NPM packages. After the user subscribed we get some user keys from the user end, we need to store those into the Database to send notifications.

Machine Learning / AI

Nowadays, all the applications having Machine learning support in the background to give a customized experience for the user example Instagram. The Cosmos database completely supports all the advanced analytics and complete Azure Machin Learning Supports and Different Machine Learning Tools Supports also, like Apache Spark and more.

Security and Authentication

you can use Azure AD and AuthO authentication also in your application with Azure Functions. Instead of allowing sensitive data anonymously, you can configure Authentications in your application with Azure Functions and store the auth document in Cosmos DB.

In Azure default advisor there, to Inform you like the app is how much site is secured and Which area can reduce the cost and other options also.

Design of Web App

You must consider the Web App resolutions for mobile apps also because we going to give PWA apps also, If mobile design not good, users won't use your PWA app. On the outside different sizes of Screen Resolutions and Screen sizes there. The designer must concentrate on the design.

Analytics / Insights

For Static Web App, you can add exiting App Insights App and create new App Insights and configure with it. so only you can easily see how many users are on the site, The App Insights provide a lot of analytics options. 

Cache

 For the cache to improve the site performance and tracking user for advanced analytics, we can easily integrate Redis Cache into Web Application. Azure itself has the option to create a Redis cache database and configure it with your existing Web application.

Source Code - GitHub