Step-by-Step Guide to Set Up SharePoint Framework (SPFx)
By Vishal Thakur
Introduction
SharePoint Framework (SPFx) is a modern development framework used to build web applications for SharePoint. Unlike traditional frameworks, SPFx is primarily used for internal purposes, such as intranet portals, document sharing, and collaboration among staff.
If you are a beginner and want to learn SharePoint Online and its latest framework, SPFx, you are in the right place. In this blog, we will walk you through the setup process step by step.
Steps to Set Up SharePoint Framework (SPFx)
1. Install Node.js
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine. For SPFx development, you need to install Node.js version 10.16.1. You can download it from the official Node.js website.

Once Node.js is installed, open the Node.js command prompt and run the following commands to verify the installation:
node -v
npm -v
2. Install Gulp
Gulp is a JavaScript toolkit used as a streaming build system in front-end web development. To install Gulp globally, run the following command:
npm install -g gulp
3. Install TypeScript
TypeScript is a programming language developed by Microsoft. It is a superset of JavaScript and adds optional static typing. To install TypeScript globally, run the following command:
npm install -g typescript
4. Install Yeoman
Yeoman is a scaffolding tool for web applications. It helps in generating SPFx solutions. To install Yeoman and the SharePoint generator, run the following commands:
npm install -g yo
npm install -g @microsoft/generator-sharepoint

5. Create an SPFx Solution
Once all the tools are installed, open Visual Studio Code and run the following command to create an SPFx solution:
yo @microsoft/sharepoint
Follow the prompts to name your solution (e.g., "Hello Galaxy") and select ReactJS as the framework.
6. Build and Serve the Solution
After creating the solution, navigate to the project folder and run the following commands to build and serve the solution:
gulp trust-dev-cert
gulp build
gulp serve
If you encounter any execution policy issues, add the following line to the settings.json
file in Visual Studio Code:
"terminal.integrated.shellArgs.windows": ["-ExecutionPolicy", "Bypass"]
Conclusion
Setting up the SharePoint Framework (SPFx) is straightforward. By following the steps above, you can create and deploy SPFx solutions for SharePoint. After running gulp serve
, the local workbench will open, allowing you to test your web part.
For more advanced topics, such as implementing a carousel with ReactJS and SPFx, check out our Getting Started Guide.
I hope this guide helps you. Please share your comments and suggestions. Thank you!
Vishal
ReplyDeleteI like you steps by steps explanation in Video and also most of people facing issue when install npm install -g gulp command error resolve steps also covered.
I appreciate your feedback, Thank you
DeleteGood work
ReplyDelete