Guide to Creating an SXA Module in Visual Studio

Need to create a custom Sitecore module or component for a project, feature, or foundation? Here are the steps you need to undertake a Helix based approach to remain aligned with best practice.

What is SXA?

The Sitecore Experience Accelerator (SXA) provides a library of code snippets and some modules that help you with delivering fast results – but this isn't the only benefit.

SXA also provides a best practice foundation. It's built on Helix that delivers quality Sitecore generated code that enables multiple process and provides business benefits:

This article guides you through setting up Visual Studio as a starting point.

Things to know before you start

• Module Name: MainSite - What is the term that people use to identify the bulk of the work you're about to undertake?  This should be a one or two word alias that can be used in meetings by BA's and PM's
• Helix Layer: Project
• Github Repository: Demo01.MainSite - This is the name of the Github repository you'll clone to your Working Directory
• Working Directory: D:\Projects - This is the directory where all the source code for all your projects is stored
• Client Alias: Demo01 - This is the alias of the Client. In our example, we'll use Demo01

Create a new project

Create a New Visual Studio Project by first selecting the Template for the Project. Use Visual Studio 2019 and Select ASP.NET Web Application (.NET Framework)

Configure new project

When creating the project, it's important to put the code somewhere predictable and can be relied upon during the deployment process. In order to do that, create the project with the name "code" so that the file system is setup as expected. Then change a few things so they look correct after the project is created.

Update the following values:

• Project name: code
• Location: {Working Directory}\{Github Repository Name}\src\{Helix Layer}\{Module Name}
• Framework: {Sitecore nominated version of .NET}

Create a new ASP.NET Web Application

Turn off Configure for HTTPS and select Empty.

Click the Create button to continue. This will setup your application in the correct File System location but there are some changes that need to be made to the Visual Studio Project before you can use it.

Assembly information

Add Global Assembly Info into the Properties Folder as a linked Item. If you don't have a Global Assembly Info File then copy the default one in the project and save it to the source (src) folder as GlobalAssemblyInfo.cs.

Add a link in your new project under Properties as shown below:

The contents of the GlobalAssemblyInfo.cs file is not project specific and should be updated to reflect the generic information for the Project.

The contents of the AssemblyInfo.cs file is project specific and should be updated to reflect at least the Module Name.

Project Name

Update the Project Name in the following locations:

• Visual Studio Solution Explorer
• Project Properties
• Assembly Info as described in the Assembly Info section

Web.config

Web.config comes from the Sitecore Vanilla Installation Package so don't overwrite that with the empty Web.config. To avoid this, update the Web.config not to be included when deploying.

In Properties of Web.config, update the Build Action to None.

Deployment settings

The Publish Profile is exactly the same for every Visual Studio Project and can be copied from any other existing project. The below instructions assume the Publish Profile being set up from scratch.

Create a new file at {Source Code Root Directory}\deploy\Local.publishsettings with the following contents. Replace the publishUrl with the correct local development URL which should be http://{Client Alias}.local.

Create a new publish profile called Local: Properties\PublishProfiles\Local.pubxml

 

Summary

The project has been setup and is now ready to use in a standard deployment process.

To publish the project use the Visual Studio publish feature. Do not overwrite the Web.config and have the dll version controlled from a central location.

When creating new views, create a Views folder and create a structure to keep the source files separated when deployed by creating a folder for the views for this module at: \Views\{Client Alias}\{Helix Layer}\{Module Name}

Separation of concerns techniques should be followed for the normal items like Controllers, ViewModels, Models, Services and anything else.

At Codehouse we're constantly exploring new Sitecore technologies that will improve the development process. We work on exciting design and build projects often on CMS like Sitecore.