Managing Multiple Copies of Files

Ok, ok, if you absolutely must have copies of the same file living in different libraries in SharePoint, this post will show how you’d manage that.  Keep in mind, you’ll have to maintain the updates which means you’ll need to remember that there are copies out there and you’ll need to follow the steps below to push the changes out to the other copies.

First, select the document that you want copies of and go to More > Properties



Next, click Manage Copies in the ribbon


Click the New Copy button

new copy

You’ll then get to a page that lets you specify the destination library and you can change the name of the file if you’d like.


You’ll then see a confirmation page.  Click OK



Now your documents are linked and if you make a change to the source, you can update the copies by following the same steps as above and instead of clicking New Copy, you’ll click Update Copies (screenshot #3).  That will take you to a page that will let you select which files you wish to update.




SharePoint Framework – Package and Deploy your Solution

In the previous 2 posts, I walked you through the setup of several required packages, talked about the SharePoint Workbench, and provided a script to create a public CDN in SharePoint Online.  I also avoided showing the solution.  The code itself isn’t important, but the structure is, so let’s take a look at that while we walk through bundling, packaging, and deploying.

The files that are important to packaging and deploying can be found in the config folder.


Bundle & Deploy

You’ll need to specify a cdn base path for the solution; otherwise, you’ll see that the webpart will try to reference files from the localhost instead of the destination location.  (In a previous post, I provide a script to create a CDN in SharePoint Online).  If you have a CDN in place, open the write-manifests.json file and provide the URL.


You can bundle the solution files with the following command:

gulp bundle --ship

Once you run the previous command, you’ll see a new Deploy folder was created inside temp. You’ll want to upload the files from the Deploy folder to the CDN that you’ve specified.
temp folder

So now you’ve told the solution where it’s going to get it’s content files and it’s time to deploy.

The solution package for an SPFx solution uses yet another new extension (sppkg).  In order to create the package, we invoke the package-solution.json. The file will contain a path where your solution will be deployed. In this case, my solution will be added to “SharePoint/Solution” and will be given the name sp-fx.sppkg.

To create that package, you’ll need the following PowerShell command:

gulp package-solution --ship

Next, take your sppkg file and upload it to your app catalog. You’ll notice that the CDN path appears in the modal to show you where the content for that solution will be referenced from.


Note: If you omit the “–ship” from the powershell commands above, you’ll create packages for debugging and not production. You’ll know that you did this if you see localhost as the content location instead of your CDN.

Now, your solution has been deployed and you’ll just need to add it. If you go to Site Contents > Add an App, you’ll find your web part. Finally, you can add your web part to the page the same way you’re used to adding web parts.Add a webpart

… And that’s pretty much it.

Setting up the Office 365 Public CDN in SharePoint Online

If you’re looking to set up the Office 365 Public CDN in SharePoint Online, you can use the following PowerShell scripts.  I installed the June 2017 Release of the SharePointPnP.PowerShell Commands for this post.

After you run the script, your changes will take affect within 15 minutes.  The files stored in the CDN can only be accessed within the context of SharePoint so if you try to browse to the CDN url for your asset, it will not work; however, if you reference the same url in SharePoint, it will work.

The CDN url will look like:

$spo = Read-Host 'Enter your SPO Service URL. (example https://<tenant>'
$origin = Read-Host 'Enter the url to the CDN.  (example https://<tenant>'

connect-sposervice $spo
$tenant = Get-SPOTenant

Set-SPOTenant -PublicCdnEnabled $true

$tenant = Get-SPOTenant
Write-host 'Public Cnd Enabled = ' $tenant.PublicCdnEnabled 

Write-host 'Allowed File Types = ' $t.PublicCdnAllowedFileTypes

New-SPOPublicCdnOrigin -url $origin

If you need to get the Origin ID, you can find it with the following script.

$tenant = Get-SPOTenant

Hello, SharePoint Framework (SPFx): Getting Started – Quick and Dirty

I know, I know… there’s github, pluralsight, PnP, and a plethora of videos and sites where you can find info on getting started with SPFx.  We’ll just add this one to the list.  This is a quick and dirty getting started guide.  I’ll also provide some references for you to dive deeply into related topics.


What do I need to install?

For starters, you need to install Node.js. Get yourself the LTS version.  nodejs

Once you have that installed, you can open up a command shell of your choice.  I’ll be using PowerShell.  You’re going to want to install the node package manager (npm) globally so you can use it from the command line for all of your projects.  In order to do that, you’ll just need to run the following command in PowerShell or whatever command shell you decided to use:

npm install npm -g

If the above powershell looks a little weird to you, what we’re saying in english is that we want to use the node package manager to install the latest node package manager globally.

Next up is the Yeoman Generator.  This is a handy little tool that creates your SharePoint project for you.  So we need to go back to your trusty npm and install yeoman globally.

 npm install yo -g 

Once you have the Yeoman generator, you’ll want the SharePoint template generator.

 npm install @microsoft/generator-sharepoint -g 

Next up, Gulp.  Now, gulp is a task automation tool.  We’re basically going to use it to run our solution.

 npm install gulp -g 

There’s one last package that needs to be installed and that’s webpack, but I’ll skip it for now.  We’ll set that up when it’s time to deploy our solution.

First Web Part

Now that we have (almost) everything that we need installed, we can start with our project.  The installs above were 1 time installs since we specified that they were each to be globally installed.

The first thing that we want to do is create the directory where our solution will live.  So in PowerShell, I go to the base directory where I store all of my solutions and then I type the following command to create a directory called “SPFx” (call it whatever you want):

 md SPFx 

The above is the mkdir command so you could type the following and it’s exactly the same:

 mkdir SPFx 

Then we want to go to that newly created directory and run our Yeoman generator to create the project files. (At this point, you should be in your project path in PowerShell)

 yo @microsoft/sharepoint

Next, the generator will start asking you for details like what do you want to call your solution, are you building a web part or an extension, names, descriptions, and what JavaScript library you want to use. (The version of the generator at the time of this post is Version Depending on which version you’re on, you may need to provide different inputs.

Here are my inputs. Once I hit enter, it starts installing a ton of stuff so you have time to check your email or maybe get a beverage of your choice.
sp yeoman

And this is what you’ll see when it’s done.  If you look inside the box in the image, it tells you what you need to “start” your solution.  You can go look at the 252 MB of SharePointy goodness that get’s created in the directory above.  (The size on disk is 297 MB).  I’ll let you inspect the files but for our purposes, we just want to run it.  This part I find kind of cool.  You DON’T need SharePoint installed on your machine for this.

sp yeoman end

Type the following to launch your solution inside the SharePoint Workbench!

 gulp serve 

There are a few things to note here.
First, this isn’t SharePoint but it functions like it in that you can click on the plus symbol to add a new web part. You’ll also see a few buttons at the top that will simulate what the page will look like on a mobile device or tablet.


Also, you may notice a certificate error and if you pay attention to the last bit of text outputted by the gulp serve command, you’ll see a warning regarding this. The workbench is using https and won’t load your scripts so you’ll want to run 1 more gulp command which we’ll do next, but first, I’ll add my web part to the page.

hello world workbench.PNG

Run the next command to fix the cert issue. The command will install a certificate. You’ll also get a prompt to confirm and the next time you run gulp serve, you won’t see the cert issue.

 gulp trust-dev-cert 

There’s something pretty cool about the workbench. If you have it running, you can go to your SharePoint Online and test out the page from there. Just go to your site and append /_layouts/15/workbench.aspx.  (Example: https://<tenant&gt;

That’s what you need to get started. To recap, we ran a few 1 time installs (nodejs, npm, gulp, yeoman, and the SharePoint generator). We created a solution using the yeoman generator, and we took a look at the SharePoint Workbench.

This was meant to be a quick and dirty starter guide (mainly for me). Below are additional resources if you want to start diving deeper into some of the concepts mentioned above. In another post, I’ll talk about webpack and deploy a solution.

Additional Resources