SharePoint Online WebPart with Angular2 and TypeScript – Part 2

Pankaj Salunkhe

Pankaj Salunkhe

Technical Specialist at CG
Microsoft Certified Solution expert in SharePoint and O365 with 9+ years of experience.

write to admin@sharecareinspire.com for contribution
Pankaj Salunkhe

Latest posts by Pankaj Salunkhe (see all)

<<SharePoint Framework SPFx      << Part 1      Download code

In first part we have covered the coding part of the web part development using Angular 2 and Type Script with SharePoint Framework.

Now lets move one step forward and discuss about build and deployment

Step 1: Create folder structure and code files

For folder structure and source code, Please refer Part 1

 

Step 2: Build and Test on Development Machine

Once you are done with source code development, first you can run and test your code locally

1. Install the developer certificate

To preview your web part, build and run it on a local web server. The client-side toolchain uses HTTPS endpoint by default, but as default certificate is not configured for the local dev environment, browser reports a certificate error. The SPFx toolchain comes with a developer certificate that you can install for building web parts.

To install the developer certificate for use with SPFx development, switch to your console/command, make sure you are still in the webpart base directory and enter the following command

gulp trust-dev-cert

2. Run web part

Now that we have installed the developer certificate, enter the following command in the console to build and preview your web part.

gulp serve

After running gulp serve command you might get following error, i got in my case hence thought of mentioning it here.

Error: ‘cannot find object’
Solution: Replace small o to capital O, in the files given in the error.

After making changes run gulp serve command, and this time it runs perfectly.

This command on successful execution opens local Workbench html file, you can add your web part on the page and test if its running fine on your development machine.

Step 3: Deployment Step for web part


1. Create App Catalog

App Catalog site is used to store apps for SharePoint and Office apps for your organization’s internal use. I am not covering steps for creation of App Catalog site here, i am assuming that App Catalog is ready for deployment.

e.g. https://sharecareinspire.sharepoint.com/sites/appcatalogsci.

2. Update cdnBasePath

Before you can upload web part package to app catalog, you have to configure the CDN URL in your SharePoint Framework project. To do this, open your SharePoint Framework project in the code editor. Then, open the ./config/write-manifests.json file and in the cdnBasePath property set the public CDN URL of the newly CDN folder.

To know more about CDN please refer article here

For development purpose i did not create CDN url and decided to use my SP website.

e.g. “cdnBasePath”: “https://sharecareinspire.sharepoint.com/SiteAssets”

3. Create Bundle and upload to CDN location

The location which we  updated in cdnBasePath, is the location where we need to upload the file which are created as a output of bundle.

To bundle required files for webpart and upload in CDN path run following command.

gulp bundle –ship

bundled files will be created under /temp/deploy folder, upload these files into CDN path ( e.g. https://sharecareinspire.sharepoint.com/SiteAssets )

4. Create App Package

Its time to create package now, enter below command to create app package file for web part or app, this command will generate the package file under sharepoint/solution folder of the project.

 gulp package-solution –ship

5. Deploy Package

Once package is created, its time to deploy the same to app catalog. Navigate to App Catalog site and upload app package file with extension “.sppkg” from path {webpartfolder}\sharepoint\solution and upload into “App for SharePoint”.

Click on “Deploy” to trust the client side solution to deploy.

6. Add App to SharePoint team site

Once app is deployed on you corporate app catalog, it is now available for you to use on your team sites. select add an app option from menu, it will show you the list of apps you can install including the app which you deployed. once you install app, it is not available to use on pages.

7. Add Web part to Page

Now app is available to use on web pages. create a page and add web part to page. you can see the deployed web part, select the same and add it on the page.

Now web part is displayed on the page, you can test the functionality of the web part, click on add items button which will add items to in a string array and will be shown in the list below.

<<SharePoint Framework SPFx      << Part 1      Download code

 


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

2 Replies to “SharePoint Online WebPart with Angular2 and TypeScript – Part 2”

  1. This is a great achievement of you!

    I am not onboard with SPFX yet, but looks like a lot of legwork.

    I have tried adding an angular 2 webpart through the content editor and it’s like 4 – 5 steps, with the advantage of centralizing the code by utilizing a file.

    So many steps to accomplish task. At the server side, we were at the point of a one click deploy from visual studio ,how did we get to this point?

  2. Thanks for your comments!

    Yes i do agree that SPFx do need lot of legwork and traditional server side development and deployment using visual studio was much faster.

    Hope in future this would improve and we will have better support of web scaffolding toolslike Yeoman.

    Also i am curious to know the steps you followed to add angular2 code in content editor webpart, as angular2 is based on typescript and needs compilation and bundling.

Leave a Reply

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