Deploy to Netlify
Netlify ↗ (opens in a new tab) is a cloud-based platform and service that offers web hosting, serverless computing, and automation tools for web developers. It is designed to simplify the process of deploying and managing web applications and websites.
In this quick start guide, we demonstrate just how effortless it is to host the platform on Netlify ↗ (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.
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-forms-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)
By clicking on the button below, 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
To receive updates from the main repository, you will need to manually fork (opens in a new tab) the project to your GitHub account and import it manually into your Netlify 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.
Import to Netlify
- Log in to Netlify ↗ (opens in a new tab).
- Click the
Add new site
dropdown button, then selectImport an existing project
from the menu. - Click the
Deploy with Github
button. - Connect your GitHub account and choose the forked platform repository.
- Follow the on-screen instructions to set up the necessary Environment Variables and click "Deploy"
"Base directory": "/"
"Site to deploy": "apps/feature-flags"
"Build command": "yarn deploy:feature-flags"
"Publish directory": "apps/forms/.next"
- Your deploy will be automatically built. Each git push will trigger a new deployment.
Environment Variables
To ensure a successful deployment on Netlify, 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 | Value |
---|---|---|
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 | |
NODE_VERSION | Node version to use for the build process. | 18.12.0 |
SKIP_INSTALL_DEPS | Disables npm install to use yarn | true |
For the NEXTAUTH_SECRET
variable you can use openssl rand -base64 32
or
generate a random value (opens in a new tab).
What'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, Netlify 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 Netlify and initiate a new deployment on Netlify once again.
Environment Variables:
NEXTAUTH_URL
Github OAuth App (opens in a new tab) Fields:
Homepage URL
Authorization callback URL