Creating a cross platform app on Azure and deploying it to the Play Store.
Browsing through a classical website means loading entire pages over and over, whereas a PWA makes lightweight API calls to interact with a backend, and after receiving a response the browser then renders the page itself.
We will deploy this Vue PWA using Azure Static Web Apps. Static Web Apps are the ideal solution for developers who want to get their static website up and running quickly, because out of the box this service will host your app, provide SSL encryption and create a CI/CD pipeline for you. Oh, and it’s pretty cheap too!
As you can see in the diagram, the same Static Web App is used to serve the webapp to various platforms. We will generate the various packages required to add the app to the different stores, by using pwabuilder.com
If you have all the prerequisites listed below, you can have a working cross platform app working within 30 minutes.
The end result
The end result of this tutorial is an app which we can access through the browser but which we can also install as a android app.
Dont like reading? This tutorial is also available in video form :)
If you want to follow this tutorial, you’ll need the following:
- Azure Account
- Github Account
- Google Developer Account
- NodeJS + NPM installed
- Vue3 & Vue3 CLI installed
Creating the project
Vue supports a CLI with which you can create new projects. The command is ‘‘vue create $nameofapp”. Then, manually select features and tick the PWA support box.
A new project is created in your current directory. We won’t go too much in depth on what all the various files are responsible for, but lets name a few important ones:
This file describes your project, what depencies are required to run it and what steps are performed to build and serve the project.
This directory contains the files which make up the PWA. At the root of this directory you can find App.vue, a Vue component file. Vue components are typically built up of three parts:
- a HTML template, describing what is in the page
- a CSS stylesheet, which describes how the page looks like
Now commit the project to a github repository, so we can get to the next step, which is deploying the project.
Deploying the project
We will deploy the project using Azure Static Web Apps. The easiest way to do this is through the portal. Link your Github account and select the repository you have uploaded the Vue3 app to.
Azure Static Web Apps will create a Github Actions pipeline for you, which automatically deploys new versions of the app when you commit to this github repository.
Under Build Details, select the VueJS build preset.
The app location field should match the directory in which you have the package.json file located. In my case, this file is in the root of the repository.
Finish creating the webapp and browse to the github repository. You will notice that Azure has created a Github Action, which will be used to build and deploy your Vue3 PWA to Azure.
Open the Static Web App you just created in the Azure Portal, and click the “Browse” button.
If all went well, you should see your Vue3 PWA, now accessible over the internet. If it is still “waiting for content”, your CI/CD pipeline may not be finished yet. Alternatively, check that you have provided the right repository, app location and that you have actually committed all the files to the repository.
Creating an Android App from the static web app
Microsoft has built an awesome tool, PwaBuilder, to convert web apps into packages which can be uploaded to the various stores. Browse to the site and enter the URL of your Static Web App. Click next and navigate to the Android package.
Download the generated package and unzip it.
The package contains 6 files. We will use two of them to upload our app to the play store. The assetlinks file is used to prove that whoever controls the website the app links to, also controls the app. This file prevents people from making phone apps from sites which they do not own. This file must always be accessible in the same path: https://YOURSITEURLHERE.com/.well-known/assetlinks.json
We will create a .well-known folder in the public folder of the Vue project and copy the Assetlinks.json file in there.
The .aab file contains our actual Android app. The last step is to upload this file to the Play Store.
Creating a Play Store app
This is probably the most time consuming step of the project, as you may need to create a developer account on the Google Play Console
After finishing this process, access the Play Console and create a new app.
Fill in the fields and create the app.
Now the last step is to create an internal release of this app, so we can allow specific users to download and test the app. From the side menu, open the “Internal Testing” page, create a release, and upload the .aab file (located in the Zip file downloaded from pwabuilder.com). Give the release a name and finish the release. If you are prompted with an error regarding COVID-19 testing apps, browse to the “App Content” page from the sidebar and tell Google that this is not a COVID19 testing app.
After creating the internal release, navigate back to the “Internal Testing” page and add some testers (maybe yourself?).
Then copy the link and open it on your mobile device. You will be redirected to the Play Store page where you can download your app. Now download and run the app!
Hey, there’s still a browser bar in my app!
Most likely you will still see a browser bar in your app. So by now I think you will fully understand what is happening. This is just a website pretending to be a phone app? Well, kind of. The reason that there is still a browser app is that our Assetlinks file has not been updated yet.
Now lets make sure users don’t see this ugly browser bar in the app.
Go back to the Play Console and browse to the App Integrity tab. Copy the SHA-256 certificate fingerprint. Now go back to your Vue project and open the assetlinks.json file. Overwrite the existing SHA-256 fingerprint with this new one. Now, commit all changes (git add *, git commit -m “change fingerprint”, git push). The Github Action will be triggered and the change will be deployed to your app in a few minutes. After a few minutes, * CLOSE * the app on your phone and open it again. Voila! No more browser bar.
Now what we have setup is a very simple basis on which we can develop a cross platform capable mobile app.
- This app can run in the browser
- Or can be deployed as an Android app
- and can also be deployed as an iOS app.
- A single CI/CD pipeline can update the app for all platforms at once.