Getting started with SharePoint Framework (SPFx) setup from Beginning

How to Set Up SharePoint Framework (SPFx) for Beginners

Author: Vishal Thakur

Introduction

SharePoint is a framework used to implement web applications, primarily for internal organizational purposes like document sharing, collaboration, and other activities. If you're a beginner looking to learn SharePoint Online and its latest framework, SPFx, you're in the right place. In this blog, we'll walk you through the setup process.

Steps to Set Up SharePoint Framework

Setting up the SharePoint Framework is as easy as baking a pancake. You just need to run a few commands in the Node.js command prompt, and you'll be ready to build your first web part.

1. Install Node.js

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment. For SPFx development, install Node.js version 10.16.1 from the official Node.js website.

Once installed, open the Node.js command prompt and run the following commands:

2. Install Gulp

Gulp is a JavaScript toolkit used as a streaming build system in front-end web development. Install it globally using the following command:

npm install -g gulp

3. Install TypeScript

TypeScript is a programming language developed by Microsoft. It adds optional static typing to JavaScript and is designed for large applications. Install it globally using:

npm install -g typescript

4. Install Yeoman

Yeoman is a scaffolding tool for web applications. It helps generate SPFx solutions. Install Yeoman and the SharePoint generator using:

npm install -g yo
npm install -g @microsoft/generator-sharepoint

5. Create Your First SPFx Solution

Open Visual Studio Code and run the following command to create a new 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 Your Solution

After creating the solution, run the following commands to build and serve your project:

gulp trust-dev-cert
gulp build
gulp serve

If you encounter execution policy issues, add the following line to your settings.json file in Visual Studio Code:

"terminal.integrated.shellArgs.windows": ["-ExecutionPolicy", "Bypass"]

Conclusion

Setting up the SharePoint Framework is straightforward. After running gulp serve, your local workbench will open, allowing you to test your web part. For more advanced topics, check out our guide on implementing a carousel with ReactJS and SPFx.

We hope this guide helps you get started with SPFx. Please share your comments and suggestions below!

Thanks for reading!