Build a polished, easy-to-find site around your Earth Engine App

By Michael DeWitt, Software Engineer, Google Earth Engine

In the months since we announced Earth Engine Apps, we’ve seen many impressive applications built by the community to bring their analyses out of the Code Editor and into the real world. Developers have told us, though, that they want a way to provide more context and explanation for their specific audience. We’ve got you covered — in this post, we’ll walk you through the process of integrating an Earth Engine App into a Google Sites webpage with a custom domain name. Less technically, you’ll learn to create sites like intertidal.app which combine Earth Engine Apps with other elements like text and static images. This process can take as little as 20 minutes, and it provides an easy way for you to create a polished, easy-to-find site that contextualizes your app for your audience.

In a site like intertidal.app, visitors can immediately interact with the dataset via the embedded Earth Engine app, but, when they’re ready, they can also read detailed information about the dataset, find the original publication, follow download links, view citation information, and more.

In this tutorial, we’ll assume that you already have a published EE App. If you don’t yet have one, check out our developer docs to get started, then revisit this page when you’re ready.

Here, we’ll walk through:

• acquiring a domain using Google Domains
• building a simple website using Google Sites
• embedding your EE App in that website
• and, finally, setting up your shiny new custom domain name for your App

If you already own a domain, or if you already have a site up and running, you can jump down to the “Embedding” section below.

Outside of actually curating content for the pages in your site, this process only requires a few minutes of hands-on work. Your shiny new site should be ready to go within 24 hours of completing the steps below!

Prerequisites

You’ll need to have an application that you’ve developed in the Earth Engine Code Editor and which has been published as an EE App. Here, we can use a simple dataset explorer app I’ve published at https://michael.users.earthengine.app/view/intertidal (your app will have a different URL, based on your Earth Engine username/app name you choose).

Acquire a domain from domains.google

For newly acquired domains, it’s a pretty straightforward process — visit https://domains.google and buy any domain that you like (maybe there’s a .xyz name which excites you?). Here, let’s say that you’ve settled on “intertidal.app”.

If you already own a domain, you can transfer it to Google Domains, which will make the instructions that follow easier. If you’d prefer to keep your current hosting solution, you can adapt the following configuration instructions for your provider.

Configure your new domain

Add a “Synthetic record” with the following properties:

• Forward ‘@’ to “www.intertidal.app" with the following options: Permanent redirect (301), Forward path, Enable SSL.
• Note: you’ll usually see an error about SSL certs not being generated. This may take up to 24 hours, so just hang tight. You can complete the rest of the tutorial in the meantime, but it may not work as you expect until the SSL cert is created. In practice, this rarely takes longer than a few minutes, but your mileage may vary.

Add a “Custom resource record” to point your domain at Google hosting services

• Forward “www” to ghs.googlehosted.com
• “www” subdomain
• CNAME record
• 5m timeout
• “ghs.googlehosted.com” as the target domain name

Build a Google Sites page

Initial setup

Start by navigating to http://sites.google.com/ and following these instructions to get started. Create a new site using whatever content you’d like to share to contextualize your EE App.

Embedding

When you’re ready, add an “Embed” widget to any page on your site. This will be the viewport which contains your application.

Adding your custom domain

Click the “three dot” menu at the top right of your Sites editing page, and select “Custom URL” from the dropdown. From there, enter the full URL for your custom domain, including the `www` prefix (ex: www.intertidal.app). Since this is already owned by you in Google Domains, you won’t need to do a verification step.

Publication

Publish your page, using the button at the top right. Be mindful that this step will actually publish the contents of your site on the internet.

Enjoy your site

Well, that was easy — we’re already done! Now, when you want to show off your Earth Engine App, you can send people to your shiny new site.