Application Deployment
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).
Vercel
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 https://vercel.com/signup (opens in a new tab). You can choose Hobby or Pro and name the project whatever you need.
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.
Import A Project
To import a project, click the Add New... → Project. This will bring you to importing a project from GitHub.
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.
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 Settings → Domains. For example, the project domain name is bistro-reservation.vercel.app.
ROQ Console Environments
You need to set this base URL bistro-reservation.vercel.app of the project in ROQ Console but first, you need to create another environment in ROQ Console for better project management. Go to the Application Details → Environments and then click the Create Environment button.
When the new environment is already created, now we can set the environment variables based on the Vercel project URL:
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 .env.prod file in our locally generated project repository.
# .env.prod (don't include this file in the repository)
# Public variables, used on client - Delete these if you are not using Next.js
NEXT_PUBLIC_ROQ_CLIENT_ID=a91ffda3-8196-4662-af85-bffcfe1da5a1
NEXT_PUBLIC_ROQ_PLATFORM_URL=https://qa02.roq-platform.com
# If you change the host or port on your local installation from https://bistro-reservation.vercel.app to another value,
# then you need to update the settings in the console as well. ROQ Console: https://console.roq.tech/
# Modify this to your application URL
NEXT_PUBLIC_BASE_URL=https://bistro-reservation.vercel.app
# Server variables used for ROQ connection
ROQ_BASE_URL=https://bistro-reservation.vercel.app
ROQ_PLATFORM_URL=https://qa02.roq-platform.com
ROQ_ENVIRONMENT_ID=a91ffda3-8196-4662-af85-bffcfe1da5a1
ROQ_API_KEY=46bf49d7-2f45-4d44-b63f-c4d35b75d99c
# Server variables for ROQ auth
ROQ_SECRET=CHANGE_THIS_SECRET
ROQ_CLIENT_ID=a91ffda3-8196-4662-af85-bffcfe1da5a1
ROQ_CLIENT_SECRET=46bf49d7-2f45-4d44-b63f-c4d35b75d99c
ROQ_AUTH_CALLBACK_URL=http://bistro-reservation.vercel.app/api/auth/callback
ROQ_AUTH_LOGIN_URL=http://bistro-reservation.vercel.app/api/auth/login
ROQ_AUTH_LOGOUT_URL=http://bistro-reservation.vercel.app/api/auth/logout
ROQ_AUTH_URL=https://a0gc78eutckss9dw2l63z75b5.auth.qa02.roq-platform.comVercel Environments
The next step is to import .env.local into our Vercel project. Go to Settings → Environment Variables.
and then click the Import button
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.
To create a Postgres database click the Create button then follow along, give the database name, any name, for example, bristodb then click Create.
Vercel will populate PostgreSQL credentials and some integrations. What we should pay attention to is the Prisma integration.
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.
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:
//prisma\schema.prisma
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL") // uses connection pooling
directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
shadowDatabaseUrl = env("POSTGRES_URL_NON_POOLING") // used for migrations
}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.
Installation Test
To test the installation, open the browser and go to the project URL.
