How to handle basic dynamic interaction on a webpage with Vue.js

Leave a comment

In this blog post I want to share how to handle basic dynamic content with Vue.js on our Cloud Native Starter landing webpage. Vue.js is an open source licensed “progressive framework for building user interfaces”.

The gif below shows following sequence:

  1. First, the page content changes when a button is clicked. The page shows a little pre-view of content for one of the selected topics on the Cloud Native Starter project landing page. The topics are “Basic Concepts”, “Reactive” and “Security”.
  2. Second, the image on the right hand side changes, a headline appears or changes, a description appears or changes, and a Learn more button appears and changes the content for routing to another webpage.
  3. Third, at the end in the gif the button Learn more is pressed and the page for Basic Concepts is shown.

The questions are: How ..

  • … to change images?
  • … can a text be changed or appear?
  • … to show a button and change the rooting to other webpages?
Continue reading →

Updated: How to prepare for a Hackathon with IBM Cloud?

Leave a comment

In this new blog post I want to address a common situation for developers: You want to participate in a hackathon, and you plan to use IBM Cloud, but you have never used it before. How to prepare? So I created a newer version of my older blog post: How to prepare for a Hackathon with IBM Cloud 

IBM Cloud provides a huge amount of different services, runtimes, and more. From my point of view, one of the most important objectives in a hackathon is:

Run your developed application instance live! To do this you need a runtime 😉

Let’s start with the basics

Let’s get a basic understanding of what does IBM Cloud provide and where to find how to’s?

The IBM Cloud catalog gives you an entry point to find Cloud Services, Software and Consulting, which are organized by different categories.

IBM Cloud has a very good entry point for new users with the getting started page. The page is structure in five major steps.

ibmcloud-starting-point
  1. Explore IBM Cloud
  2. See cloud essentials
  3. Start building
  4. Helpful resources
  5. Get community support

The gif below shows the navigation going through the different steps on the getting started page.

ibmcloud-get-starter

Free online trainings

Continue reading →

Get your Java Microservice up and running!

Leave a comment

In this blog post I want to highlight the hands-on workshop “Get your Java Microservice up and running!“, now available in GitBook . That workshop demonstrates how to build a Microservice with Java and how to deploy the Microservice Kubernetes on the IBM Cloud. The Microservice in this workshop is kept as simple as possible, so that it can be used as a starting point for other Microservices. The Microservice has been developed with Java EE, OpenLiberty and Eclipse MicroProfile.

The workshop is a part of the open source project Cloud Native Starter, which contains sample code that demonstrates how to get started with cloud-native applications and Microservice based architectures.
The Workshop has a related badge called Cloud Native Starter Level 1. This badge is available at Acclaim. In the related quiz you can verify your knowledge you achieved in the workshop.

The gif below show some major steps in the hands-on workshop. You will develop locally a Java Microservice and deploy that Microservice to a free Kubernetes Cluster on IBM Cloud.

microservice docker java kubernetes deployment

I hope this was useful for you and let’s see what’s next?

Greetings,

Thomas

#microprofile, #java, #ibmcloud, #openliberty, #microservices, #kubernetes

Reactive programming is about messages, futures, events, channels and streams

Leave a comment

In this blog post I want to point out the topic of the open sourced Reactive Cloud Native Starter example with Java backend Microservices and a Vue.js frontend web application. The gif below shows the example application. The application simply displays Articles and Authors information on a web page. You also see the creation of Articles with cURL commands in a terminal session and the UI is updated automatically.
(the gif is from the Cloud Native Starter project)

reactive demo
That example was mainly developed by Niklas Heidloff. He wrote a lot of very useful blog posts like Development of Reactive Applications with Quarkus related to that topic.

In this blog post I show, what could be useful to know, when you start with this Cloud Native Starter example for reactive programming to create and consume reactive RESTful APIs in an asynchronous way. I will also give a brief overview of the steps to create an article in the example application.

Continue reading →

How to create a new realm with the Keycloak REST API?

7 Comments

In this blog post I want to show, how to create a new realm with Keycloak REST API , because later I want to automate the Keycloak realm creation for a workshop using curl in a bash script.

The reason of that blog post is, that the information in the REST API documentation wasn’t detailed enough for me. The image shows what I found first in the Keycloak REST API documentation .

keycloak-create-realm-01

In common it’s very simple to use the Keycloak REST API. For more details see in my blog post Getting started to secure a simple Java Microservice with Keycloak, MicroProfile and OpenLiberty.

First you need a bearer authorization token for an administration user and with that token you create a new realm using the realm json exported before.

Here is what I found:

I used POSTMAN to check it out. These are the steps I did in POSTMAN.

Continue reading →

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (83) … using a remote development container to run the Vue.js application

Leave a comment

In this blog post I want to show, how to setup a remote development container for a Vue.js application, which isn’t able to run on my local machine, even after the update of Node.js, npm and yarn.

I still get the error which is shown in the following image and it seems this error is related to the installed MacOS version 10.15.5.

vue-remote-01

To be able to work with the Vue.js project, I use now the remote container development functionality in Visual Studio Code as a workaround . This is very close to my blog post “Run a MicroProfile Microservice on OpenLiberty in a Remote development container in Visual Studio Code”.

You can follow the steps of the setup of the workaround for the “OS X 64-bit with Unsupported runtime (83)” problem.

SETUP AND CONFIGURATION

Ensure you have installed Docker Desktop on your local machine.

Step 1: Install the following extensions in Visual Studio Code

Step 2: Open in your Visual Studio Code workspace the remote containers extension window (“Open a remote window“)

vsc-remote-java-dev-00

Step 3: Start “Remote Containers: Add Development Container Configuration Files …” and select a container as a starting point, here I use the Node 14 container definition (you can customize the “Dockerfile” to your needs). The container configuration in the Dockerfile contains Node.js, npm and yarn , which I need for the Vue.js development.
The gif below shows the steps.

vue-remote-2

Step 4: Verify the newly created folder “.devcontainer” and related files “devcontainer.json” and “Dockerfile”.

vue-remote-02

Step 5: I my case I only need to customize the “devcontainer.json” file to expose the port  8080, to access my Vue.js application in a local browser.

vue-remote-03

Step 6: Now open the local folder with “Remote Containers: Open Folder in container” in the remote development container. That will map the local folder as volume to the remote development container and code changes will be saved on your local file system and start the Vue.js development.

In the gif you see:

  • Start “Remote Containers: Open Folder in container”
  • Select a folder and open a terminal session in that folder
  • Execute “yarn serve”  in the terminal session
  • See is works the application is running and can be accessed in a local browser using URL “http://localhost:8080″

vue-remote-3

I hope this was useful for you and let’s see what’s next?

Greetings,

Thomas

#Docker, #Container, #Vuejs, #VisualStudioCode, #RemoteDevelopment

 

Getting started to secure a simple Java Microservice with Keycloak, MicroProfile and OpenLiberty

2 Comments
‌

Run a PostgreSQL container as a non-root user in OpenShift

Leave a comment

In this blog post I want to point out a simple topic: How to run a simple PostgreSQL Docker image as a non-productive container in OpenShift? As you maybe know, OpenShift doesn’t allow by default to run container images as root.

The image below shows the result of the simply deployed postgreSQL image from dockerhub.

postgres openshift root user ibmcloud

It’s possible to enable images to run as root on OpenShift, that’s documented in the OpenShift documentation here, by adding a service account.

But, in this blog post we choose an alternative way, where we don’t change the security in OpenShift, here we will customize the postgreSQL Docker image a bit. We will follow the steps to create a postgreSQL database on OpenShift, along the creation of the database called postgreSQL database-articles for the Cloud Native Starter reactive example .

These are the major steps:

  1. Write the specifications and configurations  for:
    1. … the Dockerfile
    2. … the  yaml with a Kubernetes Deployment and a Kubernetes Service specification. 
  2. Execute the oc CLI commands to:
    1. … create a OpenShift project
    2. … create a OpenShift build configuration
    3. … start the build
    4. … apply the Deployment and Service specification
    5. … expose the Service

Continue reading →

Setup a MongoDB in less than 4 min on a free IBM Cloud Kubernetes cluster at a Hackathon

Leave a comment

In this blog post I want to highlight that I just created a GitHub project and a 10 min YouTube video to “How to setup mongoDB in less than 4 min on a free IBM Cloud Kubernetes cluster at a Hackathon”.

My objective is to provide a small guide, how to setup a MongoDB server and Mongo UI (Mongo-Express)  on a free IBM Cloud Kubernetes cluster and when you don’t want to use the existing MongoDB service on IBM Cloud.

On the free IBM Cloud Kubernetes cluster:  No persistent volume claims are used. So, keep in mind, if your Pod in Kubernetes crashes the data of the database is lost.

Based on the “security feature” of the MongoDB default port 27017, you need to run the application to access the MongoDB server in the Kubernetes cluster .

In other words, your UI application has to access the database with a server application, which also runs on the free Kubernetes cluster (like the Mongo UI (Mongo-Express)  in that example here). You should implement a backend for frontend architecture.

The YouTube video shows the setup and a description how it works.

Continue reading →