In this blogpost, we explain all the things you need to develop SharePoint Framework components. While the SharePoint framework works with local tools, the following things need to be installed globally (across your entire system).

Integrated development environment

An integrated development environment (IDE) is a software application that helps software developers develop software. An IDE provides a number of tools for writing, testing, debugging, and deploying software, and integrates these tools into one easy-to-use interface.

An IDE often includes the following features:

• Code Editor: A text editor that allows you to write and edit code.
• Compiler or interpreter: A program that converts or executes the code into machine code.
• Debugger: A tool to detect and fix errors in the code.
• Build and project management: Tools to build and organize the software.
• Integration with version control systems: such as Git or SVN
• Code navigation and autocomplete: tools to quickly navigate through the code and write quickly.

You are free to use any IDE, there is no IDE tied to the development of SharePoint Framework components. One of the possibilities is to use the free IDE Visual Studio Code. You can download it via https://code.visualstudio.com

Node.JS

Node.js is an open-source JavaScript framework used to execute server-side scripts. It is built on Google Chrome’s V8 JavaScript engine and provides a JavaScript environment for the server. This makes it possible to use JavaScript for back-end tasks such as creating an HTTP server, connecting to a database, and performing computations. Node.js also has an extensive standard library and a large number of modules available through npm, the Node.js Package Manager, which help developers develop web applications quickly.

Node.js consists of 2 releases:

• Long Time Support (LTM)
• Current version

SharePoint Framework only supports the LTS versions.

To check if your node.js already installed, you can run the following command from your command line:

    node –-version

If node.js is not already installed in your area, you can download it from: https://nodejs.org/en/download

npm

Node Package Manager (NPM) is a package manager for the JavaScript programming language. It is installed by default with Node.js and is used to install, manage, and run JavaScript modules.

With npm, you can easily install external libraries and modules that complement your JavaScript projects with new functionalities. These modules are stored in a central repository called npm registry. This allows you to use the modules in your own projects without having to write the code yourself.

Npm works via the command-line interface (CLI) and allows you to execute various commands such as installing packages, upgrading or uninstalling packages, viewing versions of packages, etc.

When you install a package, the associated files are stored in a folder called node_modules in your project folder. You can then import these modules into your JavaScript files via the import or require syntax.

Npm is a powerful tool for JavaScript developers, as it allows them to quickly and easily access a large amount of open-source modules and libraries, reducing their development time and increasing their productivity.

nvm

SharePoint framework has many versions that follow each other in rapid succession. When you develop intensively over a longer period of time, you may develop different components with different SPFx versions. To manage this, we recommend the use of NVM.

NVM (Node Version Manager) is a command line tool that you can use to install and manage different versions of Node.js on your computer. This is useful if your projects rely on specific versions of Node.js or if you want to test the latest version of Node.js without disrupting your existing settings.

With NVM, you can install multiple versions of Node.js and easily switch between versions. For example, you can use an older version for an older project and a newer version for a new project.

The use of NVM is also useful for developers who want to work with different versions of Node.js on a server or in a virtual machine. This is important because some modules only work with specific versions of Node.js.

NVM is available for Windows, macOS, and Linux. You can install NVM by following the installation instructions on the project’s GitHub page. (https://github.com/coreybutler/nvm-windows) Once installed, you can install and manage different versions of Node.js with commands such as:

• “NVM install {node version number}”: to install a node.js version
• “NVM List”: to display the installed node.js versions.
• “NVM use {node version number}”: to switch to a specific node.js version and use it.

Tip: You can install the following 3 tools with the following command:

     
    npm install gulp-cli yo @microsoft/generator-sharepoint –-global

Gulp

Gulp is a task runner or task automation tool, which you can use to automate tasks that often occur while developing a website or web application. These tasks may include minifying CSS and JavaScript files, converting Sass to CSS, optimizing images, and running tests.

Instead of manually performing these tasks, you can automate them with fly. You define the tasks in a gulpfile (a JavaScript file) and then execute them with a command in the command line interface.

Gulp uses a pipeline model in which tasks are executed in the order of their definition. For example, you can first run a task to minify CSS files, followed by a task to deploy those files to a production environment.

One of the advantages of gulp is that it is code-based, rather than configuration-based. This makes it easy for developers to read and understand, and provides the flexibility to create custom tasks. Gulp also uses Node.js, so you can use the same language for both the backend and frontend of your project.

In conjunction with other tools such as npm and webpack, you can use gulp to create an efficient and automated workflow for your web development projects.

     
    npm install gulp-cli –global

Webpack

Webpack is a module bundler for JavaScript applications. It helps merge various JavaScript modules, along with their dependencies, into a single file (or multiple files) so that it can be easily loaded by a web browser.

Webpack uses a configuration file called webpack.config.js, in which you can specify the settings for the bundling. This specifies which files should be processed, which plugins should be used, and what output should be generated.

Webpack also supports the use of loaders, which are small programs that can handle specific types of files, such as Sass to CSS, TypeScript to JavaScript, and images to data URLs. This makes it possible to use a wider range of file types in your project.

Webpack is also efficient in detecting dependencies between modules and therefore reduces the number of files that need to be loaded by the browser, this results in a faster page load time. Webpack is a popular choice among developers, as it offers a flexible and powerful solution for bundling JavaScript modules and reducing the size of the JavaScript bundle. It can be used in conjunction with other tools such as npm and gulp for an efficient and automated web development workflow.

Yeoman

Yeoman is an open source command line tool that you can use to scaffold web applications quickly and efficiently. It helps you automate the setup of a new project, including creating folder structure, installing dependencies, and configuring build tools.

Yeoman works with “generators” that provide specific templates and configurations for different types of web applications. There are several generators available for different frameworks and libraries, such as AngularJS, React, Vue.js, Express, etc.

By using yeoman, you can quickly set up a working structure for your project, and you can spend your time developing your application’s unique functionality.

Yeoman also allows you to create new generators, allowing you to set up the structure that meets the specific requirements of your project.

In conjunction with other tools such as npm and webpack, you can create an efficient and automated workflow for your web development projects, allowing you to set up a working application faster and focus your time on the unique aspects of your project.

     
    npm install yo --global

@microsoft/generator-sharepoint

@microsoft/generator-sharepoint is a Yeoman generator created by Microsoft for creating SharePoint solutions using the SharePoint Framework (SPFx). It helps you quickly set up a new SPFx project with a pre-configured project structure and a set of common dependencies.

This generator provides a number of templates and options for creating different types of SharePoint solutions, such as:

• Web parts
• Extensions
• Library components.

It also includes additional features such as support for building and deploying your solutions using Azure DevOps and integration with Office 365 CLI for managing SharePoint assets.

It’s important to note that this generator isn’t the only option available for creating SPFx solutions, but it’s a good alternative if you want to use a tool from Microsoft and get the most out of the SharePoint Framework and its latest features.

     
    npm install @microsoft/generator-sharepoint --global

Trusting the Self-Signed Developer Certificate

The SharePoint Framework’s on-premise web server, which is used when testing your custom solutions from your development environment, uses HTTPS by default. This is implemented using an SSL certificate signed by the developer themselves. Self-signed SSL certificates are not trusted by your developer environment. You must first configure your development environment to trust the certificate.

Every SharePoint Framework project includes a utility task in the form of a Gulp task. You can choose to do this now or wait until you’ve created your first project.

After a project is created using the Yeoman generator for the SharePoint Framework, run the following command from the root of the project.

     
    gulp trust-dev-cert