VS code + SSH + Azure VM setup for remote SPFx 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.

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

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.

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.

  1. We can install nvm and then choose a version of node js we want.

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anoop

Anoop

Microsoft MVP. M365 Developer Architect at Content+Cloud.