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

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.