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 😀

Comments

Post a Comment

Popular posts from this blog

PowerShell to update SharePoint Online User Profile property from Azure AD

Image
Hi Friends, in this post, I am gonna walk you through the steps to update the SharePoint Online User Profile property from Azure AD. You may think, why this is necessary since SharePoint online will sync automatically with Azure AD. The tricky part is the auto-sync may take up to 24 hrs to sync Azure AD to SharePoint UPS. The next tricky part is not all the AAD profile properties are synced to SharePoint UPS. Only a few of the properties are synced and below are the list of properties relevant to the profile that is synced to SharePoint UPS User Name First name Last name Name Office phone Department Job title Manager Office Office phone What about the other properties like 'Mobile Phone' that are relevant to the user??? What about if there is a drastic change in the Organization structure and you want the SharePoint UPS to reflect immediately??? To resolve all these obstacles and issues, we need to use PowerShell Now you understand why there i...
Read more

SPFx - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data

Image
Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data  --> You are here In this post, I am gonna show you how we can use  DetailsList   from  UI Fabric  and  PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' CSV ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  S...
Read more

Using React Context API in SPFx

Image
Introduction   Hi friends, this blog post will guide you through the usage of  Context API  which is one of the new features introduced in the latest version of React   in SPFx projects .  What is React Context and When to use it In a normal React application, the properties are passed top-down from parent to child and then to the grandchild via props. It works great in simple react applications, but this will be very tedious for complex applications.  Context  provides us an easy way to share the props without having them pass through all the intermediate components.  Context  should be primarily used when the properties must be accessible by many components at different nesting levels. We must apply it with cautious because sometimes it makes the reuse of the components more difficult. How can we use it in SPFx?   I hope many of you are aware of the SPFx development model, where we might need to pass the properties that are captured ...
Read more