VSCode Virtual Environments using your Browser

It’s no secret I’m a huge fan of virtual environments and PowerShell. Late last year I wrote this series on Nested Virtual PowerShell Desktop Environments on Windows 10 & Windows Server 2019 in Azure A lot of the back story for that three post series was to have virtual environments for PowerShell.

Moving forward six months and I’m at the beginning of the journey towards migrating from PowerShell Desktop to PowerShell Core. The quickest way to get started with PowerShell Core is to use the Windows 10 feature of Windows Subsystem for Linux. Of course you should also have made (or be making) the migration from PowerShell ISE to VSCode.

So what if you could have Virtual VSCode environments accessible via a browser as your IDE for building and using PowerShell Core? Well you can.

Here is VSCode running a PowerShell Core command via a browser from a Ubuntu based Windows Subsystem for Linux environment in a Windows 10 Virtual Machine running in Azure.

Powershell Core on Linux on Windows via VSCode in Browser.PNG

Prerequisites

A key component of this magic is Code Server. Code Server is an open source self-contained environment for VSCode designed to offload the IDE from lower powered environments (tablets, Chromebooks etc) and is currently supported on Linux and Mac (OSX) with Windows coming soon.

If you have an environment with either of those then all good, as you were. If you only have Windows then on Windows 10 install Windows Subsystem for Linux via the Microsoft Store App. My Windows System for Linux flavour is Ubuntu.

WSL Ubuntu.PNG

Code Server

Download Code Server from the Github Releases page here and save it to your local machine. Running Ubuntu I downloaded the Linux binary. Untar it using

tar -xf yourDownloadedversion.tar.gz

Untar Code Server

Change into the extracted directory with the code-server executable in and run code-server

./code-server

Take note of the password as you will need this when you connect to Code Server via your browser.

Start Code Server

If the host you are running Code Server is remote (as mine is, in Azure) make sure you have networking configured for the default port (8443). I had to update my NSG for the inbound port of 8443.

Note: this isn’t a normal configuration, allowing source any for incoming ports. I have this locked down to the necessary source IP’s (but I’m not going to show them here).

Inbound Security Rules.PNG

Then in your browser you can hit the your host on port 8443 and provide the password that was displayed when starting Code Server. You will then have VSCode running in essentially a Virtual Environment accessible via a browser.

VSCode running in a Browser

PowerShell Core

My Windows Subsystem for Linux Ubuntu version is currently 18.04 and I already had downloaded and installed PowerShell Core for Ubuntu 18.04

lsb_release -a

Installation Instructions are here

Ubuntu Windows Subsystem for Linux Version.PNG

Install the PowerShell VSCode Extension along with any of the other extensions you regularly use. BOOM, you now have a Virtual VSCode environment for use with PowerShell Core on (and in my case on Ubuntu under Windows 10).

PowerShell VSCode Extension

Summary

What a crazy time to be in the IT industry. Nested disparate operating systems running IDE’s in browsers executing cross-platform scripting languages. Wow.

To run multiple sessions on the same host use the -p (port) command to specify a different port for each instance.

Code Server specifying Port.PNG

How to build and deploy an Azure NodeJS WebApp using Visual Studio Code

Introduction

This week I had the need to build a small web application with a reasonably simple front end that will later be integrated inside a Portal. The web application isn’t going to be high use and didn’t necessitate deployment of infrastructure (VM’s). I’d messed with NodeJS a while back in this post where I configured a UI for Microsoft Identity Manager and Azure based functions.
In the back of my mind I knew I didn’t want to have to go for a full Visual Studio Project Solution for this, and with the recent updates to Visual Studio Code I figured it must be possible to do it using it. There wasn’t much around on doing it, so I dived in and worked it out for myself. Here I share the end-to-end process to make it easy for you to started.

Overview

What you will need on your development workstation before you start are the following components. Download and install them on your development machine.

You will also need an Azure Subscription to where you will publish your NodeJS site.
This post details setting up Visual Studio Code to build a shell NodeJS site and deploy it to Azure using a local GIT Repository. Let’s get started.

Visual Studio Code Extensions

A really smart and handy extension for VS Code is Azure Tools for VS Code. Release a few months ago (January 2017), this extension allows you to quickly create a Web App (Resource Group, App Service, Application Service Plan etc) from within VS Code. With VSCode on your development machine from the prerequisites above click on the Extensions Icon (bottom left) in the VSCode menu and type Azure Tools. Click the green Install button.
Azure Tools for VS Code

Creating the NodeJS Site in VS Code

I had a couple of attempts at doing this before I found a quick, neat and repeatable method of getting started. In order to get the Web App deployed and accessible correctly in Azure I found it easiest to use the Sample Azure NodeJS Hello World example from here. Download that sample and extract the contents to a new folder on your workstation. I created a new path on mine named …\NodeJS\nodejssite and dropped the sample in there so it looked like below.

After creating the folder structure and putting the sample in it, whilst in the sub-directory type:

code .

That will startup Visual Studio Code in the newly created folder with the starter sample.

Install Express for NodeJS

To that base sample site we’ll install Express. From the Terminal tab in the lower pane type:

npm install -g express-generator


Express App

With Express now on our machine, lets add the Express App to our new NodeJS site. Type express in the Terminal window.

express


Accept that the directory is not empty

This will create the folder structure for Express.

Now to get all the files and modules for our site configured for our app run npm install



Now type npm start in the terminal window to start our new site.

The NodeJS site will start. Open a Web Browser and go to http://localhost:3000 and you should see the Express empty site.

Navigate to views => index.jade Update the text like I have below.

Refresh your browser window and you should see the text updated.

In the terminal windows press Cntrl + C to stop NodeJS.

Test Deploy to Azure

Now let’s do a test deploy of our shell site as an Azure WebApp.
Press Cntrl + Shift + P or from the View menu select Command Palette.

Type Azure: Login 

This will generate a code and give you a link to open in your browser and login

Paste in the code from the clipboard and select continue

Then login with your account for the Tenant where you want to deploy the WebApp too. You’ll then be authorized.

From the Command Palette type azure sub and choose Azure: List Azure Subscriptions and choose the subscription where you will create and deploy the WebApp

Now from the Command Palette type Azure Create a Web App (Simple).

Give the WebApp a name. This will become the WebApp Name, and the basis for the all the associated WebApp components. Use Create a Web App (Advanced) if you want to be more specific about the name of the App Resources etc.

If you watch the bottom VS Code Status bar you will see the Azure Tools extension create the new Resource Group, Web App and Web App Plan.

Login to the Azure Portal, select the new Web App.

Select Deployment Options and then Local Git Repository. Select OK.

Select Deployment credentials and provide a username and password. You’ll need this shortly to publish your site.

Click Overview. Copy the Git clone url.

Back in VS Code, select the GIT icon (under the magnifying glass) and from the top choose Initialize Repository.

Then in the terminal window type git remote add azure <git clone url> obtained from the step above.

Type Initial Commit as the message and click the tick icon in the Source Control menu bar.

Select and select Publish

Select azure as the remote target we setup earlier.

You’ll be prompted to authenticate. Use the account you created above in Deployment Credentials.

Back in the Azure Portal under the Web App under Deployment Options you will see the initial commit.

Click on Overview and you should see that it is running. Click on URL and the site will open in a new tab in your browser.

Updating our WebApp

Now, let’s make a change to our WebApp.
Back in VS Code, click on the files and folder icon in the top left corner, navigate to views => index.jade and update the title. Hit Cntrl + S (or select Save from the File menu). In Terminal below type npm start to start our NodeJS site locally.

Check out the update locally. In a browser navigate to the local NodeJS site on localhost:3000. You’ll see the changed page.

Select the Git icon on the left menu, give the update some text e.g. ‘updated page text’ and select the tick from the top menu.

Select the and choose Push to publish the changes to our Azure WebApp.

Go back to your browser which was on the Azure WebApp URL and reload. Our change and been push and reflected in the WebApp.

Summary

Very quickly and easily using Visual Studio Code (with NodeJS and Git Desktop installed locally) we have;

  • Created an Azure WebApp
  • Created a base NodeJS site
  • Have a local NodeJS site we can develop
  • Publish it to Azure

Now go create something awesome.

Follow Us!

Kloud Solutions Blog - Follow Us!