For the past two years I’ve been running a demo site, called the Paragon Coffeehouse. With the official release of Sitecore Experience Platform (XP) 9, I realized it was time for an upgrade. The Coffeehouse site was built on MVC but before Helix was the best practice for Sitecore site development, so I was hesitant to just upgrade my code references and run the upgrade package. So instead I thought about how I might as well take this opportunity to refresh the site with a new build. Given a mixture of needs as well as for curiosity sake, I’ve decided that this re-build would be done on Sitecore Experience Accelerator (SXA).
SXA was a highly talked about feature at the Sitecore Symposium 2016 as a new offering with the release of Sitecore 8.1. The biggest downside at the time I felt was the extreme additional cost in licensing for a customer, so I never heavily researched it as an alternative. The change to licensing structure with Sitecore XP 9 allows this module to be included by default allowing for it to be a true alternative for site builds.
The idea behind SXA is to provide a speed to market approach to a site build leveraging a collection of pre-built components and providing a way to extend and style (or theme) them as needed by the organization.
“SXA separates structure from design, so front-end designers, creative designers, content authors, and developers can work in parallel and you can deploy and maintain multiple sites quickly and cost effectively. Once a basic user experience plan is in place, everyone can get started on the platform. For example: the content author can start entering the content in the wireframe environment, while the front-end developer works on the theme, and the developer sets up the data templates.” (Introducing Sitecore Experience Platform, Getting Started with SXA, March 21, 2018)
Where to Start, how about installing…..
Before SXA can be installed you will need to install Sitecore PowerShell Extensions, you’ll see it listed as ‘Sitecore PowerShell Console’ when searching for the module from the Sitecore Marketplace. You will want the latest version available https://marketplace.sitecore.net/en/Modules/Sitecore_PowerShell_console.aspx
Once this has been installed via the package manager, download and install the SXA package from dev.sitecore.net. If you are installing in a more production ready scenario, where CM is separated from the CD, be sure to follow the additional configuration steps in the SXA 1.6 Installation Guide. Which boils down to coping some files manually to each CD server to support SXA.
Building the Site
Tenant vs Site
SXA is built around the idea of a single install that can support many URL scenarios, while providing a consistent editing experience, shared content resources, and shared/unique security. To allow for this type of separation and sharing SXA resolves around the ideas of tenants and sites.
Tenant is a collection of sites. All sites within a tenant can share assets (this include themes, data/content, page designs, partial designs, and composite renderings). Sharing across tenants is not possible.
“With SXA’s multitenant architecture, you can provide each tenant a dedicated share of the Sitecore instance including its data templates, configuration, user management, tenant individual functionality, and non-functional properties.”
Sites is a collection of pages that are referenced/visited by a unique URL. A site can have many URLs associated to it (i.e. ways to visit) but each URL can only point/references ONE site.
“Sites in the same tenant are related, for example, because they share the same set of templates or part of the media library. Sites are the items that represent the website and consist of pages, data, designs, and partial layouts.”
Creating the Coffeehouse IA
In planning my new and improved Coffeehouse site I’ve chosen to leverage the ‘tenant folder’ item to add additional structure to Sitecore which should allow me to expand my empire into other lines of business (such as brewery or maybe a hospital) without reworking my IA. This is as simple as right clicking on Content and selecting Insert -> Tenant Folder
Within my ‘Paragon Coffeehouse’ tenant folder, I can add further folder structure or begin creating tenant collections. I’ll create two tenants. The first will be called ‘The Coffeehouse’ which will house the main site that will eventually move into production, to support learning and experimentation I’ll also create a tenant called ‘Coffeehouse Experiment’.
As part of the tenant creation process, the name this item modal looks a bit different, from here you can choose the different features of SXA for any site housed as part of the tenant.
A tenant contains three sections of fields which unless for very specific business reasons should not be changed.
- Configuration section most importantly defines the location for ‘data’ templates, themes, and media library artifacts should be referenced from, in addition it allows for post create updating of the types of features that are accessible in the tenant
- Sharing allows children sites (siblings) to share content and media assets
- Security allows for the designation of a specific user domain users must belong to access, this shouldn’t be manipulated manually but instead via a context menu command ‘Setup Security’ see instructions on Sitecore Document site.
Once we have our tenant defined and created, we can begin adding sites. This is as easy as a right click Insert, as well.
Followed by a setup modal allowing additional configuration steps to be taken of your site, split over four tabs.
On the General tab you assign the Site name (#1) and most importantly the URL that will serve-up the content in ‘Host Name’ (#2). The next tab Features allows for the designation of specific SXA site level features that will be available for your site. Outside of a very specific micro-site scenario all these options should be left selected to maximize creative freedom (#3).
The next two tabs relate to the styling/design aspects of the site. The Theme tab provides the opportunity to set the default theme for the site from the existing themes (#2) as well as the creation of a new one (#1). The Grid tab allows you to select from one of the foundational CSS frameworks used by the site, the options available are Bootstrap, Foundation, and Grid960.
After creating the second test site our Content Tree looks like the following and supports two unique URLs without ever editing configuration files….
References for the deeper dive