Developer Center Project With Layers

Layers allow developers to create a variety of experiences for a single site, so the same codebase can be adjusted in a modular way without repeating a lot of code.

This tutorial will help you understand how Layers work, and what you can use them for. We will be using a demo version of the Moovweb blog as a source, and transform it to display different experiences depending on which Layer is being shown.

Prerequisites: Building a Site tutorials

Requirements: Moovweb SDK version 5 or later is required. Moovweb versions earlier than Moovweb 5 do not support the Layers feature for code inheritance.

Duration: 45 minutes

Outline


Introduction

In order to create a project with Layers, you begin by launching the Developer Dashboard and generating a new project using subdomains.

Then, you’ll edit the config.json file in your project to define the Layers you want to be able to define.

Based on the Layer names you specified in the config.json, you will use the new @optional function in your Tritium to import custom Tritium for your new Layers.

In the Developer Dashboard you will select and preview your Layers with their changes.

Generate a basic Developer Dashboard project

If you want to follow along, Windows users should right-click the Moovweb SDK icon and run it as an administrator, and Mac and Linux users should open a terminal and type sudo moov start on the command line. In either case, you may need to enter administrator credentials.

When the Developer Dashboard opens locally in your favorite browser, click the button to generate a new project with subdomains, using the Moovweb blog domain as your starting domain (blog.moovdemos.com) and the “Generate Recommended” button to start the download.

When your project appears on the Developer Dashboard screen, click the play button to start the server, then click the project name to bring up a new browser tab displaying your locally running project.

Add Layers to config.json

By default, you won’t see anything in the “Layers” column of your project. That’s because you haven’t defined any Layers yet. So let’s define some.

Open up the config.json file, and add a comma after the line where the host domain is specified, then add a new entry for two new Layers: “beta” and “promo”. (The names are arbitrary, but it’s a good idea to use names that will remind you what each Layer is for.)

"host_map": [
  "$.blog.moovdemos.com => blog.moovdemos.com"
],
"layers": ["beta", "promo"]

When you refresh the Developer Dashboard, you should see a pulldown menu in the Layers column where you can select your new Layers, or the default Layer. When no Layer is selected, the Moovweb Server will show your default Layer, which is available even if you don’t specify it in the config.json.

Select the beta Layer, and you should see your server stop and start. When you refresh your view, you will see the beta Layer displayed.

Of course, at this point it looks just like the default Layer. That’s because we haven’t specified any differences for each of the new Layers. So let’s define some.

Create Layer-specific Tritium

We’ve defined two Layers, beta and promo, in addition to the default Layer. Let’s add a banner at the top of the main <div> to help us identify the Layers.

Create a file called html_beta.ts, and add the following Tritium:

$$("#main") {
  insert_top("h2", "This is the beta Layer")
}

Next, create a file called html_promo.ts, and add the following Tritium:

$$("#main") {
  insert_top("h2", "This is the promo Layer")
}

These scripts will add a header to the page that just tells us what Layer we are on. Of course, there are infinite other things we could change with Tritium.

But if you refresh, you still won’t see anything different. How do we get Moovweb to serve the appropriate Tritium for each Layer?

Create optional imports for the Layer-specific Tritium

In your project’s html.ts file, toward the end, add a line that will optionally import any Layer-specific Tritium files if they are present.

@optional "html_@.ts"

There are two important things to notice about this command, and they both involve the “@” sign.

The first is the @optional function in Tritium. This command will import a specified file if it is present, but unlike the similar @import function, it won’t break the build if the file is not present.

The second is the file html_@.ts. In this case, the “@” sign will be dynamically replaced by whatever Layer you happen to have selected. So on the beta Layer, it will look for a file named html_beta.ts. On the promo Layer, it will look for html_promo.ts.

By putting Tritium that is specific to each Layer in the appropriate file, you can customize your presentation on a Layer-by-Layer basis.

Select a Layer to view in the Developer Dashboard

When you refresh your browser window where you were displaying the beta Layer, you should see the changes you made in the html_beta.ts reflected.

Now return to the Developer Dashboard tab and select the promo Layer. The Moovweb Server should stop and start. When you refresh the tab where you are viewing your local server, you should now see the changes for the promo Layer reflected.

The next step would be to deploy each Layer to a different Control Center project, or a different Mode of a single Control Center project. Then you would configure your server to send different users to different experiences.

Summary

A lot has been covered in this tutorial: