Import the starter kit web part

Now we can just delete all the folders and files under src/webparts/worldClock and copy over the content from the original worldTime web part.

Existing and new web part folders side by side

And then we have to rename the files to match our web part name.

Replace with new web part name

In Visual Studio Code (or your prefer editor), check all files to replace WorldTimeWebPart by WorldClockWebPart.

Find and replace

Also change the web part title in the .manifest.json file.

Title property in .manifest.json file

You can change the default properties for description and time zone offset here too.

Properties in .manifest.json file

Now you can start the local workbench to test the web part.

gulp serve

At this point if you have no error, you should see the workbench starting in your default browser.

Web part available in the workbench

Add the web part, and it should work with the properties defined.

Web part added on the workbench

If you don’t want to do further changes, you can already prepare and package your solution. I suppose that you want to host the web parts assets from SharePoint app catalog directly or from the Office 365 CDN (see the official doc for more info). In that case all assets will be included in the solution package.

Run from your web part path the 2 following commands.

gulp bundle --ship gulp package-solution --ship

The package can be found in the sharepoint/solution.

.sppkg file

Now you can just drag and drop this .sppkg file to your SharePoint app catalog (but maybe keep reading first…).

However at this point I ran into one issue, as the component unique ID was also used in the starter kit already installed in this tenant.

Error in deployment

The ID of the webpart can be found in the .manifest.json file.

.manifest.json content

If you want a new unique ID you can use the snippet below in PowerShell.

[guid]::NewGuid() | Select-Object -ExpandProperty Guid | clip

And paste the value in place of the existing one. Then repackage the solution.

But again when I did that, I was still getting the same error “Component ID {0} exists in solution {1} already” (not sure why {0} and {1} are not replaced by the respective values).

So I opened the .sppkg file with 7-zip to find out that I had created a mess.

Duplicates in the .sppkg file

In the dist folder I can see the duplicate manifests with the different IDs.

dist folder with duplicates

So if you already bundled the solution before changing the ID, it’s necessary to go through some clean-up. You can just delete all content from the following folders.

dist

sharepoint/solution

temp

Then you can re-run gulp to build and package the solution.

This time the package should only include stuff with the last defined unique ID in the manifest.json.

Correct content in the .sppkg file

And when you upload the package to the app catalog, you should get no error.

No error shown in the app catalog

In this example, I didn’t set the solution to be available on all sites, so it has to be manually added to the site (Site contents > New > App > select the web part).

After a while the web part will be available, and we can add it on a page.