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 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:

  1. VM in Azure with SSH configured.
  2. VS code Remote-SSH extension to connect to the VM.
  3. Commands to execute to get started with SPFx development.

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

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

  1. We can install a specific version of node js by following the instructions here.
  2. We can install nvm and then choose a version of node js we want.

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

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

Microsoft MVP. M365 Developer Architect at Content+Cloud.