You must have Office 365 tenant if you created and want to deploy SharePoint Framework client-side web parts. We are going to understand the process of creating an app catalog site and site collection in SharePoint Online. We will also understand SharePoint workbench.

Step by step process to create App Catalog Site in SharePoint Online

What is App Catalog: As the name suggests, it is a storage location for Apps. The app catalog is used to upload and deploy the client-side web parts and make them available to site collections and eventually to the users.

1. Go to https://tenantprefix-admin.sharepoint.com (SharePoint Admin Center) and click on Classic features. Click on Open from Apps section.

2. In the Apps window, click on App Catalog.

3. Select option Create a new app catalog site and click OK

4. App Catalog Site Collection Creation form will open. Enter all the details and press OK.  

Now, you will require to create a site collection that will be used to host your content and also to put your app which is uploaded to App Catalog.

Step by Step process to create a site collection in SharePoint Online

1. Go to https://tenantprefix-admin.sharepoint.com (SharePoint Admin Center) and click on Active sites. Click on Open from Apps section.

2. On the active sites page, click on Create Link.

3. On site collection creation page, either you can create a Team Site, Communication site or you can choose Other Options to create a site collection.

4. Other Options: Other options are nothing but more templates to choose from for creating a site collection. You can even find an option to get even more templates by clicking on More templates, click on that link.

5. On more templates/site creation page, you can choose the template you want and fill the details; accordingly, SharePoint site collection will be created.

6. As shown in the screenshot, you can go to https://tenantprefix-admin.sharepoint.com/_layouts/15/online/SiteCollections to see all the site collections created.

Access your SharePoint Workbench

• SharePoint workbench is a design surface for the developer that enables you to view and test your web part in a quick manner.
• You can access workbench from two different locations.
  • You can access workbench from your SharePoint tenant by accessing the below URL. This is tenant-level workbench and the SharePoint Framework (SPFX) version loaded in this workbench is from O365.

    https://tenantprefix-admin.sharepoint.com/_layouts/workbench.aspx

  • You can also access local workbench from your SharePoint site. This workbench uses the SPFx version which is there in your local toolchain.
• You can see the screenshot of a local workbench and a client-side SPFx web part is added.

Reference is taken from MSDN article

Conclusion:

LinkWe went through the process of creating an app catalog site, site collection and accessing the workbench for testing client-webpart.