Introduction to SharePoint Framework (SPFx) – Zero to Hero Series – Part Two

This is the second article in SharePoint Framework (SPFx) – Zero to Hero series. I will recommend reading the first article (link given below), before going through this article.

• Introduction to SharePoint Framework (SPFx) – Zero to Hero Series – Part 1

In this article, we will look more into Node-Based Development and its related concepts.

Let’s create a directory by writing mkdir newproj and go into that directory. It will create a new folder with the name newproj.



Write npm init –yes (If you are not going to write yes, it will ask for a number of questions). With yes, we just answered default yes to all those questions and it writes a file called package.json. The package.json file is central to all the Node-based projects. It can be considered as a setup file of the project. It tells about the name, description, version and other details. So, for example, if I am writing a library that others want to use, then version is required.

Let’s open this file in VS Code Editor and arrange both, console and editor, in one screen.



Let’s write a program that works with dates. I have used here an in-built library called moment.js. Therefore, I need to add moment.js in my project, which I can do in two ways. Either I can add “dependencies” and version in the package.json, or I can write in Cmder Console, the command as below,

Once moment.js is installed, it will add all its dependencies on the local drive and dependencies get added in the package.json file.





Let’s create an index.js file, where we will write the code to get the current date and time. Now, here is the catch, which is very important. If you are using an earlier version, then you can create a file with the command touch index.js, however, in your environment, you might get an error – 'touch’ is not recognized as an internal or external command, operable program or batch file. So, you need to create the file using type nul >> filename.

When you will run the file using the command – node index.js, you will get the desired output as shown below.



There is one more way to run the index.js file. We can specify the same command (node index.js) in the scripts attribute. We will use a reserved command named “start” and write, “start”: node index.js (we can write as many scripts as we want).

After this, to run, I will write – npm start, and it will give the same output.



So far so good. Now, the question arises how to give our code file (index.js) to the client. Shall we give the single file to the client, but since it has dependencies on moment.js (for example), shall we give the complete folder (newproj) to the client. Still, we will have issues because it might be possible that the moment.js is deprecated in our code. So, we need a package manager and one of the most popular package managers is Webpack, which we will see below.

Introduction to Webpack

SPFx uses Webpack. It treats webpack like a black box, and the purpose of webpack is, at runtime, it will help you to load the appropriate modeules. So, we don’t want one file now-a-days to ship the code, instead we want to bundle our code into modules and we will load the module when we want this to happen.

Webpack allows bundling literally everything like CSS, JaavScript, images and even things that are coming from Internet like CSS style background URL. Webpack will bundle all these files and it will become the part of the build process.

So, let’s first install the webpack using the command npm install webpack –save-dev. This command will drop webpack into the node_modules folder and a lot many folders will get created.



Note

I used dev in the above command because I want intended to be a dev dependency, which means I do not want to ship the webpack; I just want to use it during development time.

Because of this command, a node with the name devDependecies appears in package.json.

Summary

In this article, we saw how we could start with Node-based development and we saw a small program based on dates using moment.js.

In addition, we looked into Introduction of WebPack and how to install it.

The next article will focus on how to use WebPack and introduction to Yeoman.