BlogPost

Part Two - Setting up a developer site collection and App Catalog in Office 365 to work with the new SharePoint Framework

Part Two - Setting up a developer site collection and App Catalog in Office 365 to work with the new SharePoint Framework



In this post we are going to set up the components you need to start building the new style web Apps for SharePoint Online and will also work with SharePoint 2016, we will set up a developer site collection and an app catalog.



Step One

Setting up your app catalog

You will need an app catalog to upload and deploy web parts. Go to the SharePoint Admin center by entering the URL https://yourtenant-admin.sharepoint.com in your browser. Replace yourtenant with your Office 365 tenant prefix.

In the left sidebar, choose the apps menu item and then choose App Catalog.






In the App Catalog Site screen make sure Create a new app catalog site is selected and click ok.






In the Create App Catalog Site Collection Page, Add the following;

  • Title: App Catalog
  • Web Site Address suffix: apps
  • Administrator: Enter your username and choose the resolve button to resolve the username.




Step Two

Setting up a Developer Site

In your SharePoint Admin Center, create a new Site Collection





In the dialog box, Add the following;

  • Title: Developer Site
  • Web Site Address suffix: dev
  • Template Selection: Select Developer Site as the site collection template.
  • Administrator: Enter your username and choose the resolve button to resolve the username.

Choose OK to create the site collection.

SharePoint will create the developer site and you will be able to see its progress in the SharePoint admin center. After the site is created, you can browse to your developer site collection.





Step Three

Add a Document Library

In order to use the preview features, you will need to set up a document library with a new column and upload SharePoint workbench (which is shown below), or we can use the default document library in your developer site collection. This will be called Documents in the left navigation. we are also going to add column to the document library, why we do this will become clearing in future posts but for this exercise we are going to do as follows;

New > Document libeary





Create Document libeary





Choose Site libraries and lists under the Site Administration category.

Choose Customize Documents.





from within the document library settings page > Choose Create column under Columns.





Enter ClientSideApplicationId as the column name and leave the other fields at their current values.





Choose OK to create the column. andf then you should see the following columns;





Step Four

Adding the workbench file

Download the workbench.aspx file from here to your desktop.

Note:You need to upload the SharePoint workbench to test your web parts on SharePoint.

Then upload the file to the Documents library in the dev site collection.




Note: by just clicking on the workbench file you will get the the following kind of error;



This is because we are not running gulp or have yet to install the yeoman scaffolding that will create our project, that can be found in the next post here