I use Bitbucket for its private repos and recently decided to deploy my app to Azure. I was determined to do it with a pipeline, but it took some research to finally get it to work. If you want to follow the same path, here is what you have to do.

Prerequisites

A React app — I created one using npx create-react-app <APP-NAME>.

Create an Azure App Service

We will be deploying the app to an Azure App Service. Create one by going to the Azure Portal, click on Create a resource and choose Web App.


Your Web App needs to use Keycloak to authenticate its users or simply to acquire an access token? Here is how you can configure Keycloak to accept its requests.

Keycloak configuration for a web app

Create a realm

Firstly, let’s create a new realm. If you already have a realm you want to use you can skip this section.

In your Keycloak’s Admin Console look for the drop-down in the upper left corner and click on Add Realm:


The backend API expects a Keycloak access token and the UI must allow the user to authenticate herself and then send the access token with every request. If this sounds like your JIRA ticket, then stick around.

Gatsby & Keycloak

Prerequisites

A Keycloak server instance. I am using the Docker image (v11.0.2) running on http://localhost:8080. For a walkthrough on setting up Keycloak, check out my article on How to configure Keycloak for a Web App.

The Gatsby App

Let’s start by creating a simple Gatsby application. The easiest way would be to clone the Gatsby starter git repo https://github.com/gatsbyjs/gatsby-starter-hello-world.

To handle the communication with the Keycloak server…


Shotcut allows you to use HTML to create visual effects, but CSS3 animations are not supported. Instead it requires the WebVfx library and JavaScript to make your fancy effects move, but we are in 2020 and ain’t nobody got time for that. Animating with JS/jQuery has gone the way of Flash for the better.

css animations in shotcut
css animations in shotcut
CSS3 animations in Shotcut

What you need

Elusien has done most of the heavy lifting with a framework in JavaScript, which resembles the CSS3 animation declarations, but it…

Nikolay Mihaylov

Run C.M.D. - IT‘s Tricky

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