An example T3 app containerized with Docker, Docker Compose, and deployed on Railway

Overview

Create T3 App

This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack.

What's next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with the most basic configuration and then move on to more advanced configuration.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.

Also checkout these awesome tutorials on create-t3-app.

Docker Project Configuration

You can containerize this stack and deploy it as a single container using Docker, or as a part of a group of containers using docker-compose. Please note that Next.js requires a different process for build time (available in the frontend, prefixed by NEXT_PUBLIC) and runtime environment, server-side only, variables. In this demo we are using two variables:

  • DATABASE_URL (used by the server)
  • NEXT_PUBLIC_CLIENTVAR (used by the client)

Pay attention to their positions in the Dockerfile, command-line arguments, and docker-compose.yml.

1. Next Configuration

In your next.config.mjs, add the standalone output-option configuration to reduce image size by automatically leveraging output traces:

// next.config.mjs

export default defineNextConfig({
  reactStrictMode: true,
  swcMinify: true,
+ output: "standalone",
});

2. Remove Env Import

Remove the env-import from next.config.mjs:

// next.config.mjs

- import { env } from "./src/env/server.mjs";

3. Create dockerignore file

Include the following contents in .dockerignore:

.env
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git

4. Create Dockerfile

Include the following contents in Dockerfile:

# Dockerfile

##### DEPENDENCIES

FROM --platform=linux/amd64 node:16-alpine AS deps
RUN apk add --no-cache libc6-compat openssl
WORKDIR /app

# Install Prisma Client - remove if not using Prisma
COPY prisma ./

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
  else echo "Lockfile not found." && exit 1; \
  fi

##### BUILDER

FROM --platform=linux/amd64 node:16-alpine AS builder
ARG DATABASE_URL
ARG NEXT_PUBLIC_CLIENTVAR
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

##### RUNNER

FROM --platform=linux/amd64 node:16-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/next.config.mjs ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
EXPOSE 3000
ENV PORT 3000

CMD ["node", "server.js"]

Notes

  • Emulation of --platform=linux/amd64 may not be necessary after moving to Node 18.
  • See node:alpine to understand why libc6-compat might be needed.
  • Next.js collects anonymous telemetry data about general usage. Uncomment the first instance of ENV NEXT_TELEMETRY_DISABLED 1 to disable telemetry during the build. Uncomment the second instance to disable telemetry during runtime.

Build and Run Image Locally

Build and run this image locally with the following commands:

docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar .
docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a-docker

Open localhost:3000 to see your running application.

Docker Compose

You can also use Docker Compose to build the image and run the container. Follow steps 1-4 above and create a docker-compose.yml file with the following:

# docker-compose.yml

version: "3.9"
services:
  app:
    platform: "linux/amd64"
    build:
      context: .
      dockerfile: Dockerfile
      args:
        NEXT_PUBLIC_CLIENTVAR: "clientvar"
    working_dir: /app
    ports:
      - "3000:3000"
    image: t3-app
    environment:
      - DATABASE_URL=database_url_goes_here

Run this using the docker compose up command:

docker compose up

Open localhost:3000 to see your running application.

Deploy to Railway

You can use a PaaS such as Railway's automated Dockerfile deployments to deploy your app. If you have the Railway CLI installed you can deploy your app with the following commands:

railway login
railway init
railway link
railway up
railway open

Go to "Variables" and include your DATABASE_URL. Then go to "Settings" and select "Generate Domain." To view a running example on Railway, visit ct3a-docker.up.railway.app.

Useful Resources

Resource Link
Dockerfile reference https://docs.docker.com/engine/reference/builder/
Compose file version 3 reference https://docs.docker.com/compose/compose-file/compose-file-v3/
Docker CLI reference https://docs.docker.com/engine/reference/commandline/docker/
Docker Compose CLI reference https://docs.docker.com/compose/reference/
Next.js Deployment with Docker Image https://nextjs.org/docs/deployment#docker-image
Next.js in Docker https://benmarte.com/blog/nextjs-in-docker/
Next.js with Docker Example https://github.com/vercel/next.js/tree/canary/examples/with-docker
Create Docker Image of a Next.js app https://blog.tericcabrel.com/create-docker-image-nextjs-application/
You might also like...

Whatsapp-web-clone MERN project deployed on vercel and heruku

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 17, 2022

My personal website built with Next.js, TypeScript, twin.macro, Framer Motion, MDX and deployed on Vercel.

chrvaskos.com My personal website / blog built with some of my favorite technologies where I can showcase my work and write articles about anything ne

Mar 25, 2022

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

MongoDB Starter โ€“ Developer Directory A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integrati

Dec 20, 2022

Student reviews for OMS courses. Built with NextJS and Typescript. Backed by Sanity CMS. Deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dec 3, 2022

First smart contract deployed on Rinkeby.

First smart contract deployed on Rinkeby.

Inbox-Contract First smart contract deployed on Rinkeby. It has a basic constructor which accpets a string and assigns the string to the message varia

Dec 26, 2021

This is a simple boilerplate for a Deno website, deployed with Deno Deploy.

Simple Deno Website Boilerplate This is a simple website boilerplate built using Deno and deployed using Deno Deploy. Demo at simple-deno-website-boil

Dec 3, 2022

Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tornado.Cash.

๐Ÿ•ต๏ธโ€โ™‚๏ธ TORN Detector Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tor

Dec 24, 2022

serverless plugin to setup custom domain for lambdas deployed with function url.

serverless-aws-function-url-custom-domain Automatically creates AWS CloudFront distribution and Route 53 records to AWS Lambda with Function URL (no a

Nov 27, 2022
Owner
Anthony Campolo
Web developer, writer, speaker, and advocate.
Anthony Campolo
A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose

Turborepo + Strapi + Next.js + Docker A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose. โš ๏ธ Prerequisit

Elvin Chu 60 Dec 29, 2022
Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose.

Atlan CLI Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose. What is A

Myastro 10 Aug 17, 2022
The app's backend is written in Python (Flask) and for search it uses Elasticsearch. I used this app as candidate application for learning out how to build, run and deploy a multi-container environment (docker-compose).

foodtrucks-app-docker-compose The app's backend is written in Python (Flask) and for search it uses Elasticsearch. I used this app as candidate applic

Selรงuk ลžan 3 Oct 24, 2022
Horizontal Scaler for https://railway.app

Horizontal Scaler for Railway Railway doesn't offer first-party support for horizontal scaling.Thus, I have built a workaround for now that allows sca

Wyzlle 12 Jan 1, 2023
A FARM stack app automated with docker-compose

Expense-Tracker An expense tracker built with FARM stack (FastAPI,React,MongoDB) Requirements Docker Docker-Compose Install and Run To install and run

Deepraj 4 Oct 10, 2022
An ultra-lightweight self-hosted CI solution with a dashboard and containerized runners

An extremely simple containerized CI server. Ecosystem The Candor ecosystem is straightforward, and entirely containerized. Docker runs on the host ma

Paul Huebner 8 Nov 20, 2022
let's build containerized crawlee - work repository for test.

Crawlee-ing on container project! NodeJS ๊ธฐ๋ฐ˜ ์ปจํ…Œ์ด๋„ˆ + Crawlee ์˜คํ”ˆ์†Œ์Šค ํ…Œ์ŠคํŠธ์šฉ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์ž…๋‹ˆ๋‹ค. Crawlee๋Š” ํฌ๋กค๋ง ๋ฐ ์Šคํฌ๋ž˜์ดํ•‘์„ ๋น ๋ฅด๊ฒŒ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ npm package์ž…๋‹ˆ๋‹ค. Features Docker-co

Present_Jay.Dev 6 Nov 2, 2022
Get-A-Room example application using Domain Driven Design and Clean Architecture. Written in TypeScript and deployed to AWS with a serverless stack.

Domain Driven Microservices on AWS in Practice This project provides a Domain Driven Design & Clean Architecture-informed, multi-service event-driven

Mikael Vesavuori 5 Dec 31, 2022
local docker-compose environment to deploy and configure backoffice

backoffice-local local docker-compose environment to deploy and configure backoffice How to install To install the repo dependencies yarn install be s

micro-lc 2 Dec 15, 2022
Example auto-generated OpenAPI client library and an accompanying example Angular app.

To utilize this demo Head into petstore_frontend\petes_pets Run npm install Go to frontend_client_lib\out Run npm install Head back into petstore_fron

Alan Gross 1 Jan 21, 2022