-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
1,850 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,213 @@ | ||
--- | ||
title: Docker | ||
description: Deployment with Docker | ||
layout: ../../../layouts/docs.astro | ||
lang: en | ||
--- | ||
|
||
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. See [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) for an example repo based on this doc. | ||
|
||
## Docker Project Configuration | ||
|
||
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, pay attention to their positions in the `Dockerfile`, command-line arguments, and `docker-compose.yml`: | ||
|
||
- `DATABASE_URL` (used by the server) | ||
- `NEXT_PUBLIC_CLIENTVAR` (used by the client) | ||
|
||
### 1. Next Configuration | ||
|
||
In your [`next.config.mjs`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.mjs), add the `standalone` output-option configuration to [reduce image size by automatically leveraging output traces](https://nextjs.org/docs/advanced-features/output-file-tracing): | ||
|
||
```diff | ||
export default defineNextConfig({ | ||
reactStrictMode: true, | ||
swcMinify: true, | ||
+ output: "standalone", | ||
}); | ||
``` | ||
|
||
### 2. Create dockerignore file | ||
|
||
<details> | ||
<summary> | ||
Click here and include contents in <code>.dockerignore</code>: | ||
</summary> | ||
<div class="content"> | ||
|
||
``` | ||
.env | ||
Dockerfile | ||
.dockerignore | ||
node_modules | ||
npm-debug.log | ||
README.md | ||
.next | ||
.git | ||
``` | ||
|
||
</div> | ||
|
||
</details> | ||
|
||
### 3. Create Dockerfile | ||
|
||
> Since we're not pulling the server environment variables into our container, the [environment schema validation](/en/usage/env-variables) will fail. To prevent this, we have to add a `SKIP_ENV_VALIDATION=1` flag to the build command so that the env-schemas aren't validated at build time. | ||
<details> | ||
<summary> | ||
Click here and include contents in <code>Dockerfile</code>: | ||
</summary> | ||
<div class="content"> | ||
|
||
```docker | ||
##### 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 SKIP_ENV_VALIDATION=1 yarn build; \ | ||
elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \ | ||
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && SKIP_ENV_VALIDATION=1 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`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) to understand why `libc6-compat` might be needed._ | ||
> - _Next.js collects [anonymous telemetry data about general usage](https://nextjs.org/telemetry). 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._ | ||
</div> | ||
</details> | ||
|
||
## Build and Run Image Locally | ||
|
||
Build and run this image locally with the following commands: | ||
|
||
```bash | ||
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](http://localhost:3000/) to see your running application. | ||
|
||
## Docker Compose | ||
|
||
You can also use Docker Compose to build the image and run the container. | ||
|
||
<details> | ||
<summary> | ||
Follow steps 1-4 above, click here, and include contents in <code>docker-compose.yml</code>: | ||
</summary> | ||
<div class="content"> | ||
|
||
```yaml | ||
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: | ||
|
||
```bash | ||
docker compose up | ||
``` | ||
|
||
Open [localhost:3000](http://localhost:3000/) to see your running application. | ||
|
||
</div> | ||
</details> | ||
|
||
## Deploy to Railway | ||
|
||
You can use a PaaS such as [Railway's](https://railway.app) automated [Dockerfile deployments](https://docs.railway.app/deploy/dockerfiles) to deploy your app. If you have the [Railway CLI installed](https://docs.railway.app/develop/cli#install) you can deploy your app with the following commands: | ||
|
||
```bash | ||
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](https://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/ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
--- | ||
title: Vercel | ||
description: Deploying to Vercel | ||
layout: ../../../layouts/docs.astro | ||
lang: en | ||
--- | ||
|
||
We recommend deploying your app to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). It makes it super easy to deploy Next.js apps. | ||
|
||
## Project Configuration | ||
|
||
Vercel will likely configure your build command and publish the directory automatically. However, you can also specify this information along with other configurations by creating a file called [`vercel.json`](https://vercel.com/docs/project-configuration) and including the following commands: | ||
|
||
```json | ||
{ | ||
"buildCommand": "npm run build", | ||
"outputDirectory": "dist", | ||
"devCommand": "npm run dev", | ||
"installCommand": "npm install" | ||
} | ||
``` | ||
|
||
## Using the Vercel Dashboard | ||
|
||
1. After pushing your code to a GitHub repository, sign up for [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) with GitHub and click on **Add New Project**. | ||
|
||
 | ||
|
||
2. Import the GitHub repository with your project. | ||
|
||
 | ||
|
||
3. Add your environment variables. | ||
|
||
 | ||
|
||
4. Click **Deploy**. Now whenever you push a change to your repository, Vercel will automatically redeploy your app! | ||
|
||
## Using the Vercel CLI | ||
|
||
To deploy from the command line you must first [install the Vercel CLI globally](https://vercel.com/docs/cli#installing-vercel-cli). | ||
|
||
```bash | ||
npm i -g vercel | ||
``` | ||
|
||
Run the [`vercel`](https://vercel.com/docs/cli/deploying-from-cli) command to deploy your project. | ||
|
||
```bash | ||
vercel | ||
``` | ||
|
||
Include `--env DATABASE_URL=YOUR_DATABASE_URL_HERE` for environment variables like the database connection string. Use `--yes` if you want to skip the deployment questions and give the default answer for each. | ||
|
||
```bash | ||
vercel --env DATABASE_URL=YOUR_DATABASE_URL_HERE --yes | ||
``` | ||
|
||
After the first deployment this command will deploy to a preview branch. You will need to include `--prod` to push changes directly to the live site for future deployments. | ||
|
||
```bash | ||
vercel --prod | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
--- | ||
title: FAQ | ||
description: Frequently asked questions about Create T3 App | ||
layout: ../../layouts/docs.astro | ||
lang: en | ||
--- | ||
|
||
Here are some commonly asked questions about `create-t3-app`. | ||
|
||
## 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 just the scaffolding we set up for you, and add additional things later when they become necessary. | ||
|
||
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](https://t3.gg/discord) and ask for help. | ||
|
||
- [Next.js](https://nextjs.org/) | ||
- [NextAuth.js](https://next-auth.js.org) | ||
- [Prisma](https://prisma.io) | ||
- [Tailwind CSS](https://tailwindcss.com) | ||
- [tRPC](https://trpc.io) | ||
|
||
## What learning resources are currently available? | ||
|
||
Although the resources listed below are some of the best that exist for the T3 Stack, the community (and [Theo](https://youtu.be/rzwaaWH0ksk?t=1436)) recommend that you just start using the stack and learn along the way by building with it. | ||
|
||
If you are considering `create-t3-app`, chances are you might have already used some of the parts of the stack. So why not just dive in head first and learn the other parts while you build something? | ||
|
||
Now, we realize this path doesn't work for everyone. So, if you feel like you've tried the recommendation and would still like some resources, or you just aren't confident doing it by yourself and/or feel overwhelmed by the stack, checkout these awesome tutorials on `create-t3-app`: | ||
|
||
### Articles | ||
|
||
- [Build a full stack app with create-t3-app](https://www.nexxel.dev/blog/ct3a-guestbook) | ||
- [A first look at create-t3-app](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f) | ||
- [Migrating your T3 App into a Turborepo](https://www.jumr.dev/blog/t3-turbo) | ||
|
||
### Videos | ||
|
||
- [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY) | ||
- [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk) | ||
- [The T3 Stack - How We Built It](https://www.youtube.com/watch?v=H-FXwnEjSsI) | ||
- [An overview of the create T3 App (Next, Typescript, Tailwind, tRPC, Next-Auth)](https://www.youtube.com/watch?v=VJH8dsPtbeU) | ||
|
||
## Why are there `.js` files in the project? | ||
|
||
As per [T3-Axiom #3](/en/introduction#typesafety-isnt-optional), we take typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be `.js` files. | ||
|
||
We try to emphasize that these files are javascript for a reason, by explicitly declaring each file's type (`cjs` or `mjs`) depending on what's supported by the library it is used by. Also, all the `js` files in this project are still typechecked using a `@ts-check` comment at the top. | ||
|
||
## I'm struggling to add i18n to my app. Is there any reference I can use? | ||
|
||
We have decided against including i18n by default in `create-t3-app` because it's a very opinionated topic and there are many ways to implement it. | ||
|
||
However, if you struggle to implement it and want to see a reference project, we have a [reference repo](https://github.com/juliusmarminge/t3-i18n) that shows how you can add i18n to a T3 App using [next-i18next](https://github.com/i18next/next-i18next). | ||
|
||
## Why are we using `/pages` and not `/app` from Next.js 13? | ||
|
||
As per [T3-Axiom #2](/en/introduction#bleed-responsibly), we love bleeding edge stuff but value stability, your entire router is hard to port, [not a great place to bleed](https://youtu.be/mnwUbtieOuI?t=1662). While `/app` is [a glimpse into the future](https://youtu.be/rnsC-12PVlM?t=818), it's not ready for production; The API is in beta and expected to have breaking changes. | ||
|
||
For a list of supported, planned, and worked on features in the `/app` dir, visit the [beta Next.js docs](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features). |
Oops, something went wrong.