TypeScript error in Visual Studio – Cannot find module, problem with the tsconfig.json file

As much as I like to write blogs, I also like to follow and work through other people’s blogs, especially if they are step by step instructions similar to the way I think. This one particular blog was showing how to create a simple Angular Hello World app. I followed the blog to the letter and when I tried to build the app I kept getting the following error messages

  • Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.
  • Cannot find module ‘@angular/core’
  • Cannot compile module unless the ‘—module’ flag is provided with a valid module type. Consider setting the ‘module’ compiler option in a ‘tsconfig.json’ file.


This makes no sense, as in my tsconfig.json file I had everything setup correctly. I had set experimentalDecorators to true, so I shouldn’t have received the first error message. Couldn’t work out why it couldn’t find @angular/core as I had used the npm package manager to install it, and in my tsconfig.json file I had set the module to ‘commonjs’. I checked on other websites that I had set up my tsconfig.json file correctly.

compilerOptions: {
declaration: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
lib: [
module: "commonjs",
moduleResolution: "node",
noImplicitAny: true,
removeComments: false,
sourceMap: true,
suppressImplicitAnyIndexErrors: true,
target: "es5",
typeRoots: [
compileOnSave: true,
exclude: [

It seems if you download TypeScript 2.0 for Visual Studio 2015 you will not be able to use a tsconfig.json file. If you are working with CommonJS module system, Visual Studio will ignore the tsconfig.json file, even though putting the tsconfig.json file within the project, Visual Studio prevents the use of the TypeScript build section of the project properties.



The tsconfig.json file is required in Visual Studio Code, but it doesn’t seem to be required for Visual Studio. To fix your error messages, first, remove the tsconfig.json file from your project. This then makes the Typescript build on the properties page enabled. I switched the Module system to CommonJS and ECMAScript version to ECMAScript 6. This got rid of my bottom two errors, however I was still getting the message:

Experimental support for decorators is a feature that is subject to change in future release. Set the ‘experimentalDecorators’ option to remove this warning.

To fix this error:

  • Unload the project from your solution – right click the project and select Unload Project
  • Once you have unloaded the project, you can right click it again, and then edit the project file.
  • Add the following to both PropertyGroup where the condition is for debug or Release. (<PropertyGroup Condition=” ‘$(Configuration)|$(Platform)’ == ‘Debug|AnyCPU’ “> or  <PropertyGroup Condition=” ‘$(Configuration)|$(Platform)’ == ‘Release|AnyCPU’ “> )

  • Save your changes, then right click the project and Reload Project

Your errors should now be gone, and you can continue to build your project.


https://www.infopulse.com/blog/using-angular-2-in-visual-studio-2015-tutorial/ – The blog post that helped me!

Ensuring Visual Studio 2015 is using the latest NodeJS and NPM version

When Visual Studio 2015 uses NodeJS and NPM it uses the version local to itself, which as I discovered is annoying if:

  1. You didn’t know this
  2. Thought your PC was up to date after installing the latest NodeJS and NPM globally.

First lets ensure you have installed the latest nodejs and npm globally.

Install / Update NodeJS globally.

  • Using your browser, navigate to https://nodejs.org and download the current version of NodeJs.
  • Once you have downloaded NodeJs, ou can run the installer and work your way through the wizard.
  • Once installed, you can open up a command prompt. Node.js command prompt is also available.

  • Open up the node.js command prompt and type node -v to get the node version. Should match the version you downloaded from the website.

Installing / Update NPM globally.

  • Open the Node.js command prompt
  • Type the following
npm install npm@latest -g
  • Then type npm -v to get the npm version number.

Extensions for Visual Studio 2015

I recommend getting the following extensions for Visual Studio

Click download in both links and install the extensions into Visual Studio.

After you have installed the “NPM Task Runner”, you might need to make it visible in your Visual Studio. To do this, select View > Other Windows > Task Runner Explorer or press Ctrl + Alt + Bkspace

After you have installed the “Package Installer”, when you right click on your project you will see a new link under Add
called Quick Install Package…

When clicked, you can select and install a package from the following package managers

We will use these extensions in a moment.

Checking Visual Studio Version and Updating.

We are going to create a project, and add a package using the Quick Install Package, this will create us a package.json file. We add some commands to the Scripts section, and run them in the task runner.

  • Create yourself a blank web project.
  • Right click
    the project and select Quick Install Package…
  • Select NPM and type TypeScript in the next box, can leave Latest Version and click Install.

  • After you have clicked install you should see a package.json file, which doesn’t have much in it.
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^2.1.5"
  • Update the json file to include two scripts, getNPMVersion, getNodeVersion and updateNPMVersion.
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^2.1.5"
  "scripts": {
    "getNpmVersion": "npm -v",
    "getNodeVersion": "node -v",
    "updateNPM": "npm install npm@latest"
  • After you have saved the json file, in the Task Runner Explorer window, click the refresh button. You should see your three scripts available to you.

  • Right click on getNpmVersion
    and click Run. The result will display in the Task Runner Explorer console window. You will note that this version is different to the version number you got at the start of this blog post through the Node.js command prompt window.
  • To Update NPM, right click on updateNPM and click Run. After it has completed, run getNpmVersion again. You should find that the version now matches the version you got earlier.
  • Right click on getNodeVersion and click Run. My version is v5.4.1
  • There doesn’t seem to be a command to update the Nodejs in visual studio. However, we can make it use the global version of Nodejs.
  • In Visual Studio click on Tools > Options. Inside Options, select Projects and Solutions > External Web Tools.
  • Add the NodeJS path. Mine is “C:\Program Files\nodejs”. Then move this to the top.

  • Go back to the Task Runner and run the command getNodeVersion you should now see the version matches the version you got earlier in the Node.js command window.

You should now be up to date.

Getting Started with TypeScript

What is TypeScript?

TypeScript works on any browser, any host, any operating system. TypeScript isn’t really a new language. It is an open source project, maintained by Microsoft, configurable to JavaScript version. (ES3, ES6, ES7). It is described as

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” – Typescriptlang.org

It adds typing (e.g., String, Boolean, Integers) which for a developer is great because:

  • Allows tooling to autocomplete using intellisense
  • Mistakes in code can be spotted instantly
  • No worries of accidently converting a number into a string, as you might with JavaScript.
  • Supports Standard JavaScript code as well as TypeScript, so you can work with both together.
  • Allow encapsulation through classes and modules
  • Supports contructors, properties and functions
  • Defines Interfaces
  • Saves developer time, and cuts down debugging code.

Installing a compiler

The compiler for TypeScript is called TSC, it works across platforms. It converts TypeScript to JavaScript as browsers do not understand TypeScript. A way to install tsc is as a node.js package with node npm command line.

First you need to install nodejs.

  • Using your browser, navigate to https://nodejs.org and download the current version of NodeJs. (I downloaded the version recommended for most users)
  • Once you have downloaded NodeJs, you can run the installer and work your way through the wizard.
  • Once installed, you can open up a command prompt. Node.js command prompt is also available.

Installing TypeScript Complier

Now you have Node.js installed you can install TypeScript through the node package manager (npm). From the Node.js command prompt, type

npm install -g typescript

Note: The -g flag means to install globally not locally to a folder so that typescript complier works everywhere.

To test that the complier has been installed and working properly, you can perform this quick test.

  • With the command prompt still open, go to a folder of your choice and then type:
    Copy con test.ts
    class myfirstTSClass{
  • Press Ctrl + Z and the file is then saved. If you open the file called test.ts in notepad, you will see that a file has been created with the class inside.
  • To compile into JavaScript, type
    tsc test.ts
  • In your folder, you should now see a test.js. Open this file in notepad and you should see the following JavaScript.
    var myfirstTSClass = (function () {
        function myfirstTSClass() {
        return myfirstTSClass;

Editor Choices

To work with TypeScript you have many different editors you can use for example:

I’m not going to go through how to set up all the different editors, but I will show how to set up Visual Studio and Visual Studio Code as these are the two environments that I typically find myself in when coding. If you head to the TypeScript website (https://typescriptlang.org and click Donwload, you can find information for the other editors there.

Setting Up Visual Studio for TypeScript

Visual Studio is actually really easy, as it is already built into Visual Studio 2015, however it is worth while heading to the TypeScript site and clicking Visual Studio 2015 link (as shown above) to ensure you have the latest version installed within Visual Studio. If you have Visual Studio 2013, you just need to head to the TypeScript site and click the Visual Studio 2013 link.

Install NodeJS for Visual Studio.

Although it’s not a requirement, I recommend installing NodeJS for Visual Studio here too. This will allow you to create NodeJS project within Visual Studio. When I was learning TypeScript, I didn’t always need to write JavaScript that ran in a browser, my hello world application just needed to run within a console window.

In your browser head to VisualStudio.com, on the menu bar, select Features > Application Development > Node.js. Then click the link to “Get Node.js Tools for Visual Studio”

Once downloaded, I then had new project templates available to me in Visual Studio.

Creating a TypeScript Hello World in Visual Studio 2015

  • Open up Visual Studio and create a new Project, select HTML Application with TypeScript, found under the TypeScript template. Click OK.
  • In Solution Explorer you should see a structure like mine. Before we do anything, click the Show All Files button.
  • By opening the app.ts file we can see an example TypeScript class written called Greeter, it displays the current time on the screen.
  • As soon as you hit the Save button, the TypeScript complier automatically runs and creates the corresponding JavaScript and map file. If you refresh the files showing in Solution Explorer, you can see the app.js and app.js.map file. (The JavaScript files are not automatically added to the project, which is why I said click “Show All Files” button).
  • If you open the app.js file, you can see the converted JavaScript.
  • Run the application and in the browser it will tell you the current date and time.

Visual Studio 2013

If you are using Visual Studio 2013, you can install Web Essentials (https://vswebessentials.com) which gives you a JavaScript preview window, to allow side by side TypeScript/JavaScript files.

Setting up Visual Studio Code for TypeScript

As long as you have gone through the steps of installing nodejs and the typescript complier, Visual Studio Code will be able to build TypeScript projects. Unlike Visual Studio 2015, Visual Studio Code requires a bit of configuration for a brand new project to ensure the TypeScript gets converted into JavaScript.

Creating a Hello World in Visual Studio Code

  • Using the command line create a new directory somewhere, and then type code [nameofdirectory] to load it up in VS Code.

    Alternatively using Windows Explorer, you can create the folder, and then right click the folder and select Open with code.

  • Once VS Code has opened, we will create a couple of folders. One called ts and one called js. You do this by clicking on the folder icon in the explorer view.
  • In the ts folder, create a file (pressing the New File button next to the New Folder Button in the explorer view) and call this file helloworld.ts
  • Write the following TypeScript within this file.
class HelloWorld{
        let divLabel = document.getElementById("mylabel");
        divLabel.innerHTML += "Hello from Visual Studio Code";

var helloworld = new HelloWorld();
  • Then outside any folder, create a new file called index.html and put the following HTML within the file.
<!DOCTYPE html>
            <h1>Hello World App</h1>
            <div id="mylabel"></div>

       <script src="js/app.js"></script>
  • Now if we try to build the project, either calling up the command box (Ctrl + Shift + P), typing Build
    and then select Tasks:Run Build Task or just using the shortcut to the run build tasks (Ctrl + Shift + B) you will see the following message appear at the top of your VS CODE.

  • Click Configure Task Runner and select TypeScript – Watch Mode. This will create a new folder called .vscode and a pre-completed file called tasks.json

  • The tasks.json file contains a json object that configures the TypeScript complier to run. We are going to change the args so that it compiles our TS folder. Change the line from:
    "args": ["-w", "-p", "."],
    "args":["-w", "-p", "ts/"],

    This will ensure that the TSC watches (-w) the project directory (-p) TS/

  • We are now going to create one more file called tsconfig.json
    and this is also going to be created in the TS folder. The presence of this file specifies the root files and the compiler options required to compile the project. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. In this folder put the following json information.
        "compilerOptions": {
              "sourceMap": true,
                 "target": "es5",
                "outFile": "../js/app.js"

    The above ensures a sourcemap file is created so that debugging is available directly within TypeScript files instead of JavaScript files. It is also targeting the EcmaScript5 version of JavaScript, and that all files are compiled into one JavaScript file called app.js located in the JS folder.

  • Now if you run the build task (Ctrl + Shift + B) the project will compile and create two files within the js folder. (app.js and app.js.map).
  • Also note that when you make any changes to the helloworld.ts or any new ts files you might create within the ts directory, and save the file, because we created a watch build task, the app.js file is updated automatically.

Before we run this simple HelloWorldTS app, let me show you an extension that you should download and install in Visual Studio Code.

Installing “View In Browser” Extension

You only will need to do this once, not for each project you create.

  • Click the Extensions button and then type ‘view in browser’ in the search box. Once you have found the extension, click Install
  • Once installed you will need to Enable it. This will request for VS Code to be restarted. Click OK, to continue.

Running HelloWorldTS

With the View In Browser installed, any HTML page you go to in your project and press (Ctrl + F1), will open the page directly in the browser.

Debugging TS files

In this section I’m not going to go into explaining how the Visual Studio Code debugger works, however, I will show you that you can debug using the browser. As stated earlier, you can debug the actual TypeScript files because of the .map file. If you run your project within a browser like before then press F12 to open up the browsers developer tools. I’m using Microsoft Edge, if you are not able to see the .ts file, then press the Load Source map button. (Highlighted)

After you have set a break point, refresh the page, and you can see that you can step through the TS file by pressing F11.


In this blog post I have explained what TypeScript is, how you can set up TypeScript on your machine using Visual Studio 2013/2015 or Visual Studio Code. We have created 2 simple TypeScript applications, and briefly looked at debugging. This post hasn’t explained how you write TypeScript.


Getting Fiddler to work with SharePoint Online

Something that I’ve always struggled with is getting Fiddler to provide me with REST API results for SharePoint online. These steps should help you.

Install and configure Fiddler

  1. First download and install Fiddler if you haven’t already. You can download fiddler at the following URL : https://www.telerik.com/download/fiddler Unfortunately you have to use an email address to be able to download it now.
  2. After first install of Fiddler, you will get an AppContainer Configuration dialog appear. Just click Cancel for now.
  3. Once Fiddler has opened, from the menu click Tools > Telerik Fiddler Options
  4. On the HTTPS tab ensure that Decrypt HTTPS traffic is selected
  5. Click OK. You will get a dialog asking if you should Trust the Fiddler Root certificate. It is fine to say Yes here.
  6. Say Yes to install the certificate.
  7. They really want to make sure, you are sure. Click Yes again.
  8. Fiddler’s root certificate has now been added to the Machine Root List.
  9. Close and Restart Fiddler.

Composing a REST URL for SharePoint Online.

First we need to log in to SharePoint online.

Now this is the point when I can never get it to work. I open IE/Edge, and instantly whenever I try to hit a https web page I get the following screen.

The trick here is to open Chrome and use that instead.

  1. Using Chrome, log in to your SharePoint online.
  2. In Fiddler, you should see in the left pane, it’s been capturing all your requests. Find a 200 result for your SharePoint site.
  3. In the right hand pane, take down the following information and store it in NotePad.
    1. FedAuth Cookie
    2. rtFA Cookie
  4. Above the right hand pane in Fiddler, one of the tabs is called Composer click on this tab.
  5. In the GET section put your REST API request E.g https://<YourOnlineName>.SharePoint.com/sites/Workflow/_api/web
  6. In the section below enter the following:
    Accept: application/json;odata=verbose
    Content-Type: application/json;odata=verbose
  7. After cookie, you will want to put the rtFa=<rtFaCode>;FedAuth=<FedAuthCode>
  8. Click the Execute button at the top right of the screen. Once you have pressed it a call will be made and show up in the left hand pane. It’s easy to spot because the icon is for JSON.
  9. Double click on this entry and the right hand bottom pane, you will have your JSON response.

Performing Post Requests

There are a few more steps to complete to perform a post request, I’m going to walk you through the steps below. I already have a list called FiddlerList in my SharePoint online site. Currently it holds one item. (My site called Workflow as I was testing something with workflow before working on this post, this has nothing to do with the demo, hopefully it won’t confuse you)

  1. In Fiddler, from your previous composed GET request, first change the GET request to list all items currently in this list. My GET request is now https:// <YourOnlineName>.sharepoint.com/sites/Workflow/_api/web/Lists/getByTitle(‘FiddlerList’)/Items
  2. The results are show below. Take note of your type in the __metadata node. Mine is SP.Data.FiddlerListListItem
    you will need this later for adding an item. The type is normally SP.Data.<ListName>ListItem
  3. Now we need to create a POST request to the URI of /_api/contextinfo and then capture the FormDigestValue

  4. Now we have all the information required to create an item. Go back to the composed tab. Change the URI back to the way we had before to get the list items. https://<YourOnlineName&gt;.sharepoint.com/sites/Workflow/_api/web/Lists/getByTitle(‘FiddlerList’)/Items
  5. Add the X-RequestDigest: put in your FormDigestValue. Your page should look similar to below.
  6. Then in the bottom pane, the Request Body, put the following (Remember to change the type to match your list type).
    {'__metadata': {'type':'SP.Data.FiddlerListListItem'},
    'Title':'Created by Fiddler REST'
  7. Click Execute
  8. If all has worked well you should get a 201 Create Response back, and see the item created in your list.

Update API Request

To perform an update to the list item, first we need to know what the Item ID is. At the end of the 201 create JSON response I can see that the Item I created has the ID of 2.

  1. In my composer I have changed my URI to https://<YourOnlineName>.sharepoint.com/sites/workflow/_api/web/Lists/getByTitle(‘FiddlerList’)/Items(2)
  2. In the top pane, I have set the content-length back to 0 and added IF-MATCH: * and X-HTTP-Method: PATCH this indicates that the post request is actually an update.
  3. Lastly in the bottom pane, Request Body, I have changed the Title.

    Note: Screen shot shows MERGE which is backwards compatible, should use newer command PATCH.
  4. After executing, I get a 204 response, and I can see the title has changed in my list.

Delete API Request

Lastly I’m going to delete my item.

  1. Change X-HTTP-Method to say DELETE instead of PATCH
  2. Remove the Request Body text.
  3. Click Execute, you will get a 200 response back.
  4. Your item has now been removed from the List.

The above should be enough to get you going. You can now use fiddler to test out your REST API calls.

Building SharePoint 2016 development environment – Part 16 – Installing and setting up Visual Studio

A few years ago I wrote “Build your SharePoint 2013 development machine on Windows Server 2012” series, I mainly work in the cloud now, but as the blogs was so popular, I thought I would create a new series for the newer version of SharePoint.

You can access other parts of this post below.

The last part of the 16-part series is to install and set up visual studio so you can start developing on your machine.

I’m going to use Visual Studio 2015 Community edition, this might not be suitable for you, you might have access to Visual Studio 2015 Enterprise/Professional edition. Also there is Usage agreements to the Visual Studio 2015 Community edition, which if in an organisation you might be breaking the licensing agreement.

Downloading Visual Studio Community

  1. Open a browser, and go to URL https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx
  2. Click Download Community 2015 button
  3. Run or Save then run, the download file.
  4. Once the installer has started, select Custom then click Next
  5. On the Select Features screen, I didn’t need to select anything and clicked Next. However, you might want extra programming languages, maybe the common tools such as the Git for Windows extension.
  6. Click Install.
  7. When finished, you will be asked to reboot your machine. Click Restart Now.

Configuring Visual Studio

  1. After your server has rebooted, Sign in and open Visual Studio
  2. You will be presented with a screen to connect to your developer services, if you have any sign in now. It is worth looking into if you are planning on doing some Azure, as you can get some free credits by signing up to Visual Studio Dev Essentials https://www.visualstudio.com/en-us/products/free-developer-offers-vs.aspx. Either sign in, or click Not now, Maybe later.
  3. It will prepare Visual Studio for you on your machine as it is the first time it has been opened.
  4. First thing to do once open is check if there are any updates required. From the Visual Studio menu click Tools > Extensions and Updates… Update anything that needs updating.

Installing Office and SharePoint 2016 Developer Tools

After installing all your updates for Visual Studio, if you go and try to create a new project, you will find that there is no Office/SharePoint templates.

You will need to install this. Note: If you have already installed Microsoft Office Developer Tools for Visual Studio 2015 and Microsoft Office Developer Tools Preview for Visual Studio 2015, you will need to uninstall these first otherwise SharePoint 2016 projects will not show up in Visual Studio.

  1. In a browser go to the URL https://www.microsoft.com/en-us/download/details.aspx?id=51683 and click Download to download Microsoft Office Developer Tools Preview 2 for Visual Studio 2015
  2. Select 14.0.23930\enu\cba_bundle.exe. Once downloaded, run.
  3. Click Install
  4. After it has successfully installed, you can click Close
  5. Open Visual Studio 2015 (Don’t forget to run as Administrator)
  6. Click File > New > Project
  7. Under Templates > Visual C# > Office/SharePoint > SharePoint Solutions and you should see the SharePoint 2016 templates.

Getting around the cannot connect to the target site message.

If you continued from the last part to create a SharePoint project and tried to connect to SharePoint, you would have got the following message about SharePoint solutions only work with locally-installed version of SharePoint Foundation or SharePoint Server.

To get around this problem you have to add the URL’s to your host file.

  1. Open Notepad as administrator
  2. Open the file C:\Windows\System32\drivers\etc\hosts. (You will need to look at all files, not .txt files to see it)
  3. Add the following lines and then save the hosts file. dev.cfcode2016.com intranet.cfcode2016.com

  4. Now when you click the Validate button in Visual Studio – SharePoint Customization Wizard you will get a connection successful message.

Other programs to install

You might decide not to use Visual Studio 2015, and use Visual Studio Code as I’m aware some developers are now doing, mainly because it is a lot faster to run on the machine. You might also want to install Office products such as Word/Excel.

Removing old Checkpoints.

Now your machines are complete, you probably don’t have a reason to go back re-apply an old checkpoint. Therefore it make sense to clean them up. After all every time you take a checkpoint a new file is created on your host, and the difference between your original or previous checkpoint file is stored within this new file. If you take a look at where your Virtual Machine stores it’s hard drive, there will be multiple files, all quite large in size. Not including the folders, this takes up over 85GB of space on my host machine.

  1. Ensure that your Hyper V virtual machines are shut down.
  2. Here you can either delete just the CheckPoints you want, or delete the whole subtree. As I don’t need to keep any of my checkpoints, I’m going to select the top checkpoint and then click Delete Checkpoint subtree from the right pane.
  3. Click Delete on the confirmation dialog box.
  4. If you look back where you store your Virtual Machines its hard drive, it looks a lot less messy, and uses up less space. (Total over 47GB)

Thank you for reading this series, hopefully you found it useful.

Building SharePoint 2016 development environment – Part 15 – Configuring Workflow

A few years ago I wrote “Build your SharePoint 2013 development machine on Windows Server 2012” series, I mainly work in the cloud now, but as the blogs was so popular, I thought I would create a new series for the newer version of SharePoint.

You can access other parts of this post below.

The configuration of the Workflow Manager for SharePoint 2016 is the same as it was for SharePoint 2013. Not only do you need to install the separate Workflow Manager components, once installed SharePoint designer will show SharePoint 2013 Workflow in a dropdown when deciding which platform to build the workflow on.

We will be installing Workflow Manager 1.0 CU3. Although my instructions add all this to the SharePoint Machine, the reason why Microsoft have made the Workflow manager separate is for scaling. There is no need for this to be installed on the SharePoint box. You could create another Windows Server 2012 R2 and add that to the domain and run the Workflow manager on that. There are probably a few more steps required in configuring. Here is a full walkthrough provided by Microsoft Technet https://gallery.technet.microsoft.com/SharePoint-2016-Workflow-acd5ba2a if you wish to delve in deeper.

Installing SharePoint Designer 2013

Wait! SharePoint Designer 2013? Yes.

There is no SharePoint Designer 2016, there is no plan to release one either. Microsoft have stated that they will support SPD 2013 with SharePoint 2016. We are installing SharePoint Designer here because I can use it to prove if you have correctly configured Workflow Manager with SharePoint 2016 correctly.

SharePoint Designer 2013 is a free tool from Microsoft.

  1. Download SharePoint Designer 2013 32bit from the Microsoft Site.
  2. Once downloaded run the file sharepointdesigner_32bit.exe
  3. Accept the License terms and click Continue.
  4. Click Install Now, (Unless you wish to customise and change file location, user information etc)
  5. Once installed, I’d recommend performing a Windows Update. From the Start Menu, type Windows Update, open the application and run any updates required. Reboot if necessary.

Check to see Workflow settings in SharePoint Designer

  1. From the start menu, type SPD and open SharePoint Designer 2013.
  2. Once it has loaded up, click Open Site
  3. Type the URL https://dev.cfcode2016.com click Open
  4. If prompted, enter your credentials
    User: cfcode2016\SP_SetupPassword: Pa55w0rd
  5. From the Navigation menu, select Workflows

  6. On the ribbon menu, select List Workflows > Documents

  7. In the Create List Workflow dialog, at the bottom you will see a dropdown box for Choose the platform to build your workflow on. Only SharePoint 2010 will be listed.

  8. When we come back to this later, we will see SharePoint 2013 Workflow. Close SharePoint Designer for now.

Configuring Workflow Manger accounts

The Workflow Manager will run under new accounts that we haven’t created yet.

  1. On the Domain Controller machine, in the start menu, type Active Directory Users and Computers and open it.
  2. Expand the tree in the left hand pane to see the Managed Service Accounts OU. Select the Managed Service Accounts OU.
  3. Right click in the right hand pane, and select New > User.
  4. Create a user called SP_Workflow. Set the full name and log on name to SP_Workflow. Click Next.
  5. In the password dialog screen, enter the following and click Next
    1. Password and Confirm Password as: Pa55w0rd
    2. Untick User must change password at next logon.
    3. Leave User cannot change password as unticked
    4. Tick Password never expires
    5. Leave Account is disabled as unticked
    6. Click Next. Then click Finished.

Setting up SQL with the correct Security Accounts

  1. On the SharePoint Machine, from the start menu, type SQL Server Management Studio and open up the application
  2. In SQL Server click Connect. (This should be to SQL2016 database instance).
  3. In the left hand menu expand Security. Right click Logins. And select New Login…
  4. In the Login – New dialog box, click the Search button.
  5. Click the Locations button and select Entire Directory.
  6. Type SP_Workflow in the Enter the object name to select, and click Check Names. This will resolve the name. Click OK.
  7. In the left hand panel select Server Roles.
  8. Tick both securityadmin and dbcreator then click OK.
  9. Close down SQL Server Management Studio

Giving SP_Workflow administrative rights on the SharePoint machine.

  1. From the start menu, type Edit local users and groups and open up the application.
  2. In the left hand panel, select Groups
  3. In the right hand pane, double click Administrators
  4. On the Administrators Properties dialog box, click Add
  5. Type SP_Workflow in the Enter the object name to select, and click Check Names. This will resolve the name. Click OK.
  6. Close Edit local users and groups.

Install the Microsoft Web Platform Installer 5.0

  1. Go to the URL https://www.microsoft.com/web/downloads/platform.aspx and download the latest Microsoft Web Platform Installer
  2. Once downloaded run the file wpilauncher.exe
  3. If like my machine it is already on there, it will just open the Web Platform Installer 5.0 else it will install it for you. Accept the License Agreement and click Install. Then click Finish when complete.

Install Workflow manager

  1. From the Start menu, type Web Platform Installer and open the application

  2. In the search box in the top right of the screen, type Workflow Manager and press Enter.
  3. Click Add on the Workflow manager 1.0 Refresh (CU2) and click Install at the bottom.

  4. Click I Accept

  5. When complete, click Continue.

  6. Click Finish.

  7. Close the Workflow Manger Configuration Wizard that has popped up.

Apply Cumulative Update 3.0 for Workflow Manager 1.0

  1. Close and re-open the Web Platform Installer 5.0 we are going to install the CU 3. (You need to close and re-open otherwise the installer thinks Workflow Manger 1.0 hasn’t been installed)
  2. Type Workflow Manger and press Enter in the top right search box.
  3. Click Add for Workflow Manager 1.0 Cumulative Update 3, then click Install at the bottom.
  4. Click I Accept. Once installed click Finish. Click Exit on the Web Platform Installer.

Configure the Workflow manager

  1. From the start menu, type Workflow Manager Configuration
  2. Click on Configure Workflow Manger with Custom Settings
  3. In the Configure Farm Management Database,
    1. Enter your SQL Server Instance: sql2016.cfcode2016.com
    2. Tick Use the above SQL Server Instance and Settings for all Databases
    3. Enter the Database Name: WF_ManagementDB
    4. Click Test Connection button to ensure all working OK.
  4. In the Configure Instance Management Database
    1. Enter the Database Name: WF_InstanceManagementDB
    2. Click Test Connection button to ensure all working OK.
  5. In the Configure Resource Management Database
    1. Enter the Database Name: WF_ResourceManagementDB
    2. Click Test Connection button to ensure all working OK.
  6. In the Configure Service Account
    1. Enter the User ID: CFCODE2016\SP_Workflow
    2. Enter the Password: Pa55w0rd
  7. In Configure Certificates
    1. Leave Auto-generate ticked
    2. Certificate Generation Key: Pa55w0rd
    3. Confirm Certificate Generation Key: Pa55w0rd
  8. In Configure Ports leave default port numbers
    1. https: 12290
    2. http: 12291
    3. Leave Allow Workflow management over HTTP on this Computer unticked
    4. Leave Enable firewall rules on this compute unticked (As we have disabled our firewall)
  9. In Configure Admin Group
    1. Leave BUILTIN\Administrators
  10. Click Next button
  11. On the Service Bus Configuration page, please provide the following
  12. In Configure Farm Management Database
    1. Enter the Database Name: Sb_ManagementDB
    2. Click Test Connection button to ensure all working OK
  13. In Configure Gateway Database
    1. Enter the Database Name: Sb_GatewayDB
    2. Click Test Connection button to ensure all working OK
  14. In Configure Message Container Database
    1. Enter the Database Name: Sb_MessageContainerDB
    2. Click Test Connection button to ensure all working OK
  15. In Configure Service Account
    1. Tick Use the same service account credentials as provided for Workflow Manager
  16. In Configure Certificate
    1. Tick Auto-generate
    2. Tick Use the same certificate generation key as provided for Workflow Manager
  17. In Configure Ports
    1. https: 9355
    2. tcp: 9354
    3. Message Broker Port: 9356
    4. Internal communication Port Range: 9000
    5. Untick Enable firewall rules on this computer (as we have disabled out firewall)
  18. In Configure Admin Group
    1. Leave BUILTIN\Administrators
  19. Click Next button
  20. On the Summary page, click the Tick button at the bottom right of the screen to start installation.
  21. The configuration process can take up to 10 minutes to complete. Once complete, you will see a success pag

Add Workflow Manager Certificate into SharePoint

  1. In Start Menu, type IIS and open Internet Information Services (IIS) Manager
  2. Expand your server name, and Sites. You will now see a site called Workflow Management Site

  3. Click on Workflow Management Site, then on the right hand pane, click Bindings
  4. Select https and click edit.

  5. On the Edit Site Binding, under SSL certificate you will see a Certificate that matches your Server Name. Click the View button.

  6. On the Certificate dialog, click on the Details tab.
  7. Then click Copy to File button.
  8. On the Certificate Export Wizard click Next.
  9. On the Export Private Key page, select No, do not export the private key, click Next

  10. On Export File Format page, select DER encoded binary X.509 (.CER) Click Next
  11. On File to Export page, select a path and filename on your machine. Click Next.

  12. Click Finish. You will receive a successful export message.

Import Certificate into SharePoint Trust

  1. Open SharePoint 2016 central administration
  2. Under Security > General Security click Manage Trust
  3. Click the New button in the ribbon.
  4. On the Establish Trust Relationship page, enter following information:
    1. Name: Workflow Manager
    2. Root Authority Certificate: <Select your file from previous steps>
  5. Click OK.
  6. You will see your certificate in the store.

Register Workflow Service Proxy

  1. In Start Menu, type SharePoint 2016 management Shell (run as administrator) and open the application
  2. In the console type:

Verify the Configuration of Workflow Manager.

  1. Open SharePoint 2016 central administration
  2. Click Application Management
    > Manage services applications
  3. At the bottom of the Manage Services Applications page, there will be Workflow Service Application Proxy

  4. If you click on Workflow Service Application Proxy it will take you a status page that will show you that workflow is now connected.

Check to see Workflow Settings are working in SharePoint Designer

  1. From the start menu, type SharePoint Designer and open the application
  2. Once SharePoint designer has opened, click Open Site.
  3. Type the URL https://dev.cfcode2016.com click Open.
  4. If prompted, enter your credentials
    User: CFCode2016\SP_Setup
    Password: Pa55w0rd
  5. From the Navigation menu, select Workflows
  6. On the ribbon menu, select List Workflow > Documents
  7. In the Create List Workflow dialog, at the bottom you will see a dropdown box for Choose the platform to build your workflow on. Both SharePoint 2010 and SharePoint 2013 should be listed if the Workflow is set up correctly.

We are almost at the end. You SharePoint farm is configured to give you a good start as a development machine. Only thing left now is actual development tools. That will be covered in my final post of the series. Shut down your machines, take a checkpoint. (We will remove checkpoints in the last post)

Building SharePoint 2016 development environment – Part 14 – Enterprise Search Centre

A few years ago I wrote “Build your SharePoint 2013 development machine on Windows Server 2012” series, I mainly work in the cloud now, but as the blogs was so popular, I thought I would create a new series for the newer version of SharePoint.

You can access other parts of this post below.

Creating a vanity name

  • Log into your domain controller. In Start type DNS and open the DNS Manager.
  • In the left hand pane, expand Forward Lookup Zones and click on cfcode2016.com
  • Right click on cfcode2016.com and select New Host (A or AAAA)…
  • Put in the name search, put the IP address point to the SharePoint Server. Click Add Host

Search Centre Web application

We are now going to create a new Web Application for our Search center site. We are going to create a path-based site collection.

  1. From the start menu, type SharePoint 2016 Central Administration and open the site.
  2. Select Application Management > Manage Web Applications.
  3. In the ribbon click the New icon
  4. In the Create New Web Application dialog leave Create a new IIS web site selected and set up the following
    1. Name: SharePoint Search – 33333,
    2. Port:33333
    3. Host Header: <Leave Blank>
    4. Path: <Leave as default>
    5. Allow Anonymous: No
    6. Use Secure Sockets Layer (SSL): Yes
    7. Claims authentication Types: Leave as is, enabled, integrated, NTLM
    8. Application Pool: Search – 33333
    9. Select Security Account: CFCODE2016\SP_Search
    10. Database Name: SP_SearchDB
  5. Click OK.
  6. After Web Application created, click OK.

IIS Bindings and AAMs.

  • . In Start type IIS and open IIS Manager
  • Navigate to SharePoint Search -33333 and then on the right hand panel, click Bindings…
  • On the Bindings dialog, select the bindings for port 33333 and click Edit
  • Leave the host name blank, but select your certificate. Click Ok
  • Click Add
  • In the Add Site Binding page, select https from the Type dropdown, leave the IP address as All Unassigned, the Port should say 443. Ensure you tick Require Server Name Indication. Enter the Host name as search.cfcode2016.com then select your certificate. Click OK
  • Open SharePoint 2016 Central Administration and select Application Management then Configure alternative access mappings.
  • On the right of the screen, change the Alternate Access Mapping Collection to SharePoint Search -33333
  • Click on the only entry https://cfsp2016:33333 and edit it to say https://search.cfcode2016.com, click OK.
  • Click Add Internal URLs enter https://cfsp2016:33333 click Save.
  • Click Add Internal URLs enter https://cfsp2016.cfcode2016.com:33333 click Save.

Create Search Centre Site Collection

  1. From Central Administration landing page, select Application Management then select Create site collections
  2. Ensure the Web Application is https://search.cfcode2016.com then enter the following information:
    1. Title: Enterprise Search
    2. URL: /
    3. Template Selection: Enterprise > Enterprise Search Center
    4. Primary Site Collection Admin: SP_Setup
  3. Click OK.
  4. Once site is created, just click OK.

Give All users visitors access to Search.

  1. Once the site has been created, navigate to https://search.cfcode2016.com
  2. Go to Site Settings. Click the Cog icon at the top right of the page, then select Site Settings.
  3. Under Users and Permissions, click Site Permissions
  4. Click on Enterprise Search Visitors.
  5. On the menu bar, click New > Add Users
  6. Type and select Everyone. Click Share.

Configure Search Service Settings

  1. Back in Central Administration, select Application Management then Manage service applications.
  2. Click on Search Service Application.
  3. On the Search Service Application page, the top of the screen is already asking you Where should user’s searches go? Click on the location link.
  4. Enter the URL as https://search.cfcode2016.com. Click OK.

Note: At this point I uploaded a document to my intranet.cfcode2016.com site.

Search Content Sources

Here we are going to configure the Content Sources so that it searches and brings back the correct content.

  1. Open SharePoint 2016 Central Administration.
  2. Open Application Management > Manage Service application > Search Service Application
  3. In the Quick Launch menu on the left, under Crawling click Content Sources
  4. Click on Local SharePoint Sites.
  5. In the Start Address remove everything apart from the following :
    1. https://hnsc.cfcode2016.com
    2. https://hnsc.cfcode2016.com:11111
  6. Under Crawl Schedules we are going to set it up to run full crawl once a week and incremental once day. You may configure this differently or not at all for you environment. It really depends how much you need search to be up to date. It is quite an intensive resource process, and we are running everything on one box. Under Incremental Crawl,
    click on Create Schedule
  7. Set the Type as Daily. Accept the defaults and click OK.
  8. Under Full Crawl, click on Edit schedule. Set the Type as Weekly. Accept the defaults and click OK.
  9. Click OK
  10. Back on the Manage Content Source page, click New Content Source in the menu and fill out the following:
    1. Name: People
    2. Content Source Type: SharePoint Sites
    3. Start Addresses: https://my.cfcode2016.com
    4. Crawl Settings: Crawl everything under the hostname for each start address
    5. Crawl Schedule: (Same as Local SharePoint Sites, use the dropdown)

Setting the Super User and Super Reader account

  1. Back in SharePoint 2016 Central Administration, select Application Management > Manage Web Applications.
  2. Select SharePoint HNSC Web Application and then click User Policy from the ribbon.
  3. On the Policy for Web Application dialog, click the Add Users on the menu.
  4. Accept (All Zones) then click Next.
  5. Add the user cfcode2016\SP_SuperUser and tick Full Control. Click Finish
  6. Repeat steps 3-5 for cfcode2016\SP_SuperReader and give Full Read rights.
  7. Click OK and close Policy for Web Application.

Kick off a full crawl

  1. Head back to the Search Service Application Service (Application Management > Manage Service Applications > Search Service Application.
  2. On the quick launch menu area, look for Content Sources under Crawling and click it.
  3. On the Manage Content Source page, click Start all crawls. This will kick of search crawling on your server.
  4. After crawling had finished, I headed to https://search.cfcode2016.com and searched for my document I uploaded earlier called “typescript”

Issue with People Search.

If you go to your People Search and type * but find no results come back, and you have followed everything correctly, I would ask you to check one thing.

  1. In SharePoint 2016 Central Administration, go to Application Management > Manage Service Applications. Then highlight the SharePoint User Profile Service Application.
  2. Click Administrator from the ribbon. Ensure that SP_Search is in there and has the permission Retrieve People Data for Search Crawlers, and ensure that SP_Farm is in there with Full Control.
  3. After updating this, run another full crawl, then try People search again.

We are almost at the end of the blog series on building a SharePoint 2016 development machine. Two more posts to go. Setting up workflows and setting up Visual Studio. Shut down your machines, take a checkpoint.