Recently, I got a new laptop and wanted to set up SharePoint Framework development environment. I thought to document it with a screenshot so that it would be useful for those who are doing it for the first time. As SPFx development is open source driven, and a whole new set of toolchains are used to develop the SPFx solution. There are many introductory articles on understanding this toolchain and how it can be compared with typical previous SharePoint development models, so I won't get into those details. Our focus on this article will be to set up a development environment.
Please note that I will follow official Microsoft
link but we will see each step in detail in this article. I am assuming, that we already have an Office 365 tenant which will be used later. If not, use this
link to set up. Please note that we will be setting up the environment for a Windows 10 64 bit machine.
Step 1 - Download and Install Node JS LTS Version 10
Run the installer
- On the welcome screen, click next
- Next screen would be End-user license agreement, check 'I agree...' and click next
- Next screen select destination path 'c:\Program files\nodejs', you can choose to install on another path also.
- In the next screen, to select features, keep everything default
- In the next screen, we will get the Install button. Click on Install.
- Based on your security settings, it might ask to allow the below. Click yes
- Once completed your will get the below screen, click Finish
That's it, Node JS is installed. Click on Windows Icon and we will see Node JS command prompt. Open Node JS command prompt.
We should get the below screen,
Step 2 - Installing Visual Studio Code
We can use any code editor to develop SPFx solution but mostly it's used in Visual Studio code. Download Visual Studio code stable version from the below link.
https://code.visualstudio.com/ - Please make sure you download System installer(refer below screenshot)
Run the setup wizard and follow along with the instructions to install, it is pretty much self-explanatory. In Additional task link below, use the below preferred option. It will help you later.
You should get the below success message when completed.
Step 3 - Install Yeoman and Gulp
These are Node JS based tools which help in creating, building, and debugging SPFx solutions.
- Go to Node JS command prompt
- Enter the below command
- It will download yeoman and gulp packages, we are using -g parameter so that it would be installed globally across your Node JS environment.
- You should see the below screen once the installation is completed
Step 4
Install SharePoint Yeoman generator.
- Next, we will install the SharePoint Yoeman generator which will help in creating the SPFx solution project structure.
- Run the below command in Node JS command prompt.
- npm install -g @microsoft/generator-sharepoint
- You should see the below success message.
Step 5 - Trusting self-signed Developer certificate
- SharePoint local server to test web parts uses HTTPS. This is developed using a self-signed developer certificate. So we need to trust the self-signed developer certificate for our development environment.
- This needs to be done only once, but it would need to run on SPFx project root folder. So you can do this once we create our first Hello world client-side web part
- Run the below command in Node JS command prompt.
Step 6 - Create Hello World Web part
You can refer to this
link for more detailed steps.
- Go to Node JS command prompt, go to the required path where you wanted to create the SPFx project.
- Use 'md helloworld-webpart' command to create a directory and go to that directory using 'cd helloworld-webpart'
- Once in your folder, use below command to create a new SPFx project
- It will take you to some questions one by one to create a required project based on your requirements.
- Use the below options
Once created we will see the below screen
Now let's run 'gulp trust-dev-cert', you will be asked to install a certificate. Click yes
Once completed, we will see the below screen.
Step 7
Preview web part in local workbench.
Run the below command.
It should open local workbench like below, click on Add icon and add Hello world web part to the page.
You should see the below output,
If you see the above output, it means you have successfully set up your SPFx development environment and created your first client-side web part.
Thanks for reading, Happy Coding...!!!