In most articles concerning the deployment of search display templates to SharePoint the method described is to copy one of the existing html design files in the “/_catalogs/masterpage/display templates” folder and save it with a new name in the same folder. But, when deploying from Visual Studio or from a package wsp, I think a good approach is to deploy the JavaScript file only. The reason for this is that you avoid the problem of manually republishing the html file after deployment, and, if you are an experienced JavaScript developer, you can work with JavaScript only.

The steps I usually follow in my development environment is as follows:

1. Copy a html design file for an existing display template (for example the “Item_TwoLines.html” for CSWP item display templates)
2. Save it to the same location, but with a different name (for example “Item_MyTemplate.html”)
3. Copy the automatically generated JavaScript file (which will have the name “Item_MyTemplate.js”)
4. Delete the two files from the display template library in SharePoint
5. Create an empty module in your SharePoint project in Visual Studio and give it a name and an Url as shown below
6. Add an element for your new template as shown below
   1. Remember to set “Level” to “published” and “ReplaceContent” to “true” in order for simpler solution upgrade
   2. The property “ManagedPropertyMapping” should be set to contain the fields that you need to use in the display template. The same managed property mappings should be specified in the JavaScript also, as shown below
7. Deploy the template and test it!