VS code + SSH + Azure VM setup for remote SPFx development

In this blog post we will have a look at one of the setup options for remote SPFx related development which involves connecting to an Azure VM using the VS code “Remote-SSH” extension.

Note: The details that we will see below are the ones that I tend to follow for remote development. The approach mentioned is not the only approach. There are several other setup options that can be utilized for remote development.

Setup

In this setup we will be using a Linux based Azure VM. The access/interaction with the VM will not be via GUI. Instead it will all be via commands. We will be installing node js on the VM and all our SPFx code will reside on the VM. For developing SPFx solutions we need to access port 4321 on the VM. This is taken care by VS code remote-SSH with the help of port forwarding.

In summary, all the development is done on a remote machine, we do not access the UI of that machine, we consume only the files on that machine and with VS code the experience will be as if we were writing code on our local machine.

The setup in brief consists of the following:

Azure VM

If we have a Visual Studio subscription, then we get a certain amount of free Azure credits per month that we can use for development. The amount of credit depends on the subscription. More details can be found here. So, let’s take that opportunity to create resources in Azure. One such resource is an Azure VM.

To get started with the setup we need to create a VM in Azure and configure it so that we can connect to it using SSH. Microsoft VS code team have written a nice post on how to do that. So, we can follow all the instructions in that post except for the last 2 sections (creating a Node.js app).

Creating a VM in Azure

SPFx setup

Once we have our VM up and running and we are able to communicate with it via SSH, we need to start the setup related to SPFx.

In the VS code terminal window let’s run the following command to re-sync the package index files from their sources.

sudo apt-get update

After that let’s install the curl package using the following command

sudo apt install curl

Next step is to install node js. We have a couple of options for that

We will use the NVM option (so that we have multiple versions of Node js if needed in the future). So run the following command to install nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/0/37.2/install/sh | bash

We will then install node js version 14.15.5 (one of the supported versions for SPFx development)

nvm install 14.15.5

If there is an error while installing, trying restarting the terminal in VS code

Check if the correct version of node js is installed with the following command

node -v

Now that we have node js setup, let’s install the packages needed for SPFx. They are gulp, yeoman, yeoman generator for SPFx projects. Let’s also install an SPFx development utility tool called “spfx-fast-serve” which helps us in saving time while development.

npm i -g gulp yo @microsoft/generator-sharepoint spfx-fast-serve

Once that is done we can start creating SPFx projects. Let’s run the following commands:

mkdir projects && cd projects

mkdir spfx-hello-world && cd spfx-hello-world

This will create folder named “spfx-hello-world” and we will create our project in that folder. To that run the command:

yo @microsoft/sharepoint

Follow the instructions and wait for the command to complete. Once done, run the following:

spfx-fast-serve

npm i

This will configure spfx-fast-serve for the project.

Let’s now run the project with the following command

npm run serve

This will build the project and open browser window pointing to “https://localhost:4321/temp/workbench.html”.

VS code automatically takes care of forwarding the port with number 4321 i.e. the port number 4321 from the Azure VM is forwarded to our local machine and we can continue working in the same way like we do on our local machine.

If the SPFx web part / extension is present on a page in SharePoint site then we can debug the web part / extension directly by appending the following to the page URL

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

With spfx-fast serve, if we make any changes to the code, the SharePoint page which has the webpart (or the workbench page) is automatically refreshed to reflect the changes.

Watching file changes

In case changing the code in the files, doesn’t refresh the page to show the changes and/or a waring like below is seen in VS code then this is related to file watcher running out of handles because of the large workspace.

To resolve that issue we need to update a system file with the following commands:

cd /

sudo vi /etc/sysctl.conf

This will open the sysctl.conf file in the terminal. Type

i

to enter in insert mode. Scroll down to the bottom of the file and add the following

fs.inotify.max_user_watches=524288

Press esc to come out of insert mode.

Type :wq! to save and quit.

Verify the changes by executing the following command

sudo sysctl -p

If we then navigate to our project directory and run the project, we should not see the VS code warning and changing the code should be reflected on the page.

Summary

With the help of Azure machines, VS code and Remote-SSH extension we can easily set up a remote development environment. We can then install the packages required for SPFx development and start developing SPFx projects. The development experience is very smooth and since the VMs are powerful the build and debug time will be very less. With VS code in picture, the remote development experience feels the same as local development experience.

SharePoint developer at Content+Cloud.