SPFx Solution Components

Scaffold your SPFx Solution

Run Command Prompt as Administrator and execute the following command to scaffold your SPFx Solution -
Please note: If you have installed the NodeJS components globally (as system administrator), you can execute the commands from any folder. However, in case you have installed the NodeJS components without administrator privileges, you would need to execute these commands from the local folder where node modules are located.

1. Through Command Prompt, browse to the folder where you would like to create your solution
2. Run yo @microsoft/sharepoint
   Please note: the @microsoft/sharepoint generator command would require you to install the SharePoint generator through npm. You need to execute npm install @microsoft/generator-sharepoint -g (‘-g’ switch would install the generator globally, do not use this switch if you would like to install the generator in the local folder only)
3. A list of questions would be posted to you to enable the generator to scaffold the solution accordingly. They are:
1. What is your solution name?
2. Which baseline packages do you want to target for your component(s)?
   Ideally, SharePoint Online only (latest) would provide you with the latest SPFx framework and components, however, if you are planning to install your solutions on SharePoint 2019 on-premise then you would have to select SharePoint 2019 as the option here. There are specific settings for 2019 solutions which are not available on SharePoint Online.
3. Where do you want to place the current files?
   You can place the files in the current folder OR create a sub-folder with the solution name. I would prefer creating a sub-folder as this would group all my project files together instead of them lying all around in a used folder. It would also help you open the source folder using an editor like Visual Studio Code.
4. Do you want to allow tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment?
   The SPFx solution is deployed to a SharePoint site using the Feature framework. The activation or de-activation of the feature would make the solution available or remove it. If you answer ‘Yes’ here, the feature implementation step would be skipped, and the web part/extension would be available to all sites in the tenant on installation. However, if you have certain SharePoint artefacts to be deployed, you would need to answer ‘No’, as those would mandate the feature installation step. In my view, the feature installation step allows more control to administrators to enable/disable the SPFx solution.
5. Which type of client component to create?
   Web Part or Extension (In case you select Extension, it would as you for the type of extension) 
6. What is your Web Part/Extension name?
7. What is your Web Part/Extension description?
8. Which framework would you like to use?
   I would prefer ‘No JavaScript framework’ as this would allow the flexibility of adding components I need later.

Please check the screen-clipping below with a sample set of answers:

Post this the solution would be scaffolded and available at the location specified.Post this the solution would be scaffolded and available at the location specified.

Open the Solution with Visual Studio Code

Post scaffolding a directory with the solution name would be created.

1. You can start Visual Studio Code (Right click  Run as administrator). 
2. From the ‘File’ menu select ‘Open Folder...’.
3. Browse and select the folder where the solution was scaffolded.

The solution files should appear as below:

Significant Components of SPFx Solution

Certain key files and components of the SPFx solution (refer image above) are listed below:

1. Config folder – contains the configuration related files for the solution
1. Config.json – Primarily defines the entry point and manifest files of the solution. You would not need to make any changes to this file
2. Package-solution.json – Defines the features of the .sppkg file that will be created when the solution is prepared for deployment. Key elements such as package file name, package version, package name and whether client-side assets will be included.
3. Serve.json – Basically used for defining the start page and port when testing the solution using ‘gulp serve’
4. Write-manifests.json – In case you have a custom CDN defined for your SharePoint assets, you can defined the CDN path in this file. Custom CDN would be useful in case of a tenant used over multiple geographies. However, if the CDN path is not set, SharePoint would host the files on a default CDN from where they can be provisioned.
2. Node_modules folder – contains all the node modules that are installed for the solution. This is a bulky folder and usually not managed by the developer. All modules installed will be placed in the node_modules folder.
3. Src folder – This is the key folder where the web part/extension files will be placed. It would ideally contain
1. TypeScript file – Which would define the functionality of the WebPart/Extension. The TypeScript (.ts) file would contain a render function where you can define what your component will render.
2. JSON file – This is a manifest file which would be used to convert the TypeScript file to JavaScript file (as browser cannot understand TypeScript). Developers would not need to make any changes to this file.
3. SCSS file – This is a stylesheet file included to define the styles only for Web Parts. This file would not be present for extensions.
4. Temp folder – This folder contains the converted JS files (converted from TypeScript). This folder would be used to host and render the files when ‘gulp serve’ command is executed.
5. Gulpfile.js – This file contains the definition of all the gulp commands that we would execute for serving, bundling and packaging our solution
6. SharePoint folder – This folder is not present initially as part of the solution. Once, we execute ‘gulp package-solution’ command this folder is created. It contains the SharePoint Package (.sppkg) file that can be uploaded to the SharePoint App Catalog.