Getting ready for SharePoint development using node.js

There has been lot of discussion about new SharePoint Framework to be released soon. Here are instructions how you will get your development environment ready for new SharePoint programming model. You can also use these instructions to start working with OfficePnP JavaScript libraries.

Install required / recommended software

Visual Studio Code

You can download lightweight Visual Studio for free from Microsoft (https://code.visualstudio.com/).WebStack_VSCodeDownload

Installation of the VSCode is really simple. I have noticed that if you select “Open with Code” actions will help you working with VSCode better. So during “Select Additional Tasks” step, remember to select both Add “Open with Code”… checkboxes as shown on below.

WebStack_VSCodeInstallPath

Node.js

Next thing is to install Node.js to host your new development environment. You can download it from Node.js web site (https://nodejs.org/en/download/). Installation is Next – Next installation that won’t require any configurations.

Gulp

The first thing is to install gulp. Gulp needs to be installed globally so that every project can use it.

Open Node.js command prompt and type

npm install --global gulp-cli

It will install Gulp for you. This won’t take long.

WebStack_GulpGlobalInstall

After we have installed Gulp, we will create a folder for the project.

Create Project

Create project folders

C:\Users\janis>cd \
C:\>md Source
C:\>cd Source
C:\Source>md MyFirstProject
C:\Source>cd MyFirstProject
C:\Source\MyFirstProject>

WebStack_ProjectCreateFolders

Execute init command to setup project. Project initialization asks several questions about your project. This is almost identical for Visual Studio project window. At this time we don’t connect project to any Source code repository. Note that you need to use lowercase characters in project name.

Configure project

Install gulp to project. It will add required configurations and packages for Gulp to work.

init npm

WebStack_NpmInit

name: myfirstproject (Note that you need to use lower case characters here so you can’t accept default value.)
version: (Accept default value)
description: My First node.js project
entry point: (Accept default value)
test command: (Leave empty)
git repository: (Leave empty)
keywords: (Leave empty)
author: (Enter your name)
license: (Accept default value)

WebStack_NpmInitDetails

After accepting license, init will create package.json file for you like this. You need to confirm it.

WebStack_NpmInitFile

After you have initialized project, you can install gulp to your project.

install --save-dev gulp

WebStack_GulpLocalInstall

Open Windows Explorer and go to C:\Source.

Select MyFirstProject and select Open with code from Context menu.WebStack_OpenVSCode

Create a new file called gulpfile.js and copy following code there.

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

WebStack_VSCodeGulpFile

Then you can execute gulp. If you get error message that says “No gulpfile found”, you can have created gulpfile.js to wrong folder or made a mistake in its name.

WebStack_GulpExecuteDefault

Adding web server to project

Before you can start developing application, you need to enable web server to your project. This will be done by adding gulp-serve package to your project.

npm i --save-dev gulp-serve

WebStack_CmdInstallGulpServe

After we have added gulp-serve package to our project, we need to edit gulpfile.js to enable web server functionality. This will be done with following lines of code.

var serve = require('gulp-serve');

gulp.task('serve', serve(['app']));

WebStack_VSCodeGulpFileServe

Now you can execute following command in Node.js Command Prompt. System tells us that it will be serving files in localhost port 3000.

gulp serve

WebStack_VSCodeGulpFileServing

Open web browser and type to address bar http://localhost:3000. As you can see from the result, there is nothing to serve for the clients.

WebStack_BrowserNoContent

Creating content

Create a new folder called app and subfolders for it called scripts and styles.

Create also files called app.js, app.css, and index.html with following contents.

function greet() {
    alert("Hello");
}

WebStack_VSCodeAppJs

body {
    background-color: lightgray;
}

WebStack_VSCodeAppCss

<html>
    <head>
        <title>Hello world</title>
        <script type="text/javascript" src="scripts/app.js"></script>
        <link rel="stylesheet" type="text/css" href="styles/app.css" />
    </head>
    <body>
        <h1>Hello world!</h1>
        <button onclick="greet();">Greet</button>
    </body>
</html>

WebStack_VSCodeIndexHtml

Refresh your browser page. Now you can check that you can actually see our test page in your browser. If you click greet button, you will see greeting.

WebStack_BrowserTestContent

Connecting to SharePoint

Creating test site

Now we have created a working test bench and it is time to connect our code to SharePoint. The first thing is to create a test site for us. Log into you tenant and go to Site Contents page.

Select New | Subsite

WebStack_O365SiteContents

Enter site title, description and url.

Select Team Site as site template.

WebStack_O365NewSite

Editing page

Edit page and add Script Editor Web Part to the page.

WebStack_O365AddScriptWebPart

Edit Script Editor Web Part and click EDIT SNIPPLET link.

WebStack_O365EditScriptWebPart

Add following lines to Script Editor.

<script type="text/javascript" src="http://localhost:3000/scripts/app.js"></script>

<link rel="stylesheet" type="text/css" href=" http://localhost:3000/styles/app.css" />

<button onclick="greet();">Greet</button>

Accept changes. Now you can try to click Greet button. As you can see it won’t work. The problem is that our SharePoint site is using encrypted HTTPS connection and our added scripts are using normal HTTP connection. If you try this with Edge as I did in, you may notice that there is no way of getting our button work.

WebStack_O365GreetButtonNotWorking

If you open same page in Internet Explorer, you will see following notification. If you click the Show all content button, you will notice that background changes to light gray and you can click the button.

WebStack_IEShowAllContentNotification

Setting up HTTPS

We don’t always want to confirm that we actually want to see our development work. This requires that we will set up HTTPS service to our development environment.

Creating certificates

Before you will enable HTTPS service, you need to create certificates for you. I have created another post to cover this. http://salomaa.info/sharepoint/setting-up-https-certificates/

Configuring project

We need to copy our certificates to project folder.

Go to C:\Source\DevCertificate folder.

Select dev_sharepoint_local.crt and dev_sharepoint_local.key files and copy files to C:\Source\MyFirstProject folder.

Webstack_ExplorerCopySource

Webstack_ExplorerTargetSource

Open gulpfile.js in Visual Studio Code and add following lines to it.

gulp.task('serve-https', serve({
  root: ['app'],
  port: 443,
  https: {
    key: 'dev_sharepoint_local.key',
    cert: 'dev_sharepoint_local.crt'
  }
}));

WebStack_VSCodeGulpFileHttps

Open Nodejs Command Prompt.

Go to project folder and start gulp with https

gulp serve-https

WebStack_GulpServeHttps

Testing connection

Open your browser and verify that connection to https://dev.sharepoint.local is actually working and you won’t get any certification errors.

webstack_browserhttps

Modifying SharePoint

Now we can modify our scripts from SharePoint.

Go back to your SharePoint test page and replace existing code with this.

<script type="text/javascript" src="https://dev.sharepoint.local/scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://dev.sharepoint.local/styles/app.css" />
<button onclick="greet();">Greet</button>

Click Insert, accept changes and save page.

WebStack_O365EditScriptWebPartHttps

Now you can see that background has been changed to light gray, button works and you don’t get any warnings about the page.

WebStack_O365WorkingScript

Now we have finalized the first part of the SharePoint development with Node.js.

 

One thought on “Getting ready for SharePoint development using node.js

  1. Pingback: Develop on SharePoint 2013 On Premise with TypeScript, PnP-JS-Core and Visual Studio Code (on a Mac) | Let's Rock with Azure !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.