Our First Client-Side Web Part (Hello World) Part 2

Deployment Steps & Web Part Project Structure

Project Solution Folder Structure & Configuration

• Here is the folder structure of solution.

Folder Structure Of Solution.

• To package our solution file .sppkg and upgrade the version of app we need to update package-solution.json file present under config folder.

package-solution.json

Missing dependencies while creating client web parts

Errors / challenges while creating web part,

• npm dependencies.
• lodash
• color
• yosay
• update-notifier
• yeoman-generator
• uuid
• @microsoft/node-core-library
• fs-extra

• gulp dependence.
• gulp-util
• pretty-hrtime
• chalk
• semver
• archy
• liftoff
• tildify
• interpret
• v8flags
• minimist

Install the above dependencies globally by passing command "npm install -g <dependency>"

Our First Client-Side Web Part (Hello World) Part 1

• Create project folder in your machine by passing command "md <Your-Project-Name>"

Create Project Solution Directory

• Open project folder by passing command "cd <Your-Project-Name>" 

Get into Project Solution Directory

• Provide solution name for creating client web part using SPFX.

Provide Solution Name

Prerequisites to Create SharePoint Framework Client Webparts

To setup our Development environment for SPFX, We required following things to be installed on our base machine.

1. Set up your Office 365 tenant.
2. Install NodeJS Click Here for Installation Steps.
3. Install a code editor (Visual Studio Code) Click Here for Installation Steps.
4. Install Gulp and Yeoman generator Click Here for Installation Steps..
5. Finally lets build Our First Client-Side Web Part!

Upgrade to latest npm for node security advisories

Open command prompt check the version of npm by passing following command "npm version -v"

check npm version

• Upgrade npm to latest by passing following command "npm i npm@latest -g"

Upgrade npm to latest

Install Gulp and Yeoman Generator

• Install gulp by passing the following command "npm install -g yo gulp"

• "-g" indicates install globally on your machine.

Install gulp

Install VS Code Editor From Official Website

1. Click Here to download the latest version of Visual Studio Code.
2. Steps for installing Visual Studio Code as follows,

• Click on Setup File.

VS Code Setup

Install NodeJS From Official Website

1. Click Here to download the latest version of Node(Recommended LTS).
2. Steps for installing Node as follows,

• Click on Setup File.

NodeJS Setup