Alloy MVC on Optimizely CMS 13

This Alloy project has been upgraded from CMS 12 to CMS 13 (Preview).

How to run

Prerequisites

• .NET SDK 10
• SQL Server 2016 Express LocalDB (or later)
• Optimizely Graph

Copy the appSettings.development.json.template file to appSettings.development.json and update the Graph settings. You need an Optimizely Graph instance to run this project.

Unzip the /data/App_Data.zip into /App_Data/. You should have these three files and folders:

.\App_Data\alloy13preview.mdf
.\App_Data\alloy13preview_log.ldf
.\App_Data\blobs

Run the project from the command line or your IDE.

dotnet run

If the project runs successfully, you should see the Alloy homepage.

Stop the site.

Add a new admin user so you can log in to the CMS.

If you do not have the EPiServer.Net.Cli tool installed, install it from the command line:

dotnet tool install EPiServer.Net.Cli --global --add-source https://nuget.optimizely.com/feed/packages.svc/

Run the following command from the root of your project:

dotnet-episerver add-admin-user -u [username] -p [password] -e [email] -c EPiServerDB ./alloy13preview.csproj

Visual Builder

The project has a simple Visual Builder page that renders the structure of an experience using sections, rows and columns.

@model StandardExperienceData

@{
    Layout = "";
}
<style>
    .experience {
        padding: 1rem;
        border: 2px solid #333;
        background: #f5f5f5;
    }

    .section {
        padding: 1rem;
        border: 2px solid #666;
        background: #fff;
    }

    .row {
        display: flex;
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid #999;
        background: #e8e8e8;
    }

    .row:last-child {
        margin-bottom: 0;
    }

    .column {
        flex: 1;
        padding: 1rem;
        margin-right: 1rem;
        border: 1px solid #bbb;
        background: #fff;
    }

    .column:last-child {
        margin-right: 0;
    }

    .component {
        padding: 1rem;
        border: 1px solid #ddd;
        background: #fafafa;
    }
</style>

@if (Model != null)
{
    <h1>What an experience</h1>
    
    <epi-outline class="experience" experience="@Model">
        <epi-grid class="section">
            <epi-row class="row">
                <epi-column class="column">
                    <epi-component class="component" />
                </epi-column>
            </epi-row>
        </epi-grid>
        <epi-component/>
    </epi-outline>
}
else
{
    <p>No content available</p>
}