Startup App Development
Platform Starter Kit Speed Run

Platform Starter Kit Speed Run

Matt Dyor's photo
Matt Dyor
·

4 min read

This Speed Run is based on Vercel's walkthrough for the Platform Starter Kit at https://vercel.com/guides/nextjs-multi-tenant-application

npx create-next-app --example https://github.com/vercel/platforms febak
cd febak
sudo npm i -g vercel@latest
# pnpm setup #??
# pnpm i -g vercel@latest # perhaps getting an error here - just run

Add Storage

You can either follow these 2 quickstarts:

Or follow these abbreviated Steps for :

  • run pnpm i @vercel/postgres and pnpm i @vercel/blob

  • Commit & push repo from VS code - choose the option to create a new Github repo based on the name of your project (e.g., for me it is "dyor/febak")

  • In Vercel.com dashboard, New Project & Import

  • Deploy - ignore any errors (you just need to get to the Project page)

  • Go to Project > Storage

    • Connect Store > Postres

    • Connect Store > Blob

  • Create your initial tables with npx prisma db push

Git Environment Variables into Local Repo

  • Now pull down env variables with:
vercel link
#select the right project
vercel env pull .env
  • When running on localhost, comment out the VERCEL="1" in your .env

Set Up OAuth Authentication with Github

  • You also need to add the following to .env - this is not documented in the Vercel walkthrough
NEXTAUTH_URL=http://app.localhost:3000/
?? NEXT_PUBLIC_ROOT_DOMAIN: This is the domain of your app (e.g. vercel.app, okta.com, hashnode.dev etc.)

Final Setup for localhost

  • Get your AUTH_BEARER_TOKEN from https://vercel.com/account/tokens and add it to .env

  • Grab your PROJECT_ID_VERCEL from the Project Settings page (in Vercel)

  • Grab your TEAM_ID_VERCEL from the Team Settings page (in Vercel) - only required if you are using a Vercel Team.

  • Add a NEXTAUTH_SECRET (you can use anything - but a good option is to use $ openssl rand -base64 32)

  • Add VERCEL_URL of *.febak.com

  • You can ignore the OPENAI_API_KEY for now.

Witness the Beauty Locally

Now npm run dev and visit app.localhost:3000/login - you should be able to login with Github, create new sites, and create posts.

  • In order to work with images, I needed to add an additional hostname to next.config.js :

  •       images: {
          remotePatterns: [
            { hostname: "*.public.blob.vercel-storage.com" },#<-- ADD THIS

Get Running In Production

  • In Vercel, bulk import the .env file from your local machine to Settings > Environment Variables > Import.

  • Manually add the following Environment Variables

    • Add VERCEL=1

    • Add NEXT_PUBLIC_ROOT_DOMAIN="febak.com" (or whatever your custom domain is)

    • Change the NEXTAUTH_URL to app.febak.com

    • Change the VERCEL_ENV to production

  • You need to deploy again to have these environment variables take effect.

  • If you are logging in and getting redirected back to the login page, check all of your domain values: NEXTAUTH_URL environment variable and Redirect URL in GitHub app. If you do not have them exactly correct (including the https) you will just have silent errors. If you update an environment variable, you have to redeploy in Vercel to get it applied.

Custom Domains

Add your custom domain https://vercel.com/docs/projects/domains/add-a-domain#wildcard-domains

This entails updating your domains DNS Nameservers to point to Vercel AND adding a wildcard domain.

One Final Nit

When I finally got it up and running, I was still getting the 500 error. When I looked at my Vercel logs, I was seeing a number of the following errors:

Page changed from static to dynamic at runtime /whatt.febak.com/clr2n0r5y0004nvtctvdlhgow, reason: headers see more here nextjs.org/docs/messages/app-static-to-dyna..

  • Checking out the page tells you that you cannot use headers() on a static page (it is a bit more confusingly stated than that - but that is the problem here).

  • Solution: I added this line to layout.tsx export const dynamic = 'force-dynamic'

Conclusion

The Platform Starter Kit is pretty powerful, but there are some rough edges that you need to figure out. I still think it is worth exploring, both because it is useful and you can see how a pretty sophisticated Next.js works.

As for me, I am going to see if I can use the Platform Starter Kit as the basis for a new web platform for solo attorneys - everything from blogs/content marketing to customer onboarding and expert collaboration.

If you are interested in discussing your implementation of Platform Starter Kit, or are getting stuck somewhere along the way, drop a comment and tell me how I can reach you.

Good luck!

ReactNext.jsnextauth.jsprismaPostgreSQLVercel