Having the proper knowledge of setting up SharePoint development environment will help to know the technical aspect of how the set-up is performed. To know more, read here.
An Essential Guide Explaining Setting Up of SharePoint Framework SPFx Development Environment
Setting up a SharePoint development environment involves several key steps to ensure a successful deployment. Firstly, it’s important to plan the architecture, considering factors like the number of servers, their roles (e.g., web front-end, application, database), and scalability requirements. Next, installing and configuring SharePoint servers according to best practices is crucial.
This includes setting up service accounts, configuring web applications, and configuring the farm settings. Additionally, implementing security measures such as authentication, permissions, and SSL certificates is essential to protect the environment. Lastly, thorough testing and monitoring should be conducted to ensure the environment is stable, performant, and meets the needs of users.
Before we further go ahead to explain SharePoint intranet development set up process, let’s start with knowing SPFx in a better way.
What is SPFx
Microsoft defines it as “the SharePoint Framework (SPFx) is a page and Web Part model that provides full support for the client-side development, easy integration with SharePoint data and open-source modeling and you can use modern web technology and tools in your preferred environment and apps that are responsive and mobile ready from day one. The SharePoint Framework works for SharePoint online and SharePoint On-Premises 2016 Feature-Pack 2 & SharePoint 2019.
Traditionally, developing SharePoint web solutions involved using Visual Studio, with SharePoint binaries installed on Windows environments. However, the SharePoint Framework (SPFx) introduces a shift from this traditional approach. Unlike before, developers can now set up SPFx in any development environment, including Linux and macOS. This flexibility not only expands the developer base but also aligns with modern development practices of SharePoint maintenance services.
This empowers developers to work in environments they are comfortable with. SPFx’s cross-platform compatibility is a testament to Microsoft’s commitment to making SharePoint development more accessible and agile in today’s diverse development landscape.
Setting up the environment
In order to set-up the developing environment, start with Windows 7*64-bit machine to set up the SPFx development environment.
To begin developing with the SharePoint Framework (SPFx), the first step is to install Node.js. Node.js is a JavaScript runtime that allows you to build scalable and efficient applications. You can download the latest LTS (Long Term Support) version of Node.js, which is currently either version 8 or 10, from the official Node.js website. Once Node.js is installed, npm (Node Package Manager) will also be installed automatically. npm is a package manager for Node.js that allows you to easily manage dependencies and packages for your projects. After installing Node.js, you can use npm from the PowerShell command line to manage your SPFx projects and dependencies.
Install Node.js
For installation, follow this process, Click Next -> Next -> and finish.
In order to verify the version of Node.js, enter the below mentioned line
- node-v
Install Node Package Manager
To install npm, use below-written powershell code
- npm install -g yo gulp
In this context, the “-g” flag signifies a global installation, “yo” refers to Yeoman, which provides a predefined template for code checking, and “gulp” serves as a build tool, similar to MSBuild, to compile your code.
Before initiating the installation of SharePoint Framework (SPFx) on organizational systems, Microsoft advises verifying your proxy policy. This precaution is necessary because SPFx installs modules from the internet, necessitating a reliable internet connection for the installation process.
The screenshot above demonstrates an error that occurred when my proxy was enabled. However, upon disconnecting my system from the organizational network and connecting it directly to the ISP, the installation was successful.
The following code can be used to verify the version of npm.
Now it’s time to install Code Editor IDE
The tool helps to develop client-side web part
Now it’s time to install yeoman file directly from Microsoft
The below command is used to download and install the yeoman file.
- npm install -g @microsoft/generator-sharepoint
This is how the basic installation is done. Now, it’s time to login the SPFx by using the following code.
- yo @microsoft/sharepoint
After successful login, the following screen will appear.
This is all in Setting up the SharePoint Framework SPFx Development Environment.
