SharePoint Online, SP 2016 – Development Framework (SPFx) using open source web stack

Amit Patil

Amit Patil

If you found this useful, please like Facebook Page

Master in Computer Applications with 9 Years extensive experience in Software Development with technologies like SharePoint, ASP.NET, SQL Server.

write to admin@sharecareinspire.com for contribution
Amit Patil

>> SPFx Web Part with Angular2 and TypeScript      >> Related Articles

Background

As technologies and connectivity have evolved, JavaScript language and performance have advanced substantially. We can build responsive interfaces that run in browsers as well as a hybrid, native HTML experience on phones. SharePoint is evolving to embrace new trends.

Introduction

This article will take you through the basics of open source web stack and steps for setting up the environment for SharePoint Framework (SPFx) Web part development.

SharePoint Framework (SPFx)

SharePoint Framework
SharePoint Framework

SharePoint Framework is a Page and Part model that fully supports client-side development, easy integration with the Microsoft Graph, Web APIs, SharePoint Data and support for open source tooling.

Open Source Web Stack

Open Source StackDescriptionMicrosoft Equivalent
Node.jsIt is an open source and cross platform JavaScript based runtime environment built on top of Chrome’s V8 JavaScript engine for developing JavaScript based applications. SharePoint Framework uses this Node.js runtime environment to build & run the applications. We can call it as equivalent to .Net.
https://nodejs.org
IIS Express and /or build automation / .Net Framework
npmnpmjs is the package manager for JavaScript, which contains the larger number of open source packages and these are assembled in the solution to build the application. SharePoint Framework manage the dependencies required for the application by using npmjs packages. This is equivalent to the Nuget package in Microsoft world.

NPM is by default available when you install Node.JS
Nuget
YeomanYeoman generator is the web’s scaffolding tool for modern web apps. This will generate the complete solution structure for developing the application. SharePoint Framework uses the “@microsoft/sharepoint” yeoman generator to create a solution structure for the application.
http://yeoman.io/
VS Project -> New -> Template
Gulp.jsGulp is an open source toolkit used to automate the painful and time-consuming tasks in a development workflow. For ex., minification and copying of all JavaScript files. SharePoint Framework model uses the gulp toolkit to automate the tasks of building and running the solution.
http://gulpjs.com/
MS Build
TypescriptTypescript is an open source editor developed by Microsoft. It is a typed superset of java script language and compiles in to plain JavaScript. It also eases the C# developers to develop JavaScript based applications. SharePoint Framework uses the typescript language to build the applications and this will be compiled in to clean, simple JavaScript code to run on any browser.
https://www.typescriptlang.org/
C#
Visual Studio CodeVisual Studio Code is lightweight source code editor tool, which runs on any platform. It comes with built-in support for JavaScript, Typescript and Node.js and has rich ecosystem of extinctions for other languages and runtime. SharePoint Framework uses the features of visual studio code to edit and manage the source code for building the application.
https://code.visualstudio.com
Visual Studio

 

Installation of open source tools – Step by Step


1. Download and install Visual Studio Code

i. Download Visual Studio Code from https://code.visualstudio.com and Install with standard instructions.
ii. Configure proxy using following
File -> Prefrences -> Settings (add proxy entries)
{
“http.proxy”: “<<YourCorporateProxy>>“, “http.proxyStrictSSL”: false
}

2.  Download and Install NodeJS
i. Download NodeJS from https://nodejs.org and Install with standard instructions. (Make sure you are downloading a version which is recommended for most of users from website, which is more stable version)

3. Install npm packages
NPM (Node Package Manager) gets installed along with NodeJS, it can be further used to install required packages. We need to set corporate proxy, to enable npm to connect to internet and download required packages.

i. Open NodeJS command and run following command to set proxy

 cmd> npm config set proxy <<YourCorporateProxy>>
 cmd> npm config set https-proxy <<YourCorporateProxy>>
 cmd> npm config set strict_ssl false

cmd> npm config set proxy <<YourCorporateProxy>>
cmd> npm config set https-proxy <<YourCorporateProxy>>
cmd> npm config set strict_ssl false


ii.
To install most recent version of npm run following command on nodejs command prompt

cmd> npm install --global npm@latest

cmd> npm install –global npm@latest

4. To install Yaoman, Gulp, TypeScript run following command on nodejs command

CommandDescription
npm install --global npm@latestTo Install latest npm packages globally.
npm install --global yo• To install yeoman package globally.
• It helps you to kick-start new projects, and prescribes best practices and tools to help you stay productive.
npm install --global generator-fountain-webapp• To install yeoman generator that helps you to create a SharePoint client-side solution project with the right toolchain and project structure.
npm install -g gulp• To install glup package globally.
npm install -g @microsoft/generator-sharepoint• To install yeoman generator package globally.
• Using this generator, developers can quickly set up a new client-side web part project with sensible defaults and best practices.
npm install -g gulp-cli• To install glup latest v4 package globally or upgrade your gulp package.
npm install gulp-serve• This command will execute a series of gulp tasks to create a local, Node-based HTTPS server on “localhost: 4321” and launch your default browser to preview web parts in SharePoint Workbench from your local dev environment.
npm install --save-dev gulp• Run to command in your project directory to install local gulp related dev dependencies in your project.
npm install angular --Save
npm install ng-office-ui-fabric --Save
or
npm i angular ng-office-ui-fabric –S
• To install both AngularJS and ngOfficveUIFabric packages using –S parameter.
npm i @microsoft/sp-build-web• This package is intended to be imported directly by a gulpfile that uses the SharePoint Framework build system. It imports and configures a set of build tasks that are appropriate for a build target that will run in a web browser.
npm install -g typescript• To install TypeScript globally.
npm install tsd -g• To install Typescript definition manager globally
tsd init (To create tsd.json and typings\tsd.d.ts)• Create a new tsd.json and tsd.d.ts. This is not required but useful to init valid project references before starting to add (external) code, or if you want to edit the config.
Refer this link and download .tsdrc:
tsd-configuration-use (.tsdrc):
https://trello.com/c/RXyPj86H/8-tsd-configuration-use
Save file name as “.tsdrc.json” under current root directory / C:\Users\current_user
• This is a optional JSON encoded file to define global settings. TSD looks for it in the user's home director (eg: %USERPROFILE% on Windows, $HOME / ~ on Linux), and in the current working directory.
npm install --save jquery• Run this command in current project to install Jquery in current project directory.
npm install --save jquery-ui• Run this command in current project to install Jquery-Ui in current project directory (if required).
tsd install jquery --save• Run this command in current project to install Jquery for typescript in current project typing directory.
tsd install angular --save• Run this command in current project to install angular for typescript in current project directory.

5. Verify if all the packages are installed properly
Open NodeJS command prompt and run following commands to verify packages and its versions.

 cmd> node –v 
 cmd> npm –v 
 cmd> yo --generators
 cmd> gulp –v 
 cmd> tsc –v 
 cmd> tsd --version 

Develop SharePoint Web Part in SPFx using Open Source Web Stack – Step By Step

1. Create solution directory using NodeJS command prompt

 cmd> md helloworld-webpart
 cmd>cd helloworld-webpart

cmd> md helloworld-webpart
cmd>cd helloworld-webpart


2. Create HelloWorld web part

cmd>yo @microsoft/sharepoint

cmd>yo @microsoft/sharepoint

Follow the instructions:
i. What is your solution name? <enter your solution name> e.g. helloworld-webpart
ii. Where do you want to place the files? <mentioned the path of where you want to place the files> e.g.  Use the current folder
iii. What framework would you like to start with? <mentioned the framework you are using>  e.g.  No JavaScript web framework
iv. What is your web part name? <enter the web part name> e.g. HelloWorld
v. What is your webpart description? <enter web part description> e.g. HelloWorld description

3. Install developer certificate:

cmd> gulp trust-dev-cert

cmd> gulp trust-dev-cert

4. Enter the following command to preview your web part in browser:

cmd> gulp serve

cmd> gulp serve

This command will launch your web part in local machine on local server e.g. https://localhost:4321/temp/workbench.html
click on “+” plus sign and add HelloWorld web part on page.

To Open the web part or page on SharePoint Online: http://<<SPOnlineTeamsiteURL>>/_layouts/workbench.aspx

Refer below link for more details:
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part

Deploy SPFx Web Part to SharePoint Online

1. Create App Catalog on SharePoint Online Site
Create new app catalog to deploy SharePoint SPFx web part e.g. https://mytestsite.sharepoint.com/sites/appcatalog

2. Package and Deploy Solution
The supporting Web part bundle files needs to be uploaded to the CDN path, which need to be configured on the manifest file.

i. Go to project directory using this command:

cmd> cd helloworld-webpart 

cmd> cd helloworld-webpart

ii. Open your web part solution in “Visual Studio Code”:

cmd> Code .

cmd> Code .

iii. Open “write-manifests.json” file under \config folder and update library URL/ site assets under “cdnBasePath” e.g.
“cdnBasePath”: “https://mytestsite.sharepoint.com/sites/teamsite/SiteAssets/”

iv. Bundle required files for web part and upload in CDN path:

cmd> gulp bundle --ship

cmd> gulp bundle –ship

bundled files will be created under /temp/deploy folder, copy these files into CDN path.  e.g. https://mytestsite.sharepoint.com/sites/teamsite/SiteAssets

v.
Enter below command to create app package file for web part or app, this command will generate the package file under sharepoint/solution folder for the project

cmd>gulp package-solution –ship 

cmd>gulp package-solution –ship

vi. Navigate to App Catalog site and upload app package file with extension “.sppkg” and upload into “App for SharePoint”. Click on “Deploy” to trust the client side solution to deploy.

Consume web part on SharePoint modern responsive page

i. Navigate to Team Site > Site Contents > New > Add and app > Search your helloworld-client-side-solution app / scroll and find your app > Click on your app and add into your site.

ii. Create new sharePoint 2016 modern responsive page, Go to team site > Site Contents > SitePages > Click “New” > Select “Site Page” to create new modern page.

iii. Add custom helloworld web part and edit web part properties and fill in appropriate details > click on close

iv. Click “Save and Close”

 

>> SPFx Web Part with Angular2 and TypeScript      >> Related Articles


Check Articles From Categories      Health and Parenting      Inspiring Stories      Technology      Microsoft Azure      SharePoint O365

2 Replies to “SharePoint Online, SP 2016 – Development Framework (SPFx) using open source web stack”

  1. Very well detailed!!

    This is the best article I found across all the blogs and info available online for SPF for a beginner.

    Thanks!!

Leave a Reply

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