What email address or phone number would you like to use to sign in to Docs.com?
If you already have an account that you use with Office or other Microsoft services, enter it here.
Or sign in with:
Signing in allows you to download and like content, which the author will be aware of.
Embed code for: SPFx - O365 UG
Select a size
What is SPFx and how to get started on using SPFx.
Gerald de Run
A new paradigm, not a new approach…
SharePoint Framework Features
in Page DOM
accessible by nature
Access the lifecycle
Serialize & Deserialise
Based on Open source dev tools
Deployable in classic web part, publishing page and modern page.
SharePoint Framework application types
So, show me how it’s done!
Setup Office 365 Tenant
App catalog site
Developer Site collection
Setup Library with ‘ ClientSideApplicationId’
Step 0 – get all pre-requisites
Step 1 – scaffold your project
Step 2 – Write Code
Step 3 – Build and Test locally
Run the gulp task called serve
Build and package your solution and finally launch a local development environment
Task will wait for any changes and rebuild and reload
Step 4 – Build and Test in SharePoint
Navigate to SharePoint Workbench and repeat.
Step 5 – Package for Deployment
Run the gulp task called package-solution.
Will bundle the solution and solution artefacts as well as create an .spapp package
Step 6 – Upload to CDN
Run the gulp task called upload-cdn
Uploads the bundled assets to a CDN (or host it in SharePoint).
Will typically be a custom task (imo)
Step 7 – publish using the AppCatalog
Upload just as you would do with any other SharePoint Add-in.
The .spapp package can (and will) contain CAML!!
Office 365 public CDN
Validate web part properties values
Log to console using web part logging
Distribute release version of web part
Provide preconfigured versions of web part
Don’t bundle your framework. Load from URL instead
Microsoft Graph Integration
Microsoft Graph support for Files and Sites
Drop 6 is out on 22-Nov
SPFx preview is available in First release tenants as developer preview
Q & A
Hi Everyone. Thanks for joining us today. Hope you are enjoying the sudden changes weather. Let’s chat about on the sudden change in SharePoint development also.
This is a developer focused discussion, but will have few important points for IT Pro about managing apps and for owners why SPFx. Today I have my friend Gerald also with me.
He attended the SPFx pre-release sessions in Seattle from product team. We will talk about the what is this buzz word SharePoint Framework.
SPFx is new model, method to build customization on top of SharePoint. It is not new approach. We will talk in upcoming slides as how existing skills can help us to get started on SPFx.
Page – part model – SPfx provide full support for client side development, easy integration with SharePoint and support for open source tooling. You can use modern web technologies and tools in your preferred dev environment to build productive experiences and apps.
These tools include like npm, Angular, React, VS code and visual studio. Let’s see why it is so cool.
SP Add-ins – This implementation creates an iFrame. It can be added to those noscript sites and easier to configure. Downside of that is iFrame are slower. Lifecycle is complex – authentication, authorization, loading scripts. Issue with responsive design, inherit css and theming foundation.
Currently, it only support client side web parts. There may be plan about full page apps, but nothing confirmed as it is all in preview. The client side web parts are backward compatible. During a European sharepoint conference, PnP demos it on SP 2010 page. Unfortunately we don’t have that in today’s demo.
Exicting!...so now let’s see how I can get my hands dirty with SPFx.
First, you setup your tenant. Good news to First release tenant owners, SPFx is being rolled out as developer preview.
First sign up for Office 365 developer tenant if you don’t have. You can get 1 year free tenant if you sign up via dev.office.com developer program.
Second, setup your app catalog site.
Third, setup your developer site collection. By default dev tenant has the default site as developer site.
In the document library, add a new column with name ClientSideApplicationId.
To test your SPfx web parts, MS has given a work bench page. Link is embedded in the slide. You need to upload that in the same library.
Now, let’s setup our machine to write some code.
First you need a IDE. Visual Studio works but so far the best support is with VS code. Install that whether you are on a PC or MAC.
Install latest NodeJS.
If you are on a PC, install the windows build tools.
Then install Yeoman and gulp. Yeoman helps kick-start projects, Yeoman generator for creating new web parts.
Then install Yeoman SharePoint generator. This quickly creates sharepoint client side solution projects.
There are other tools like fiddler, git source tools, which you can install.
Next step is to setup your folder and create project.
Follow the steps as create directory, get inside the directory and then run Yo sharepoint command. Follow the prompts on the command line and setu your project.
After you have generated the solution, now time to edit.
Here preferred approach is to use the VS code.
Run code. From command line to open the solution in vs code for editing.
The client-side toolchain uses HTTPS endpoint by default. 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, and run the command.
we have installed the developer certificate, enter the following command in the console to build and preview your web part: gulp serve.
Leave your gulp serve running and then navigate to sharepoint dev site where you uploaded the workbench page.
Use the same functionality to add the web part on the workbench page and test with SharePoint.
To package for releasing the app file.
At the end the we can use the package solution file .spapp for app catalog to distribute in tenant.
dern web technologies and tools in your preferred dev environment to build productive experiences and apps.