I just found a useful configuration for the Visual Studio Code terminal tabs. If you don’t like this new configuration to manage the tabs you see in the gif below:Continue reading
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
Cssand so on.
This blog post is a short
cheat sheet for:
- How to simply organize workspaces and the debugging configuration separated from source code saved in
- How to simply configure attach debug for Quarkus in Visual Studio Code
The advantage with that organization is:
You can easily delete the source code saved in GitHub from your local machine, but you don’t lose the debugging or other configurations you did.
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.
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 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.
Step 4: Verify the newly created folder “.devcontainer” and related files “devcontainer.json” and “Dockerfile”.
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.
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″
I hope this was useful for you and let’s see what’s next?
#Docker, #Container, #Vuejs, #VisualStudioCode, #RemoteDevelopment
This blog post has the focus on: how to develop a JUnit test for the Authors microservice from the Cloud Native Starter example and run both the Authors microservice and the JUnit test on OpenLiberty in the development mode.
That blog post hasn’t the objective to be a blueprint or a ‘how to guide’ for writing JUnit tests, JUnit test organization, test strategy and so on. The objective is to get technically started along one concrete microservice example from the Cloud Native Starter project. Here is the GitHub project with the source code for this blog post.
The Authors microservice has one RESTful api endpoint called
getAuthor. The endpoint provides one parameter for the Author name. The endpoint returns Author data in a JSON format.
Keep the end in mind: The gif shows a sample JUnit test execution for the Author microservice using OpenLiberty in the Visual Studio Code editor:
Note: As an alternative or in addition, you can also visit the OpenLiberty tutorial “MicroProfile or Jakarta EE application” to start with that topic.
Let’s start with: What do we need and how do we realize the implementation?
We need to ..
- invoke the REST endpoint of the Authors microservice with a REST Client.
- transform the JSON response of the REST endpoint to an Author data class
- handle different values to invoke the REST Endpoint parameter for the Author name to run tests with variations of the Author name.
- compare the actual response value with an expected value and document the result.
That blog post is structured in:
- Setup and configuration of Visual Studio Code
- Run the Authors microservice in the remote development container
- Debug the Authors microservice in the remote development container