Monday, April 10, 2017

Deploy SPFx client side web part through CDN

In this article, you will deploy the client side webpart to a SharePoint Library. SharePoint Framework build tools provide out-of-the-box support for deploying to an Azure Storage account, but this involved extra cost. Azure Storage account is the best practice to maintain our webpart.

Prerequisites
  1. Setup SharePoint Tenant
  2. Setup your machine
  3. First Webpart
In this article I am showing how to deploy a client side web part in SharePoint Library.
Step 1: Create Webpart
Follow Link for webpart creation: https://sharedpointtips.blogspot.com/2017/04/sharepoint-framework-spfx-app.html
  • Create a new Webpart, I named here “spfx-firstwebpart”
  • md spfx-firstwebpart
  • cd spfx-firstwebpart
  • Create new Webpart yo @microsoft/sharepoint
It will create a new Webpart refer below screenshot
deploysp1deploysp2

Build the Webpart gulp serve
Step 2: Create SharePoint Library
  • Create a SharePoint Library “Myspfxwebparts” and give read permission to all users.
Step 3: Open code Visual Studio Code
  • Open the code in Visual code tool.
  • Type in cmd : code .
Step 4: Update the CDN Path
  • We need to configure the CDN path, i.e SharePoint Library what we created. https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts
  • we have to configure our CDN path in write-manifests.json file. This file can be found in the config folder.
  • i.e
{
  “cdnBasePath”: “https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts”
}
  • Save the file.
  • Switch to cmd prompt
Step 5: Package and Deploy the webpart
  • Generate the files to deploy in the SharePoint Library
    • gulp bundle –ship
    • Generated files can be found in spfx-firstwebpart\temp\deploy folder
    • upload the files in the SharePoint Library
      • https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts
  • Create a .spapp file for this webpart to upload in App Catalog
    • gulp package-solution –ship
    • Generated spapp file can be found in spfx-firstwebpart\sharepoint folder
    • upload the spapp file in App catalog
    • SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
    • Click Deploy
Step 6: Install the App
  • Open your SharePoint Site
  • Go to “Add an App”
  • Click “From Your Organization”
  • Select and Click you app to install it.
Syep 7: Add the Webpart in your Page
  • After App installation
  • Go to your Page
  • Edit the Page
  • Click Insert tab and click Webpart
  • Select Custom folder –> you can see your webpart, refer below screenshot
deploysp3
  • Now you can add your webpart
    • Select the your webpart and Click Add
    • It will add your webpart
deploysp4

SharePoint Framework (SPFx) App Development

Hopefully by now you heard that the new SharePoint Framework (SPFx) has been released in preview. The original blog post from Microsoft can be found here.
This is a milestone for the SharePoint Development Team, as it now begins the transition to what they demonstrated back on May 4th for SharePoint. The new framework is comprised of a few components, if you are using Windows like me then you will need the following:
If you are using Visual Studio:
Once you have all of these installed, you can then follow the core instruction provided by Microsoft over at the GitHub Wiki.
As a note for me running Windows 10, I ended up having a missing package that manifested itself at runtime. Top resolve this I ran: npm install es6-promise
This might not make any sense if you have never run NodeJS on your machine before. NodeJS is a great platform for development using JavaScript code and can be used for more than just the SharePoint Framework, however in order to be able to develop completely offline an engine was needed that would allow an empty SharePoint type interface to be launched.
Under the covers of the SharePoint Framework, core Web Development components are used which makes a change from the standard SharePoint Development approaches we have been used to. To get started you still need to download a few things and that is done from within the NodeJS command line interface. This launched from your start menu easily.

Once the command line loads it should look like this or similar.

The location really means nothing as you will be moving around anyway. The core command you will use here is “npm” which is the package manager for getting the modules that you need. The documentation runs through the following commands to get what you need:

npm install -g npm

npm i -g yo gulp

npm i -g @microsoft/generator-sharepoint

These commands will setup the scaffolding you need, using Yeoman Generator and then Gulp for Build and Task Management. Then the Generator project itself provided by Microsoft. Once you have everything setup, you can follow the next document that is provided and bring down the sample web part using the following command:

yo @microsoft/sharepoint



It will ask you a few more questions and then you are ready to complete the wizard, choosing what JavaScript Framework to use etc.

Once you have complete the core questions it will then go ahead and create what is needed, within the directory you specified.

It will take some time to complete as it downloads any dependencies and creates the core project. As you run this you may see some error, which you can just ignore at this point as they are mostly warnings about versions.

Once it is all completed it should display a nice little message allowing you to either load what it has created using “gulp serve” command to simply load it within Visual Studio or Visual Studio Code.


“Gulp Serve”


Visual Studio Code