SPFx Development Environment setup using WSL 2 Distros in Windows 10

Hi Friends, this post will walk you through setting up the SPFx development environment using WSL 2 in Windows 10.

This post covers only the environment setup for SPFx, not the setup of WSL 2. Please follow the below link to set up the WSL 2.
https://docs.microsoft.com/en-us/windows/wsl/wsl2-install

Once the above is done, navigate to the Microsoft Store and search for WSL. You should be able to see many like the screenshot below

You can use any of the distros listed above, but my suggestion is to use Ubuntu latest or Debian, which is tested. This post will use the Debian distro for the setup. Once you had chosen the distro, install it from the Microsoft Store. Start the distro from the start menu.

When you start the distro for the first time, it will run some pre-requisites and install some required files. You will be asked to enter the username and password for the OS. Make sure you remember the username and password, which we may use it for later.

Once it is done, navigate to the root folder by typing 'cd ~' and run the below command.

sudo apt update

The above command doesn't actually install new versions of the software. Instead, it updates the package lists for upgrades for packages that need upgrading, as well as new packages that have just come to the repositories.

We will use curl for installing bash if you are using Ubuntu distro, then curl is available by default, if it is not available, please execute the below command to install the latest curl.

sudo apt install curl

Once the curl is installed, we have to install bash for node and other installation. Use the below command to install bash with nvm.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

we have to install node, the best practice is to install node using NVM. Please use the below command to install the node using nvm.

nvm install 10.18.0

We had installed node version 10.18.0, which is the latest supported version for SPFx. Next, we have to install the build-essentials which is required for SPFx compatibility. Use the below command.

sudo apt install build-essential

Now we are ready to install the Yeoman and gulp which is the base for the SPFx. Use the below command.

npm install -g yo gulp

Once the above is done, now install the SharePoint Framework generator for yeoman. Use the below command.

npm install -g @microsoft/generator-sharepoint

Now the environment is ready to rock. There is one optional component which you can install if you need, SPFx generator from PnP which is very useful and it enables us to install some of the packages while setting up the project. Use the below command.

npm install -g @pnp/generator-spfx

Now all the setup is done, how do you intend to open the code, the best for SPFx is to use VS Code. Install the below extension for VS Code, so that you can open your code in Linux environment directly in VS.

Once it is installed and restarted the VS Code, you will get a new icon on the left menu bar and clicking on it will open the remote containers either from WSL targets or VS Online.

Now your setup 100% ready to rock with SPFx.

You can follow the above steps to setup the distro on your own or you can download the distro using Debian from the link below. Following are the settings inside the distro

User Name: sp

Password: test123
Installed yo, gulp, sharepoint-generator, spfx pnp generator

Click here to download the distro and use the command below or follow this link to import the distro.

wsl --import distro_name install_location file_name.tar

Folks, please try WSL 2, its really a great tool for developers. Enhanced improvements in the performance particularly for SPFx without overclocking the code. Share your experience in comments for others to explore.

Happy coding. Cheers 😀