Skip to main content

Getting started with SharePoint Framework (SPFx) setup from Beginning

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 setup.

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


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 below code into setting.json file in the file > Prefrence > 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

Labels:

Comments

Post a Comment

Popular posts from this blog

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 ...
Post a Comment
Read more

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...
7 comments
Read more

SPFX Interview question for 2023

SPFx Interview Questions for 2023 Question 1: What is SharePoint Framework (SPFx)? Answer: SharePoint Framework (SPFx) is a development model introduced by Microsoft for creating client-side web parts and extensions for SharePoint Online and SharePoint 2019. It is based on modern web technologies like JavaScript, TypeScript, and React, providing a rich and responsive user experience. Question 2: What are the key advantages of using SPFx for SharePoint development? Answer: SPFx offers several advantages, such as: Responsive and mobile-ready web parts and extensions. Seamless integration with SharePoint data and services. Support for modern web development practices and tools. Easy deployment and hosting options. Enhanced security and isolation through the SharePoint app model. Question 3: Can you explain the structure of an SPFx solution? Answer: An SPFx solution consists of the following key components: Web Parts: These are the building blocks of SPFx solutions, representing the vi...
Post a Comment
Read more