SharePoint Framework Web Part Develeopment

Set up your Office 365 tenant

reference : https://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant#create-app-catalog-site

To build and deploy client-side web parts using the preview release of the SharePoint Framework, you will need a normal Office 365 tenant.

Sign up for an Office 365 tenant

You will need an app catalog to upload and deploy web parts.

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 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.

Go to the SharePoint Admin Center , 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.

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

Set up your SharePoint client-side web part development environment

Install developer tools

NodeJS :

https://nodejs.org/en/

After installing node, make sure npm is up to date by running following command:

npm install -g npm

Code Editors

Install a code editor. You can use any code editor or IDE that supports client-side development to build your web part,

Visual Studio Code :  https://code.visualstudio.com/

Install Yeoman and gulp

Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground web site to host web parts for testing.
Enter the following command to install Yeoman and gulp:

npm install -g yo gulp

Install Yeoman SharePoint generator

The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

npm install -g @microsoft/generator-sharepoint 

 

Build your first SharePoint client-side web part (Hello World part 1)

reference : https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part

Client-side web parts are client-side components that run inside the context of a SharePoint page. Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

Client-side web parts support:

• Building with HTML and JavaScript.
• Both SharePoint online and on-premises environments.

Create a new web part project

Create a new project directory in your favorite location.

md helloworld-webpart

Go to the project directory.

cd helloworld-webpart

Create a new HelloWorld web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

When prompted:

• Accept the default helloworld-webpart as your solution name and choose Enter.
• Select Use the current folder for where to place the files.

The next set of prompts will ask for specific information about your web part:

• Accept the default No javascript web framework as the framework you would like to use and choose Enter.
• Accept the default HelloWorld as your web part name and choose Enter.
• Accept the default HelloWorld description as your web part description and choose Enter.

Preview the web part

To preview your web part, build and run it on a local web server. The client-side toolchain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment, your browser will report 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, make sure you are still in the helloworld-webpart directory and enter the following command:

gulp trust-dev-cert

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

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 from your local dev environment.

SharePoint client-side development tools use gulp as the task runner to handle build process tasks such as:

• Bundle and minify JavaScript and CSS files.
• Run tools to call the bundling and minification tasks before each build.
• Compile SASS files to CSS.
• Compile TypeScript files to JavaScript.