What is SharePoint Framework | steps to setup

SharePoint Framework, a new development model for SharePoint which takes the SharePoint experience to the next level with the help of client-side APIs.

Introduction

For years, Microsoft keeps on enabling the different development models like Farm based solutions, Sandboxed solutions, SharePoint Add-In to access the SharePoint objects with the help of different APIs. And also we have another model in SharePoint by manually injecting a java script file (which created based on JSOM, REST API) to the SharePoint page to obtain the appropriate result.
In addition to the above mentioned development models, Recently Microsoft added an another model called “SharePoint Framework model” to build great & better applications. This model is released as open source and this is still in initial stage even for developers.
The SharePoint Framework is a Page and Part model that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling development.” – Microsoft

SharePoint Framework Highlights

Light Weight Components:

For developing the applications based on the old development models, we should require a Microsoft Visual Studio as a source code editor for developing & packaging the applications. But for SharePoint Framework development, we require some of the light weight tools like Node JS, Gulp, Typescript, Visual Studio, Yeoman Generator instead of having heavy weight software.
The below table provides a summary of Microsoft equivalent to the Light weight component.
Light Weight ComponentMicrosoft Equivalent
Node.jsIIS Express and /or build automation
Node.js.Net Framework
npmNuget
YeomanVS Project -> New -> Template
Gulp.jsMS Build
TypescriptC#

Node.JS

It 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.
Ref: https://nodejs.org

NPMJS Packages:

npmjs 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.
Ref: https://www.npmjs.com/

Gulp:

Gulp 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.
Ref: http://gulpjs.com/

Typescript:

Typescript 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.
Ref: https://www.typescriptlang.org/

Visual Studio Code:

Visual 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.
Ref: https://code.visualstudio.com

Yeoman Generator:

Yeoman helps to create the client side solution structure for developing the application. Yeoman generator is the web’s scaffolding tool for modern web apps
SharePoint Framework uses the “@microsoft/sharepoint” yeoman generator to create a solution structure for the application.
Ref: http://yeoman.io/

GitHub:

GitHub is the web based Git repository hosting service. It offers all of the distributed revision control and source code management functionality of Git.
SharePoint Framework is an open source and all of its code is hosted in GitHub for public. So we can use the GitHub for contribute more to the framework. We can also enable versioning to our newly create application as well.
Ref: https://github.com/

JavaScript Frameworks:

In modern web world, there is number of JavaScript frameworks like React, Angular JS, Knockout JS, etc…  available for building the web based application to enable rich user experience.
SharePoint Framework also enables us to use any type of JavaScript frameworks in the solution to enrich the user experience.

SharePoint JSOM or REST API:

JSOM or REST API are enables the client side development to access & manages the SharePoint sites.
SharePoint Framework is totally a client side development model and it uses any of the JavaScript based SharePoint APIs to develop the application.

Develop across Platforms:

Developing the SharePoint framework applications is possible across different OS platforms. By installing the light weight tools in any platform and that opens the way for developers to build applications on any platforms.

Automated Process:

SharePoint framework uses the generator from Yeoman to creates the skeleton for the SharePoint and that same generator installs all required dependency packages to the development folder and configures the automated tasks. Gulp handles the tasks and automated the compile, build, run and packaging the solution.

Why SharePoint Framework?

For developing the client based SharePoint applications, we have used two kind of approaches,
  • SharePoint Add-Ins
  • Injecting JavaScript to Content Editor or Script Editor web part
In above two type of approaches, we have to manually upload the packages to test or debug the application after completing or updating the code.
To debug the SharePoint Add-in, after changing source code every time, we have to re deploy and re install the add in to the SharePoint site. The add-in part created from add-in solution is always residing within iframe by rendering the contents in the site. And it is time consuming and also requires a Visual Studio tool to do that.
To debug the SharePoint client side code by injecting scripts in content editor web part or script editor web part requires some manual process to do testing our code and settings. And this also a time consuming model to develop and debug the script.
SharePoint Framework model introduces the workbench to test the SharePoint applications locally and without connecting to SharePoint site. We can also use the workbench in SharePoint library to the application in SharePoint site.
SharePoint Framework has below benefits over the limitations from previous models,
  1. Instant application debugging using Workbench without SharePoint site.
  2. Instant SharePoint site debugging using workbench (which is uploaded in SharePoint site)
  3. Automated process for deploying the updates
  4. Opens a way to use different JavaScript frameworks

Development Prerequisites:

Before Starting the development, we would require a below things to be ready,

Sign up for an Office 365 tenant

If you already have an Office 365 tenant,  create your app catalog site.
If you don't have one, you can create a trial tenant or for example sign up for the Office Developer Program. You will receive a welcome mail with a link to sign up for an Office 365 Developer Tenant.

Create app catalog site

You will need an app catalog to upload and deploy web parts. If you've already set up an app catalog, create a new Developer Site collection.
Go to the SharePoint Admin Center by entering the following URL in your browser. Replace yourtenantprefix with your Office 365 Developer Tenant prefix.
https://yourtenantprefix-admin.sharepoint.com
In the left sidebar, choose the apps menu item and then choose App Catalog.
Choose OK to create a new app catalog site.
In the next page, enter the following details:
  • Title: Enter App Catalog.
  • Web Site Address suffix: Enter your preferred suffix for the app catalog; for example: apps.
  • Administrator: Enter your username and choose the resolve button to resolve the username.
Choose OK to create the app catalog site.
SharePoint will create the app catalog site and you will be able to see its progress in the SharePoint admin center.

Create a new Developer Site collection

You also need a site collection and a site for your testing. You can create a new site collection using any of the available templates. You may chose to use developer site collection, but that does not really add additional value, since workbench and basic testing can be performed under any site.
Here are steps for creating new developer site collection.
Go to the SharePoint Admin Center by entering the following URL in your browser. Replace yourtenantprefix with your Office 365 Developer Tenant prefix.
https://yourtenantprefix-admin.sharepoint.com
In the SharePoint ribbon, choose New -> Private Site Collection.
In the dialog box, enter the following details:
  • Title: Enter a title for your developer site collection; for example: Developer Site.
  • Web Site Address suffix: Enter a suffix for your developer site collection; for example: dev.
  • Template Selection: Select Developer Site as the site collection template.
  • Administrator: Enter your username and choose the resolve button to resolve the username.
Choose OK to create the site collection.
SharePoint will create the developer site and you will be able to see its progress in the SharePoint admin center. After the site is created, you can browse to your developer site collection.

SharePoint Workbench

SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Framework developer toolchain contains a version of the Workbench that works locally and helps you quickly test and validate solutions you are building. It is also hosted in your tenancy to preview and test your local web parts in development. You can access the SharePoint Workbench from any SharePoint site in your tenancy by browsing to the following URL:
https://your-sharepoint-site/_layouts/workbench.aspx

Create SharePoint Framework project

  • Open any command line tool (Powershell, Cmder, etc.)
  • Create folder for the application source or open that folder
    md helloworld-webpart
    cd helloworld-webpart
  • Create new project by using yeoman generator
    Yo @microsoft/sharepoint
  • Fill up the required details asked by the generator
Generator RequestsDescription
What is your solution name?Solution name for the framework project
Where do you want to place the files?Select anyone of the below options to select where you want to store the files.
  • Use the current folder
  • Create sub folder
What is your webpart name?Enter name for the webpart
What is your webpart description?Enter description for the webpart
What framework would you like to use?Select any of the below javascript options to use in the application
  • No javaScript web framework
  • React
  • Knockout






Fig 3: Create a new SharePoint project

  • Generating the package takes some time and you may get some warnings and errors during the structure creation. Ignore those for now, because the generator is in initial stage (You can also raise the issue in GitHub page of the generator)
  • The below information ensures, the solution is created successfully and ready for development.
    Fig 4: SharePoint Project ready for development
  • To run the application, enter “gulp serve” command. This will enable the local server with required js files with the workbench.html in the location http://localhost:4321/temp/workbench.html.
    Fig 5: Local SharePoint Workbench
  • In the same time, we can also access the application in SharePoint site. Navigate to workbench.aspx, where we have uploaded the workbench file.
  • The error message will pop up and asks us to ensure the unsafe scripts to be loaded on SharePoint site. Because required js files loaded from localhost location. Click ok on message popup and select “Show All Content” button.
    Fig 6: Enable Unsafe Scripts in SharePoint site workbench
  • The selection of Show All Content enables us to add a web part to the page,
    Fig 7: SharePoint Site Workbench
  • Click + button and select the “HelloWorld” to add the web part to the page. The below screenshot appears in both Local Workbench and SharePoint Workbench page
    Fig 8: SharePoint Framework Webpart
  • By using any source editor, once we change and saves the source file. The gulp task running behind automatically updates the required js file and the updated changes appears immediately in local workbench page. The same change appears in SharePoint workbench page after refreshing the page.

Comments

Popular posts from this blog

Download Visakhapatnam Tirupati AC Double Decker Express Act