Use environment variables to make a containerized Vue.js frontend application more flexible and deploy it to Code Engine

This blog post addresses the topic, how to use environment variables to make a containerized Vue.js frontend application more flexible. We will touch following technologies Vue.jsNGINXJavaScriptDockerfile and Code Engine.

When you run a containerized application on a container orchestration platform like KubernetesOpen Shift or on a serverless frameworks like Knative or Code Engine or other platforms, it’s helpful to pass endpoints to other applications to the containerized application by using environment variables. When the container will be restarted, these variables can be provided to the container and no adjustment in the source code is necessary. You can use configmaps or in Code Engine simply the environment variable itself.

The example source code you find in this workshop.

In addition, it’s useful when you take a look into this awesome blog post: Externalise and Configure Frontend Environment Variables on Kubernetes which was used for the starting point for the configuration.

Continue reading

Simply logout from Keycloak

This blog post is about the logout from Keycloak in a Vue.js application using the keycloak-js SDK/javascript-adapter.

As you maybe know we (Niklas, Harald and I) created an example project called Cloud Native Starter that contains example implementations related to Cloud Native applications with Microservices. I will use one of the example implementations in that blog post.

I structured the blog post in following sections.

  • The simplified solution
  • The basics
  • The example implementation in a Vue.js fronted application
Continue reading

How to debug the Javascript code of a Vue.js application using Visual Studio Code

This blog post is a short cheat sheet, how to setup Vue.js debugging in Visual Studio Code, when you run the application in a Chrome Browser. I used the example source code of the Cloud Native Starter project.

If you debug a Vue.js application, you usually need two kinds of debugging.

First debug and inspect the frontend page itself: such as HtmlCss and so on.

Second debug the logic of the Javascript code for the application.

Continue reading

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

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

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

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

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

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

 

State management, modal dialog and simple spinner in VUE

This blog post is about how to use state managementspinner with conditions, and modal dialogs when saving data in VUE. How these works, we will explore along an implementation in the #BlueCloudMirror project. Maybe this can save you some time, if you plan to do the same.

Let’s start with my motivation, we want to improve our #BlueCloudMirror game UI. If you saved your scores data in the previous version, you were routed back to start game page. You received no information, if storing your data was successful in the highscores list.

In the new UI you can see the saving progress and you get confirmation when your data is saved, as you can see in the gif below.

blue-cloud-mirror-save

To understand how this works in VUE, we need to touch the following topics:

We will use the Results.vue and State.ts source code files from the #BlueCloudMirror github project, to see how it works in the #BlueCloudMirror  game.

Continue reading

How to create an interactive YouTube Video selection in VUE

In this blog post I want to share my observations during my implementation of an interactive YouTube Video selection in VUE. Maybe this can save you some time, if you plan to do the same.

Let’s start with my motivation, it came from the improvements of the #BlueCloudMirror game UI. We decided to provide the #BlueCloudMirror users a recorded YouTube LiveStream of us. This video provides an awesome overview of our  major technologies.

The video takes approximately 50 minutes. This is a long time to watch, so we want to provide the user a new interactive architecture page, as you can see below. A user should have the ability to select the topic he is interested in. To do this, we needed the position selection for the YouTube video. In the gif you can see the result.

vue-youtube-selection

Topics of this blog post:

  • How to define dynamic values in a VUE template
  • How to configure autostart for YouTube videos
  • How to avoid SAMEORI problem with the YouTube video

Continue reading