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

• Deployed files stored in local system under the folder “temp/deploy” with default property “deployCdnPath” in copy-assets.json file under config folder.

copy-assets.json 

• For deploying files into SharePoint we need to update property “cdnBasePath” in write-manifests.json file under config folder.

write-manifests.json

• Update the property of “internalModuleBaseUrls” localhost to SharePoint URL in GUID.manifest.json file under dist folder.

GUID.manifest.json

• WebPart folder containing .json, .scss, .ts files and loc folder containing en-us.js & mystrings.d.ts files.

WebPart files

• Configure WebPart Title, Description and Group Name in Webpart.manifest.json file.

Configure WebPart Properties

• For updating style of the WebPart we need to update WebPart.module.scss file. 

WebPart.module.scss

Deployment Steps

• Pass the following command "gulp bundle --ship" to build and release the solution.
• Under Config Folder Open write-manifests.json file and update "cdnBasePath" 
• Now upload files from "\temp\deploy" and "dist" directory to defined path. 
• Pass the following command "gulp package-solution  --ship" to package the solution.
• ".sppkg" file is created under the "sharepoint/solution" folder.

• Now open App Catalog site on your tenant.
• Now upload the ".sppkg" file into app catalog so that It can we accessible throughout the Tenant site collections.
• Now navigate to SharePoint Site add an App from site content.
• Create a page by selecting default Page Layout and Add a WebPart by selecting categories "Other" as mentioned earlier on WebPart.manifest.json file.