SharePoint SPFx webapp on staging site

Question

I created a SharePoint SPFx react webpart that is now deployed on one of my SharePoint sites.

I want to continue to make updates to this webpart. I "cloned" my SharePoint site so that it can be my staging site. I'm currently using workbench to view my webpart on a local level. I want to now deploy my app onto my staging SharePoint site so that my clients can view the updated webpart and once approved I will then move to production SharePoint site.

However, when I add/deploy my app into the SharePoint App Catalog, it updates for both my production and staging SharePoint site since they both are using the same app.

How should I approach this? Should I rename the webapp every time I want to deploy to staging? For example if my app is called "contract-form" should I name the app "contract-form-test" when deploying/packaging the bundle?

Also a side question: In my app I reference links for example https://mysite.sharepoint.com/sites/Contracts/SitePages/PageName but on my staging site it's ContractsTest instead of Contracts should I continue to just replace all links in the app every single time or should I make these as two separate apps? And when the client approves I do all changes again on the other one?

Answer 1

App catalog is also available at the Site Collection level, so for your staging/testing SPFx web part, you could just deploy it to the Site Collection App Catalog. Once tested and verified, you could move it to the tenant level or to another production site collection.

For more information on how to enable App Catalog at the Site Collection Level, visit this link.

Also, on your side question, can't you use Web Parts' properties to update these links' values when web part is added to a modern page?