Deploy to Vercel
Vercel ↗ (opens in a new tab) is the company behind the Next.js framework, which is used by Basestack. Vercel Pricing ↗ (opens in a new tab) also offers a free hosting service perfectly suited for Next.js applications. Continue with the steps below to get started deploying the platform to your account.
In this quick start guide, we demonstrate just how effortless it is to host the platform on Vercel ↗ (opens in a new tab), complemented by a Database hosted at Neon ↗ (opens in a new tab). Best of all, both services offer perfect free plans, allowing you to explore the platform and scale up as you progress.
To receive updates from the main repository, you will need to manually fork the project to your GitHub account and import it manually into your Vercel account dashboard. The rest of the process remains the same in terms of configuration, such as Environment Variables and Project Settings. For more details, refer to the Getting Updates Page.
Getting started
To begin, create a database.
Ensure that you have an operational PostgreSQL database server capable of accepting remote connections.
Any traditional instance of PostgreSQL with connection pooling, such as PgBouncer ↗ (opens in a new tab), will work effectively.
If you do not already have a database, consider selecting one from the recommended list below:
-
During the deployment step, you will be prompted to provide two environment variables for the database. The first is
DATABASE_URL, which is the Connection URL to your database using PgBouncer. The second isDIRECT_DATABASE_URL, which serves as the direct connection URL to the database, used for migrations.
Next, set up authentication.
To simplify this guide, we will use Github ↗ (opens in a new tab) as the authentication provider, allowing you to create an account and log in to the Platform. Additionally, this setup will allow other members of your organization to log in as well.
Create a new OAuth App (opens in a new tab) by filling out the form with the following settings:
If you don't have a Project URL yet, you can leave it blank for now. Check out the Troubleshooting section for further assistance.
"Application name": "Forms by Basestack" // or any name you prefer like
"Homepage URL": "https://your-basestack-instance.com"
"Authorization callback URL": "https://your-basestack-instance.com/api/auth/callback/github"Once you've successfully created a new OAuth App (opens in a new tab), it will generate two important keys: GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET. Be sure to save these keys for later use during the deployment step, as they will be needed as environment variables.
For more granular control over authentication aspects, including rules, enabling or disabling account creation, and allowing account creation with credentials (email and password), we recommend using Auth0.
Finally, proceed with the deployment.
Option 1: Quick Deploy (Skip this if you want to receive updates)
Quick deploy to Vercel ↗ (opens in a new tab) with a simple click on the deploy button below:
By clicking on the button above, a new repository will be created in your GitHub account from the Basestack Platform (opens in a new tab) repository, and the platform will be deployed for you. This will be an independent copy with no connection to the main project.
Option 2: Fork the Platform
Alternatively, you have the option to manually fork the Basestack Platform repository (opens in a new tab). This provides greater control over updates and even allows you to contribute to the project if desired.
Environment Variables
To ensure a successful deployment on Vercel, the platform requires a minimum set of environment variables. Below is the list of environment variables that you must fill in. For the complete list of Environment Variables, please refer to the Configuration Page.
| Property | Description |
|---|---|
DATABASE_URL | Connection URL to your database using PgBouncer. |
DIRECT_DATABASE_URL | Direct connection URL to the database used for migrations |
NEXTAUTH_SECRET | Used to encrypt the NextAuth.js JWT, and to hash email verification tokens. |
NEXTAUTH_URL | Set to the canonical URL of your site |
GITHUB_CLIENT_ID | Client Id generated in the OAuth App (opens in a new tab) creation |
GITHUB_CLIENT_SECRET | Client Secret generated in the OAuth App (opens in a new tab) creation |
For the NEXTAUTH_SECRET variable you can use openssl rand -base64 32 or
generate a random value (opens in a new tab).
Vercel Project Settings
In your new Project Settings on Vercel, navigate to the Build & Development Settings section and complete the form with the following settings:
"Build Command": "yarn deploy:feature-flags"
"Output Directory": "apps/feature-flags/.next"
"Install Command": "yarn install"
"Development Command": "next"
"Root Directory": " " # just leave it emptyWhat's next?
Begin by familiarizing yourself with the platform.
Create projects, add new feature flags, invite members, and implement the feature flags in your product using our official SDKs.
Lastly, stay tuned about updates, including new features and bug fixes. To ensure your platform is always up-to-date with the latest improvements, refer to our guide on updating the platform by visiting the Updates Page.
For more comprehensive information about the deployment process, please check out the Configuration Page. This page provides detailed guidance to ensure a successful and seamless deployment of the Forms Platform.
Troubleshooting
How to Retrieve the Project URL for NEXTAUTH_URL and Github OAuth App?
If you don't have a domain yet, feel free to leave the fields below empty or use dummy information. Proceed with the deployment as usual. Once the deployment is complete, Vercel will generate a URL for your project.
Copy this URL and update the information in your OAuth App (opens in a new tab). Next, modify the environment variables in the project settings on Vercel and initiate a new deployment on Vercel once again.
Environment Variables:
NEXTAUTH_URL
Github OAuth App (opens in a new tab) Fields:
Homepage URLAuthorization callback URL