Create Your Own

Requirements

In order to create your own template, you’ll need to:

• Make your BaseHub repository “public”.
  Go to the repository settings (bottom left), and make it public.

• Make your GitHub repository “public”.
  We assume you already know how to do that in GitHub.

• Optionally, edit your BaseHub repo’s “public info”, also found in the repo settings (bottom left).

Enabling playgrounds (example with v0)

Every public repo can be a playground. A playground is an environment in which non-authenticated visitors can play around with the contents of a repo, without altering the origin repo. Playgrounds expire in 5 days after being first initialized. Visitors will have a chance to claim them before that happens.

Environments like v0 are the perfect use case for this. Take our Blog Template, for instance.

To set this up, we do the following. In basehub.config.ts (this file could be named differently, it doesn’t matter), we call setGlobalConfig with fallbackPlayground.

import { setGlobalConfig } from "basehub"

const _vercel_url_env = "VERCEL_URL"
let v0Id = process.env[_vercel_url_env]
if (v0Id && v0Id.includes("vusercontent")) {
  v0Id = v0Id.split(".")[0]
}

const playgroundId = `${
  v0Id ? encodeURIComponent(v0Id) : "__dev"
}__rel_v0`

setGlobalConfig({
  fallbackPlayground: playgroundId
    ? { target: "basehub/nextjs-blog", id: playgroundId }
    : undefined,
})

The “fallbackPlayground” part is the critical part here (everything else is part of the v0 example itself): it tells our API, “if you don’t find a token in the request headers (cause the request is unauthenticated), fallback to a playground with this id”.

Then, you can render the “Open in playground” link to visitors by querying the playground info:

const playgroundData = await basehub().query({
  _sys: {
    playgroundInfo: {
      expiresAt: true,
      editUrl: true,
      claimUrl: true,
    },
  },
})

if (playgroundData._sys.playgroundInfo) {
  playgroundNotification = (
    <a href={playgroundInfo.editUrl} target="_blank">
      Open Playground
    </a>
  )
}

And, that’s really it.

Bonus: “Rel” attribute

If you’re planning to put this in v0, you’ll want to suffix your playground IDs with __rel_v0, as we’ll pick that “rel” up and after visitors claim the repository, we’ll show a nice “Coming from v0?” callout to streamline onboarding.