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

 

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

Let‘s Code Pattern 01: Use blockchain to track fitness club rewards

What is Let‘s code pattern?

I am starting a blog series to explore blog series to explore some code patterns, like those which are available on IBM Developer. I will call these series Let‘s code pattern .

Definitions for Let‘s code pattern

On IBM Developer website, there are complete solutions to problems that developers face every day. Code patterns leverage multiple technologies to solve issues that our developer advocates have recognized as common use cases across multiple industries.

Do you want to add something about Open Source and the code is available??
For the  series Let‘s code pattern , I have defined three topics I will observe for each code pattern in the future.

  1. Did the code pattern work?
  2. Did I need to make changes to the readme?
  3. How complex was it for me?

I always will clone the code pattern to my own repository, to make any changes I want to apply.  For example; to add my simple git and cloud helper bash scripts or customisations to the code or in the readme.

Let’s start with the first code pattern

I am starting the Let’s code pattern series with the Blockchain code pattern  called “Use blockchain to track fitness club rewards”. The web app is designed to track and trace member rewards, using IoT and the blockchain. It’s a fairly recent code pattern, which was published just last week.

The code pattern “Use blockchain to track fitness club rewards” enables you to setup a blockchain  locally on your computer using Hyperledger Composer. The code pattern is based on an Angular web app. You can implement it and start to learn from this project, which is based on a fitness club use-case.

Here’s my customised GitHub version of the code pattern: https://github.com/thomassuedbroecker/Using-Blockchain-to-Track-fitness-Rewards#part00

Let’s begin! Let’s get down to business

Overall it was useful starting point for me to dig into this area without using a cloud instance. The local instance makes blockchain with Hyperledger composer simpler. But I notice, I have to read additional information to get a better understanding of the Hyperledger composer in more detail.

Continue reading