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

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

In this short story I’ll show you how to deploy GWT / J2CL web apps on Microsoft Azure Static Web Apps Service.

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:

  • Web Browser as a Platform: slides in English
  • Web Browser as a Platform: YouTube video in German

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.

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 

Bruno Borges

 and Anthony Chu

  • 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.

azure java javascript gwt j2cl

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How to Install OpenJDK 11 on CentOS 8

What is OpenJDK? OpenJDk or Open Java Development Kit is a free, open-source framework of the Java Platform, Standard Edition (or Java SE).

Java vs. JavaScript: Know The Difference

Java vs. JavaScript: Know the Difference, Java vs. JavaScript: What's the Difference? Java vs. JavaScript: Major Similarities and Differences. pros and cons of JavaScript and Java.

Going Beyond Java 8: Local Variable Type Inference (var) - DZone Java

In this article, we will talk about the most important new feature introduced with Java 10, officially called local variable type inference. An extremely important function in java. You will regret skipping this article.

Azure SDK for Java Logging in Azure Functions | Azure SDK Blog

In this post we will learn about Azure SDK for Java application and HTTP logging scenarios in an Azure Functions environment. We will look at the scenario of managing secrets in the Azure Key Vault with the Key Vault and Identity client libraries and how to activate and access the SDK logs in the Azure Functions environment.

Java vs JavaScript | Difference Between Java And JavaScript

Java vs JavaScript | Difference Between Java And JavaScript. There are so many tools available in the world of programming that it’s easy to confuse them. It doesn’t help when many of these tools appear to overlap and perform the same functions. It seems that the toughest part of web design or code writing is choosing the right resource to use. This article presents the differences between Java and JavaScript.