Development Guides
Generated Applications
Application Deployment Vercel

Application Deployment on Vercel

There are so many application hosting services. The generated application is Node.js and Next.js based, so as long as the hosting service support that then it will be ok.

For this documentation, we will use Vercel (opens in a new tab).


There are a few steps that should be done before deploying our generated application into Vercel.

Create Vercel Account

Creating a Vercel account is a straightforward process. Go to (opens in a new tab). You can choose Hobby or Pro and name the project whatever you need.

vercel reg page

Vercel will try to connect the new account with git providers or you can use the email instead. You can use any git provider, such as GitHub, GitLab, or Bitbucket and for this documentation, we will use GitHub.

Vercel git providers

Import A Project

To import a project, click the Add New...Project. This will bring you to importing a project from GitHub.

vercel importing project

To configure ROQ's generated application in your own GitHub repository, please look into this documentation.

Deployment Kickstart

For instance, choose bistro-app into our Vercel project and import it into Vercel.

Vercel first deployment

You need to deploy the project first to get into the Vercel project settings. We will set up the environment settings later.


The deployment will be an error because we haven't set the environment settings yet. After this initial build, we will get the project domain name from Vercel which we will need later for the project environment settings.

Setup Environment Variables

To get the project domain name go to the Vercel project SettingsDomains. For example, the project domain name is

Vercel settings

ROQ Console Environments

You need to set this base URL of the project in ROQ Console but first, you need to create another environment in ROQ Console for better project management.

Select the desired application from the ROQ Console and add a new environment, or navigate to the ROQ Console Environment (opens in a new tab) for the active application.

Create new env roq console

When the new environment is already created, now we can set the environment variables based on the Vercel project URL:

Vercel base URL ROQ environment settings

Make sure you change all base URL settings on ROQ Console, save it, and then click the Copy Env File button for the Extended environment variables for ROQ's authentication feature.

Copy all the environment variables and save them somewhere or save them into file in our locally generated project repository.

# (don't include this file in the repository)
# Public variables, used on client - Delete these if you are not using Next.js

# If you change the host or port on your local installation from to another value,
# then you need to update the settings in the console as well. ROQ Console:
# Modify this to your application URL

# Server variables used for ROQ connection

# Server variables for ROQ auth

Vercel Environments

The next step is to import .env.local into our Vercel project. Go to SettingsEnvironment Variables.

vercel import settings

and then click the Import button

vercel import envs

At this stage, the project can be redeployed manually from the Vercel Deployment tab. The build process will be successful; however, please note that creating an account is currently not possible as the database has not been set up yet.

Setup PostgreSQL

We will use the PostgreSQL database. This database is supported by Vercel and it's quite easy to set up.

Create vercel database

To create a Postgres database click the Create button then follow along, give the database name, any name, for example, bristodb then click Create.

Create postgres database

Vercel will populate PostgreSQL credentials and some integrations. What we should pay attention to is the Prisma integration.

vercel postgres prisma

We need to put the Vercel's PostgreSQL Prisma integration code into our generated application's Prisma Schema later but before that, we need to connect the PostgreSQL into our Vercel project.

connect postgres into vercel project

Connecting PostgreSQL and our project is needed so we don't need to populate environment variables manually on Vercel (except for the local development).


Currently, the Prisma schema in the generated application needs the uuid_generate_v4() function. In PostgreSQL, this function is in the uuid-ossp extension so you need to enable it. Please look into this documentation and make sure to connect to the PostgreSQL on Vercel.

Local Project Changes

To set up the repository, and set up and run the locally development, please look into these documentations: Application Development and Run Local Development.

In the local generated application project, edit the Prisma schema datasource db into:

datasource db {
  provider = "postgresql"
  url = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection

and change the postinstall script on package.json file into:

"postinstall": "prisma generate && prisma migrate deploy"

The postinstall will try to generate SQL and apply any changes to PostgreSQL. Commit the changes and push them to GitHub and Vercel will automatically pick up the changes and build the project.

vercel project ok

Installation Test

To test the installation, open the browser and go to the project URL.

project URL