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

Introduction

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.

Steps

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

NodeJS

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

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

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

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 Started, and 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 

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

gulp trust-dev-cert
gulp build
gulp serve

Conclusion

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

Thanks