[Updated] Develop on SharePoint 2013 On Premise with TypeScript, PnP-JS-Core and Visual Studio Code (on a Mac)

UPDATES AND IMPROVEMENT AT THE END OF THIS POST

Dear Fellows,

Something awesome happened to me a year a go : I met Sébastien Levert. This guy, one of the best SharePoint Developer « in the world » (as Jeremy Clarkson says), told me he would not use a PC/Visual Studio since two years, and he was always developing on a Mac on Office 365 / SharePoint Online.

55335972.jpg

Since this day, I had only one idea : doing the same thing, on premise. And today, I will show you the path to achieve this goal.

This technic is not perfect right now, but I will improve it, maybe with your help ! And there is another thing : I’m not developing timer jobs, event receivers or workflows with this technic. Only pages. But that’s what my client wants right now.
If you are on the cloud, you should use Azure Jobs, or SharePoint Webhooks, or Microsoft Flow, …

Also, please quote this method is not linked to the new SharePoint Framework, which is quite better, but only work on SharePoint Online and will work (later) on SharePoint Server 2016.

  1. Install Visual Studio Code
  2. Install NodeJS
  3. Optional : Install Homebrew (you will need it soon or later)
  4. Optional but a must have : Install Oh My Zhs
  5. Optional : Git stuff
  6. Install the tslint extension in VS Code :
    1. Press Shift + Ctrl + « p » to open the command panel
    2. Begin typing « install extension » and select the command when it appears in view
    3. Begin typing « tslint » and select the package when it appears in view
    4. Restart Code after installation
    5. Open your console and type npm install -g tslint to globally install the npm package
  7. Install TypeScript with Terminal :  npm install -g typescript
  8. Install typings with Terminal :  npm install -g typings
  9. Install gulp with Terminal :  npm install -g gulp-cli
  10. Install WebPack with Terminal : npm install -g webpack

Create and set your project
Now, you are ready to create a « Project ».
Forget the old Visual Studio way to create a Project. Now, you create and folder, and it’s over : you created a Project.

So, create a folder where you want, and go in it :
Capture d’écran 2016-10-08 à 16.22.32.png

Initialize your new Project : npm init
You can validate everything with the default values.

Now install gulp in your project : it’s a web server which will be very helpful.
We also add to the project jQuery, typings and of course the PnP-JS-Core
npm install --save-dev gulp-serve
npm install --save-dev gulp
npm install --save-dev jquery
npm install --save-dev typings
npm install --save-dev sp-pnp-js

Now, open the folder with Visual Studio Code, and, in the root folder, add a file called « gulpfile.js » and paste this code inside :

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

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

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

Capture d’écran 2016-10-08 à 17.23.58.png

Type CMD + OPTION + P to open the new Visual Studio stuff you can ask whatever you want  , kind of « less brain child of Cortana for developers », and type : « Configure task runner » in it :

Capture d’écran 2016-10-08 à 16.57.48.png

Select « TypeScript – tsconfig.json ».

Capture d’écran 2016-10-08 à 17.00.37.pngA file is created, just save it.

At the root of the project, add a « tsconfig.json » file, paste this code in it :

{
 "compilerOptions": {
 "target": "es6",
 "module": "commonjs",
 "sourceMap": true
 }
}

Capture d’écran 2016-10-08 à 16.52.41.png

Create your app

Add three folders and files ; and paste the code inside :
– app/index.aspx :


<html>

<head>
<title>SharePoint PnP test bench</title>
<style>
body {
font-family: Verdana, Geneva, sans-serif;
}

.example {
margin: 10px;
}

.example .code {
border: 1px solid lightgray;
padding: 10px;
font-family: "Lucida Console", Monaco, monospace;
}
</style>
</head>

<body>
<h1>SharePoint PnP test bench</h1>
<div class="example">

<script type="text/javascript" src="http://127.0.0.1:3000/scripts/bundle-app.js"></script>
	<link rel="stylesheet" type="text/css" href="styles/app.css" />
<div id="pnp-test-bench"></div>
</div>
</body>

</html>

 

– app/scripts/app.ts

import * as $ from "jquery";
import pnp from "sp-pnp-js";


pnp.sp.web.select("Title").get().then(function(web){
 $("#pnp-test-bench").text("This is the title of the current Web : " + web.Title);
});

– app/styles/app.css (just add a comment in this, we don’t care for now)

Now, type CMD + MAJ + B to transpile the TypeScript file to Javascript. So you’ll see two new files in the « scripts » folder : app.js and app.js.map

Capture d’écran 2016-10-08 à 17.13.51.png

Webpack
So, now, we will create an single JS file with your code and all of needed dependences.
Go back in the Terminal, cd to the « scripts » folder, and type :
webpack ./app.js bundle-app.js

Capture d’écran 2016-10-08 à 17.17.25.png

Gulp
Cd to the root of your project and run the web server :
gulp serve

SharePoint
In a SharePoint Library drag and drop the index.aspx file. Click on it to open it, you should see this :

Capture d’écran 2016-10-08 à 17.28.02.png

The good thing with this way is : you can debug your JS with local files : you don’t need to re-upload (or re-deploy) it to SharePoint every time. BUT you still need to re-transpil (with CMD+MAJ+B) it every time, and running the web pack command…

Maybe I will find a way to automatize this part, I’m almost sure about that !

In a next post, I will explain how to provision those files properly on SharePoint ! And by the way, how to provision lists, sites , … with the soooo good PnP Provisioning Engine !

Do not hesitate if you have any question !

[UPDATE : ADD WATCH TO TRANSPILE AND « WEBPACK » YOUR TS/JS FILES] 

I’m a lazy guy, so I don’t want to re-build my project, and launch a webpack command every time I’m modifying a TS file.

1. Add a « webpack.config.js » file at the root of the project, and paste this code :

module.exports = {
 entry: "./app/scripts/app.js",
 output: {
 filename: "./app/scripts/bundle-.js"
 }, 
 watch: true
}

Capture d’écran 2016-10-09 à 11.23.32.png
Now, you need to open, at least, three (little) Terminal windows, and keep them open during you are coding. The processes you are launching inside will do the job for you.
Terminal window 1 : TSC (the tool which transpile your TS files in JS files)
cd app/scripts
tsc *.ts --watch

Note : this Shell can show some errors, but it’s not a problem if you see « Compilation complete. Watching for file changes. »

Capture d’écran 2016-10-09 à 11.27.55.png

Terminal window 2 : Webpack (the tool which bundle all your JS files and dependencies in a single useful JS file)
webpack --watch -d

Capture d’écran 2016-10-09 à 11.33.36.png

Terminal window 3 : Gulp (the web server)

gulp serve

Capture d’écran 2016-10-09 à 11.33.53.png

So, now, when you’ll make a change at your TypeScript files, they will be automatically and properly transpiled and bundled when you’ll save them !

References & Thanks to :
http://salomaa.info/sharepoint/creating-a-pnp-js-core-workbench/
http://salomaa.info/sharepoint/getting-ready-for-sharepoint-development-using-node-js/
https://github.com/OfficeDev/PnP-JS-Core/wiki/Getting-Started
https://code.visualstudio.com/Docs/languages/typescript

Publicités