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:
- VM in Azure with SSH configured.
- VS code Remote-SSH extension to connect to the VM.
- 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.
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).
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 can install a specific version of node js by following the instructions here.
- 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
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.
