What is the mappings.ts file and how should it be set up in Tritium?

Question

I'm using the Moovweb SDK and using Tritium. I want my mobile site to behave like my desktop site. I have different URLs pointing to my homepage. Should I use regex? A common element? And what's the best syntax for matching the path?

Answer 1

The mappings.ts file in the scripts directory is where particular pages are matched. The file is imported in html.ts and allows us to say "when a certain page is matched, make the following transformations."

Most projects already have a mappings file generated. A simple layout will be as so:

match($path) {
  with(/home/) {
    log("--> Importing pages/homes.ts in mappings.ts")
    @import pages/home.ts
  }
}

Every time you start working on a new page, you need to set up a new "map".

First: Match with a unique path

The Tritium above matches the path for the homepage. The path is the bit of a URL after the domain. For example, in www.example.com/search/item, "www.example.com" is the domain and "search/item" is the path.

The < >/home/< > is specifying the "home" part with regular expressions. You could also use a plain string if necessary:

with("home") If Tritium matches the path with the matcher, it will import the home page.

It's probably true that the homepage of a site doesn't actually contain the word home. Most homepages are the URL without any matcher. A better string matcher could be:

match($path) {
  with ("/")
}

Or, using regex:

with(/index|^\/$/) {

As you can see, the < >with()< > function of the mappings file is where knowledge of Regex can really come in handy. Check out our short guide on regex. Sometimes it will be simpler, such as < >(/search/)< >.

Remember to come up with the most unique aspect of the URL possible. If two < >with()< > functions match the same URL, then the one that appears first in the mappings file will be used. If you cannot find a unique URL matcher for different page types, you may have to match via other means.

Why Use Regex?

It might seem easier to use a string rather than a regex matcher. However, regex provides a lot more flexibility over which URLs are matched.

For example, a site could use a string of numbers in its product page URLs. Using a normal string matcher would not be practical - you'd have to list out all the numbers possible for all the items on the site. An easier way would be to use regex to say, "If there's a string of 5 digits, continue!" (The code for matching 5 digits: < >/\\d{5}/< >.)

Second: Log the match

When matching a particular path, you should also use < >log()< > statements so you know exactly what's getting imported. The log statement will be printed in the command line window, so you can see if your regular expression accurately matches your path.

match($path) {
  with(/index|^\/$/) {
    log("--> importing pages/home.ts in mappings.ts")
  }
}

Third: Import the file

Finally, use the < >@import< > function to include the page-specific tritium file.

match($path) {
  with(/index|^\/$/) {
    log("--> importing pages/home.ts in mappings.ts")
    @import pages/home.ts
  }
}