Rough notes on converting a Sitecore Web forms sublayout to MVC and Helix.

Convert Sitecore Web forms sublayout to Helix and MVC.md

Background

We currently have a Visual Studio solution with two projects: one for our main site, using Web forms, and one for utilities, which is currently Extension methods on Item. (The latter project has been in the queue to migrate to a NuGet package on our local NuGet server.)

Running Sitecore 8.1.160519.

Initial setups

1. Add solution folders to the existing project.
   1. Configuration
   2. Feature
   3. Foundation
   4. Project
2. In repo root, add a src folder.
3. In new src folder create the Helix structure.
   1. Feature
   2. Foundation
   3. Project
4. Add necessary Foundation Sitecore items
   1. All icons should be set to Applications/32x32/folder_gear.png
   2. In /master/sitecore/layout/Layouts create a new Layout Folder item called Foundation.
   3. In /master/sitecore/system/Settings create a new Folder item called Foundation.
   4. In /master/sitecore/templates create a new Template Folder item called Foundation.
5. Add necessary Project Sitecore items
   1. All icons should be set to Applications/32x32/folder_window.png
   2. In /master/sitecore/layout/Layouts create a new Layout Folder item called Project.
   3. In /master/sitecore/layout/Renderings create a new Rendering Folder item called Project.
   4. In /master/sitecore/layout/Placeholder Settings create a new Folder item called Project.
   5. In /master/sitecore/system/Settings create a new Folder item called Project.
   6. In /master/sitecore/templates create a new Template Folder item called Project.
6. Add necessary Feature Sitecore items
   1. All icons should be set to Applications/32x32/folder_cubes.png
   2. In /master/sitecore/templates create a new Template Folder item called Feature.
   3. In /master/sitecore/layout/Renderings create a new Rendering Folder item called Feature.
   4. In /master/sitecore/system/Settings create a new Folder item called Feature.
   5. In /master/sitecore/templates create a new Template Folder item called Feature.

Create the main/default layout

1. Create a new Solution Folder in VS under Project. Name it whatever makes sense for your organization. In our case we called it 'WsbMain' as it was for our main wsb.wisc.edu site.
2. Add a new ASP.NET Web Application project to the Solution Folder.
   1. Give it the name code
   2. Browse to the src\Project directory and create a new directory matching the Solution Folder name from step 1. In our case, 'WsbMain.'
   3. Select that newly created directory for the Project Location.
   4. Select an Empty ASP.NET 4.6 Template, and Add folders and core references for MVC.
   5. Once the project has been created, rename the Project from 'code' to Xxx.Project.Yyy where 'Xxx' is your organization and 'Yyy' is the Project name from step 1. In our case, Wsb.Project.WsbMain.
   6. Go into the Project properties (right click on the Project and select Properties) and update the Assembly name and Default namespace according to step 2.5 ('Wsb.Project.WsbMain' in our case).
   7. Set the Build Action on the Web.config file to None.
   8. Delete the following directories:
      1. App_Data
      2. App_Start
   9. Delete the following files:
      1. Global.asax
   10. Create the following config files (and directories):

       1. App_Config\Include\Project\Wsb.Project.WsbMain.config

           <?xml version="1.0"?>
           <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
           	<sitecore>
          
           	</sitecore>
           </configuration>
          

       2. App_Config\Include\Project\Wsb.Project.WsbMain.Serialization.config

           <?xml version="1.0"?>
           <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
           	<sitecore>
           		<unicorn>
           		</unicorn>
           	</sitecore>
           </configuration>
          

   11. Update AssemblyVersion in AssemblyInfo.cs to [assembly: AssemblyVersion("1.0.*")].
   12. Add the following NuGet packages from the official Sitecore NuGet instance.
       1. Sitecore.Kernel.NoReferences
       2. Sitecore.Mvc.Analytics.NoReferences
       3. Sitecore.Mvc.NoReferences
   13. Create a new publishing profile, pointing to where ever you'll be publishing the files to.
       1. In our case we're publishing to the File System, at C:\inetpub\wwwroot\scdev.Publish, making sure that no options are selected for File Publish Options.
       2. Make sure you manually add this to Git if you're using the standard VS .gitignore file, if the settings should be shared.
   14. In the Views directory, create a new folder name based upon step 1. In our case, WsbMain.
   15. Create a new directory within the directory created in step 13 called Layouts.
       1. So in our example, the structure under the solution looks like Project\WsbMain\Wsb.Project.WsbMain\Views\WsbMain\Layouts
   16. Create a new MVC View Page within the new Layouts directory. Title it whatever makes sense.
       1. In our case we called it Default to match the Habitat example site.
   17. Populate Default.cshtml with the necessary code for your layout.
   18. Add a new Layout item in Sitecore matching the name from step 16. In our case Default.
   19. Set the Path to the Web root path to the view.
       1. In our case /Views/WsbMain/Layouts/Default.cshtml
       2. If you're not sure, publish the project and then browse to it in the file system.
   20. Add the layout to an item and test.

Create a feature (rough rough notes)

Pretty much the same as adding a new Project, but with the following changes:

1. Instead of _.Project._, use _.Feature._.
2. The following NuGet package should not be necessary:
   1. Sitecore.Mvc.Analytics.NoReferences
3. When creating the directory structure in the Views folder, you can use the name of the feature as the child folder, which should also generally match the Razor View file name.
   1. For example: /Views/PageText/PageText.cshtml

General list of concerns

1. Current layout uses inline custom controls for certain elements.
2. Current layout includes standard .NET placeholders, for widgets to inject CSS, JS, and off canvas forms.

Unicorn sync:

1. Serialize from dev
2. Copy files over from \inetpub\wwwroot\dev\Data\src to \inetpub\wwwroot\stage\Data\src
3. Load /unicorn.aspx on stage
4. Perform sync

Deployment:

1. Deploy Foundation
2. Deploy Projects
3. Deploy Features