uvacoder / scrapbook-domains

Scrapbook Domains

This repo/function handles the custom domain functionality for Hack Club’s Scrapbook, which was built as part of the 2020 Summer of Making.

To set up a custom domain, refer to the Scrapbook’s About page.

Why does this exist?

The profile pages run in the Next.js app, where they’re statically rendered for performance. We want people to point their own domains to the site, but you can’t CNAME to a specific path, so we need to serve the custom domain functionality at the root path. This would be doable with getServerSideProps in Next (checking the host header & serving the appropriate page), but it’d mean a performance hit & higher sever load for every hit to the website, which we want to avoid. This is a single serverless function to serve custom domains.

How does this work?

Behind the scenes, when you invoke the Slack slash command to add a custom domain, it hits an API Route on the website codebase. That function:

1. Sets the domain on your user record in Airtable
2. Uses the Vercel API to add a custom domain to this project

This project is a single serverless function with a rewrite at the root to it (api/index.js). When that site is accessed, we:

1. Get the host header of your request
2. Find the user by that domain in our Airtable database, accessed over api2
3. Fetch the HTML of the profile page from the live site
4. Serve that HTML directly

This means social cards, etc still work as expected, because while slower than accessing the main Scrapbook domain, the custom domain serves the profile as a regular HTML page, even though it doesn’t generate any of that HTML or JS in this project.

---

By @lachlanjc for Hack Club, 2020. MIT License.