Files To Be Committed To Source Control In SPFx Projects

Introduction

When working with SPFx projects, often time we might think of following questions

How do I share the source code with other team members?
What are the files to be checked into the source control repository like GitHub, Azure DevOps etc.

When working on .Net projects it is easy to share solutions and packages. The required binaries will be created in debug/bin or release folder, and source code can be zipped and shared with team or source code can be checked in Git repository. But the dependency is the user who is consuming this application should have .Net runtime installed (mostly available on all Windows OS and needs to be installed on other OS such as Linux) and to test and debug the application Visual studio needs to be installed.

Since SPFx (SharePoint Framework) is cross-platform developer environment, the run time will be provided by the NodeJS. Users who are working with the SPFx should have their machines installed with NodeJS application which provides runtime and required files for successful development, testing and packaging the solution. Please refer to the references section for installing node using NVM (node version manager) that has details.

SPFx Folder Structure

Let’s try to understand the basic SPFx folder structure that gets created. In this article, I have taken the folder structure for Application Customizer. A similar folder structure gets created for other SPFx project types.

Folder	Purpose	Image
src	The main repository for your application, and starting point, is where you write code and initialize the components.
lib	Contains processed code, that gets created during compilation and transpilation
dist	This folder gets created during gulp serve and contains the javascript bundle and manifest. During the testing the local node server will be distributing the content to your application in SharePoint workbench from this folder.
config	Contains set of configuration files used by projects for various build tasks such as how the solution is packaged, and where the static assets and code is hosted.
node_modules	Contains all the run time packages and dependencies which is created as part of npm install.
release	Folder gets created during serve, bundle and package commands. This contains assets folder that contains files generated when bundle and packaging the solution.
sharepoint	Contains the solution folder that contains sppkg file which is final package that will be deployed to tenant-level or site level app catalog. This also contains assets folder which has details about whether tenant wise install or specific to few sites.
temp	This folder gets created during serve and is used by local node server during testing

For source control, the following folder can be omitted before checking in to source code repository.

lib
dist
release
temp
node_modules

Please refer to article, code check-in using git commands that tells the steps to check in the code to source control.

Steps to run the SPFx solution

Once the solution is downloaded from source control or unzipped, one can test the solution in other environment by following steps

Step 1

Unzip the file if downloaded as zip. Go to the command prompt and run the following command.

npm install

Step 2

Test the solution by running following command to make sure there are no run time issues before packaging the solution

gulp serve

Allow the debug scripts.

If there are no issues, you should be getting an alert message similar to below one.

Step 3

Build the solution to make sure there are no compile time issues.

gulp build

Step 4

If needs to be bundled to install into different environment, then run below command

gulp bundle --ship

Step 5

To package the solution run the below command

gulp package-solution –ship

Step 6

Observe the folder structure, you could see that the following folders got created again in destination, even if they are omitted from the source.

dist
lib
node_modules
release
temp

Conclusion

Thus, in this article, we have seen the steps for committing SPFx files into source code and how to work with them after downloading from the source code.

References