Skip to main content

Step-by-step guide to setup SPFx Environment in SharePoint Online


SharePoint is a framework, which is the same as other web framework and used to implement Web Applications, but the major changes are the only organization are using it for internal purposes or we can say uses for Intranet perspective for internal staffs to share the documents, collaboration and other activity

if you are a beginner and learn SharePoint online and its latest framework SPFx then you are in the right place. in this blog, we will learn how we can set up.


to set up, the SharePoint Framework is easy as cooking Pen Cake, need to run few commands on Nodejs command prompt
and you are ready to build the Web part


Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser, for the environment setup we can install the node js version of 10.16.1 by clicking on this link Node JS 

once the setup is installed, now, go to the start menu and click node js command Prompt
and run the below commands


gulp is an open-source JavaScript toolkit created by Eric Schoffstall used as a streaming build system in front-end web development

npm install -g gulp


TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and trans-compiles to JavaScript.

npm install -g typescript 


Yeoman is an open-source client-side scaffolding tool for web applications. Yeoman runs as a command-line interface written for Node.js and combines several functions into one place, such as generating, in the SPFx it is the solution creator

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

once it is done, we are near to complete the setup, now open the visual studio code and run the command to create a solution

To update your Local version npm install gulp@version_you_need

To update CLI version npm install -g gulp@version_you_need

yo @micososoft/sharepoint

and select the solution name as Hello Galaxy and select the ReactJS as a framework
you can refer to this link for Getting Startedand then run the below commands

if you getting any execution policy-related issue then, paste the below code into the setting.json file in the file > Preference > Setting > Edit Setting 
"": ["-ExecutionPolicy", "Bypass"]

gulp trust-dev-cert
gulp build
gulp serve


so you can analyse, the setup creation of the SharePoint Framework is very easy,
after the gulp serve, it opens the local host workbench, from there you can select the web part.

to implement a carousel with the React JS and SPFx Getting Started

Hope this will help you,
Please share your comments and suggestions



  1. Vishal
    I 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.


Post a Comment

Popular posts from this blog

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (SPFx) web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question 1: How would you approach implementing this functionality in an SPFx web

Power Apps modern driven app Interview Question and answer

Question 1: What is a Power Apps modern driven app? Answer: A Power Apps modern driven app is a low-code/no-code application development platform provided by Microsoft. It allows users to create custom applications that can run on various devices and platforms without the need for extensive coding. These apps can be built using a visual interface and can integrate with different data sources. Question 2: What are the key components of a Power Apps modern driven app? Answer: The key components of a Power Apps modern driven app are: Screens : Screens serve as the user interface for the app and can include multiple layouts, controls, and data visualizations. Data sources : These are the various repositories where the app can retrieve and store data, such as SharePoint lists, SQL databases, Excel files, etc. Connectors : Connectors enable integration with external services and systems, allowing data to be fetched or updated. Formulas : Power Apps uses a formula language called Power Apps

Interview Question of Advanced SharePoint SPFx

1. What is WebPack? A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins. WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js. 2. What is PowerShell.? PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS. 3. What is bundling and Minification? The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the s