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/).
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.
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.
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>
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
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)
After accepting license, init will create package.json file for you like this. You need to confirm it.
After you have initialized project, you can install gulp to your project.
install --save-dev gulp
Open Windows Explorer and go to C:\Source.
Select MyFirstProject and select Open with code from Context menu.
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
});
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.
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
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']));
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
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.
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");
}
body {
background-color: lightgray;
}
<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>
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.
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
Enter site title, description and url.
Select Team Site as site template.
Editing page
Edit page and add Script Editor Web Part to the page.
Edit Script Editor Web Part and click EDIT SNIPPLET link.
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.
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.
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.
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'
}
}));
Open Nodejs Command Prompt.
Go to project folder and start gulp with https
gulp serve-https
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.
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.
Now you can see that background has been changed to light gray, button works and you don’t get any warnings about the page.
Now we have finalized the first part of the SharePoint development with Node.js.
