Deploy GWT / J2CL Web Apps on Azure Static Web Apps Service

Dr. Lofi Dewanto
Jun 5 · 5 min read

In this short story I’ll show you how to deploy GWT / J2CL web apps on Microsoft Azure Static Web Apps Service. There are some advantages if you implement your web apps with Full CSR (Client Side Rendering) so that the web apps just run on your web browser and embrace the client computing power. The cost of cloud computing is one of it. In this case the cloud provider just has to deliver the static files without doing much processing on their side.

If you want to see why you should embrace the power of web browser you could take a look at my talk:

Summary of Web Browser as a Platform

GWT / J2CL is a Java to JavaScript transpiler, so in the runtime the web apps are pure HTML, CSS and JavaScript. Java is only available at the development time so that Java developers can use everything well known like Maven / Gradle, IntelliJ / Eclipse / NetBeans / Visual Studio Code and other tools and frameworks.

In my story list you can find different kind of GWT / J2CL articles, from beginner to expert. You could also take a look at the GWT Padlet for all up-to-date information about GWT / J2CL.

After you implement your web app with GWT / J2CL you would definitely deploy it somewhere so that your customers could use it. There are a lot of cloud providers today like AWS, Azure, Google Cloud, Heroku, etc. Today I’ll show you how to deploy the apps on Microsoft Azure Static Web Apps Service. This is interesting because GWT apps are just HTML, CSS and JavaScript, so the service just delivers the files once to web browser and that’s it. If you need some server-side functionalities you could use Azure Functions. Below is the architecture of Azure Static Web Apps.

Azure Static Web Apps Service (source: Microsoft Azure)

For the deployment I just create a simple GWT web app with Domino UI from DominoKit.

GitHub Repo for the demo: https://github.com/lofidewanto/gwt-azure-static-webapp

To deploy the static web apps this Quickstart Documentation helps a lot. You need to have a GitHub and Azure account to be able to deploy the web apps. Many of us owns already a GitHub account, so this shouldn’t be a problem. To get an Azure account you need to have a credit card (at least in Germany) and this is not so easy. Heroku doesn’t ask for a credit card for a free service. For a personal project Azure Static Web Apps Service should be free of charge: Azure Static Web App Plans.

So how is the process to deploy to Azure Static Web Apps? Actually one only needs to follow the Quickstart Documentation above. The problem I encountered was that all the examples are for JavaScript or TypeScript based frameworks like Vue.js. Angular or React, nothing for Java or GWT.

Starting to deploy Java / GWT on Azure Static Web Apps Service

After getting some helps from and I manage to make the GWT web app deployed. The main problem was to add Maven build step into the GitHub Actions. For this purpose I need to do following:

  • Add a step to build the GWT web app with Maven
  • Change app_location to the /target/gwt-azure-static-webapp-1.0.0-SNAPSHOT/calculator which is the result directory of the transpiled Java files. This is the directory where we can find the HTML, CSS and JavaScript files.
  • Change skip_app_build to true. This makes the build process for JavaScript won’t be executed.

That’s it!

GitHub Action Workflow file for the demo: https://github.com/lofidewanto/gwt-azure-static-webapp/blob/main/.github/workflows/azure-static-web-apps-lively-pebble-036bda903.yml

GitHub Action Workflow to deploy Java GWT to Azure Static Web Apps Service

The whole steps of the GitHub action can be shown as a list.

GitHub Action steps to build and deploy GWT web app

You can also take a look at the Azure Management Console to manage the deployed web app.

Management Console for the Static Web Apps at Azure

The result of the deployment can be directly seen at: https://lively-pebble-036bda903.azurestaticapps.net

… and here is the result!

GWT Static Web App Demo

Summary and Next Step…

The advantages using GWT / J2CL is that the web apps will run completely on the web browser and this means that the cloud provider just simply needs to deliver the files without much processing. Azure Static Web Apps Service offers such a functionality. On the same time Java developers can still work with their well known tools and frameworks thanks to GWT / J2CL transpiler.

The combination of GitHub and Azure feels very nice. Using GitHub Actions is also very straight forward. This is my first time using it, so it can’t be so hard. I’m using Visual Studio Code for Java to develop the simple GWT example and add the Azure Static Web Apps plugin to my VSC. They work pretty good together.

Visual Studio Code for Java with Azure Static Web Apps

The next step would be to test the Azure Functions to add some server-side functionalities to the client-side GWT web app. In this case I’m curious since Azure Functions does not support Java yet?

For now: have fun running GWT / J2CL web apps on Azure Static Web Apps Service!

Azure Functions supported programming languages: no Java

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store