Skip to main content

Get Started - Productive (Vercel / Supabase)

Introduction​

This guide will walk you through setting up the necessary environment variables for deploying your project. Follow the steps below to ensure a smooth setup process.

Prerequisites​

Before you start, make sure you have the following installed:

  • Git: Version control system.
  • VSCode or any preferred code editor.

Steps to Setup​

1. Download and Extract Template​

  • Visit saasready.net and download the template.
  • Extract the downloaded template to your desired directory.

2. Prepare the .env File​

2.1 Via Setup​

  • Run the setup via setup.bat or npm run setup and choose (vercel), then enter all information needed.

2.2 Manual Setup​

  • Rename .env.sample to .env.vercel.
  • Open the .env.vercel file in your code editor and fill in the required data.

Environment Variables Configuration​

  • IS_PROD = 0
  • NEXTAUTH_URL = <YOUR_URL>
  • APP_URL = <YOUR_URL>
  • NEXTAUTH_SECRET = $(openssl rand -base64 32)

GitHub Oauth​

  • In Github go to Setting > Developer Settintgs > OAuth Apps
    • Application name: any
    • Homepage URL: vercel project URL
    • Authorization callback URL: https://[vercel-domain]/api/auth/callback/github
  • Create an OAuth App on GitHub and set the following:
    • GITHUB_ID
    • GITHUB_SECRET

Supabase​

  • Create a database on Supabase and set the following:
    • DATABASE_URL = <YOUR_SUPABASE_URL>
    • DIRECT_URL = <YOUR_SUPABASE_DIRECT_URL>

Mail Configuration​

  • MAILS_ENABLED = false

Stripe Setup​

  1. Create a Stripe account.
  2. (Make sure you are in testing mode) In the developer console, get the following:
    • NEXT_PUBLIC_PAYMENTS_PUBLISHABLE_KEY
    • PAYMENTS_SECRET_KEY
    • Create a webhook and set PAYMENTS_SIGNING_SECRET
  3. Create 2 products with these metadata:
    • type: 'BASIC'
    • type: 'PREMIUM'

Vercel Specific Variables (Only needed for workspace custom domains)​

  • NEXT_PUBLIC_VERCEL_IP_ADDRESS = 76.76.21.21
  • VERCEL_API_URL = https://api.vercel.com
  • VERCEL_PROJECT_ID = <YOUR_PROJECT_ID> (Get this from the Vercel project page)
  • VERCEL_AUTH_BEARER_TOKEN = <YOUR_AUTH_TOKEN> (Get this from Vercel personal account settings, tokens page)
  • VERCEL_TEAM_ID = <YOUR_TEAM_ID> (Get this from the Vercel team page if deploying from a team)

Additional Variables​

  • ADMIN_EMAIL = <YOUR_ADMIN_EMAIL>
  • NEXT_PUBLIC_SAAS_NAME = <YOUR_SAAS_NAME>

CLI Deployment​

1. Deploy​

You can run our npm run vercel-deploy, which will provide you with the correct setup for vercel deployment.

2. Import .env.vercel​

In order to correctly set the environment variables for the instance please copy the .env.vercel variables to the instance settings.

3. Redeploy​

Deploy the application again via cli or web interface.

Manual Deployment​

1. GitHub Setup​

  • Create a GitHub account if you don't have one.
  • Upload your project as a repository on GitHub.

2. Vercel Setup​

  • Create an account on Vercel.
  • Create a new project and connect it to your GitHub repository.
  • Adjust the environment variables in Vercel as outlined below:

3. Deployment​

Now you can deploy your project again via the deploy page on vercel and access it via the auto-assigned URL after a short while (make sure to use the Project URL not the Team URL)

Optional Features

E-Mail Sending​

E-Mail sending requires a SMTP-Server, if you have one available you can update the MAIL-.env variables accordingly.

Custom Domain​

You can give your application a custom domain, to do this you have to buy a domain and then add the domain in Vercel and verify it as described. After that please make sure to adjust the following values according to your new domain:

  • NEXTAUTH_URL
  • APP_URL
  • Github OAuth Callback URL
  • Stripe Webhook URL

Subdomains / Workspace Domains​

In the template we included a feature to access the users workspace via a custom domain, defined by the workspace slug - to make this work make sure to include a wildcard-configuration for the project to your domain in Vercel like: *.yourdomain.com then you have to validate this setting, please check out this documentation for Vercel wildcard setups:

Error Management​

If you encounter errors during deploy, please consult the logs in Vercel, check the error message and retry the previous steps.

Conclusion​

By following the steps outlined in this guide, you should be able to set up your .env file and deploy your project successfully. If you encounter any issues, refer to the respective documentation for GitHub, Vercel, Supabase, and Stripe, or seek help from their support communities.