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