Deploy tRPC on Northflank

This guide will show you how to get the tRPC + Next.js + TypeScript + Prisma starter app built and deployed on Northflank.

Before the tRPC app is set up, you will need to create a PostgreSQL database to store your data.

In a new project, click 'create new' at the top of the page and select addon. In the addon form, select PostgreSQL and give your database a sensible name.

Select 'Publicly accessible', choose your database resources based on your requirements, and click create.

In order for our tRPC deployment to be able to access our database, we need to create a secret group and link the required environment variables from our database. Our service will then inherit these variables automatically.

Open the 'create new' menu and select secret group. In the ‘linked addons’ section, select the PostgreSQL database you just created and link the following variables:

To deploy your tRPC app on Northflank, you will need to add a Dockerfile to your project. Below is a simple example of a Dockerfile that installs dependencies and builds the app in the first stage, and copies over the relevant output and runs the app in the second stage,

/Dockerfile

FROM node:16-alpine AS build
WORKDIR /app

ARG DATABASE_URL

COPY package.json package.json
COPY yarn.lock yarn.lock
COPY tsconfig.json tsconfig.json

COPY next.config.js next.config.js
COPY src ./src
COPY public ./public
COPY prisma ./prisma
RUN yarn install
RUN yarn build && yarn --production

FROM node:16-alpine
WORKDIR /app
COPY --from=build /app/node_modules ./node_modules
COPY --from=build /app/public ./public
COPY --from=build /app/.next ./.next
COPY --from=build /app/next.config.js ./next.config.js
COPY --from=build /app/src/server/env.js ./src/server/env.js

EXPOSE 3000
CMD ["node_modules/.bin/next", "start"]

With your Dockerfile commited, go back to the 'create new' menu and select service. Choose a combined service to both build and deploy your repository. Give your service a sensible name.

Next, in the repository section, select your tRPC repository and the branch that you want to build. Choose Dockerfile as the build type, and wait for your Dockerfile to be loaded.

Port 3000 will automatically be detected as a public HTTP port and added to your networking configuration.

Finally, select an appropriate resource plan and create your service.

A new build will be started automatically. Once complete, the build will be deployed and you will be able to visit the auto generated code.run domain visible in the header of the service dashboard to access the running tRPC service.

Northflank also provides a template to quickly create a repository and service for the demo tRPC app. Go to the 'create new' menu and select service. Click the link at the top of the form to create a service from a template, and select the tRPC template. This will create a copy of northflank-guides/deploy-trpc-on-northflank in your own VCS account. Select an appropriate resource plan, and create your service.

A new build will be started automatically. Once complete, the build will be deployed and you will be able to visit the auto generated code.run domain visible in the header of the service dashboard to access the running tRPC service.