9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/.internal/site/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "site",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "dev": "vitepress dev",
6 | "build": "vitepress build",
7 | "preview": "vitepress preview"
8 | },
9 | "author": "hiroppy
21 |
,
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/.internal/setup/code/app-(public)-page.tsx:
--------------------------------------------------------------------------------
1 | import { getSessionOrReject } from "../_utils/auth";
2 |
3 | export default async function Page() {
4 | const session = await getSessionOrReject();
5 |
6 | return (
7 | 🎃
22 |
8 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/global-error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "./_components/Button";
4 | import { Container } from "./_components/Container";
5 |
6 | type Props = {
7 | error: Error & { digest?: string };
8 | reset: () => void;
9 | };
10 |
11 | export default function GlobalError({ reset }: Props) {
12 | return (
13 |
14 |
15 | Hello World 😄
9 | 14 |Something went wrong!
17 | 18 |
13 | {label && }
14 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/.internal/tests/no-docker.test.mjs:
--------------------------------------------------------------------------------
1 | import { describe } from "node:test";
2 | import {
3 | modifiedFiles,
4 | removedDirs,
5 | removedFiles,
6 | } from "../setup/questions/docker.mjs";
7 | import { BaseTest } from "./Basetest.mjs";
8 |
9 | const outputDir = "no-docker";
10 | const baseTest = new BaseTest({ outputDir });
11 |
12 | describe("no-docker", async () => {
13 | baseTest.globalHook({
14 | noDocker: true,
15 | });
16 |
17 | await baseTest.testFileList();
18 | await baseTest.testFileContent(modifiedFiles);
19 | await baseTest.testRemovedDirs(removedDirs);
20 | await baseTest.testRemovedFiles(removedFiles);
21 | await baseTest.allTests({ hasE2e: true });
22 | });
23 |
--------------------------------------------------------------------------------
/src/app/_components/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import type { PropsWithChildren } from "react";
3 |
4 | type Props = PropsWithChildren<
5 | React.JSX.IntrinsicElements["div"] & {
6 | size?: "sm" | "md" | "lg";
7 | }
8 | >;
9 |
10 | export function Container({
11 | children,
12 | className,
13 | size = "lg",
14 | ...rest
15 | }: Props) {
16 | return (
17 | {children}
15 | {error && (
16 |
17 | {error}
18 |
19 | )}
20 |
27 | {children}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/_types/result.ts:
--------------------------------------------------------------------------------
1 | import type { ZodFlattenedError } from "zod";
2 |
3 | type SuccessResult{message}
} 21 | {hasHomeLink && Go to Home} 22 | {children} 23 |
22 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/.internal/site/src/introduction/dotenv.md:
--------------------------------------------------------------------------------
1 | # .env
2 |
3 | Dotenv is the de facto standard, but it lacks validation, making it prone to errors. In this template, we use zod to validate the required environment variables in files like `next.config.ts`. If any required variables are missing or invalid, the application will fail to execute. This approach ensures robustness at runtime.
4 |
5 | ::: code-group
6 |
7 | <<< ../../../../.env.sample
8 |
9 | <<< ../../../../env.ts
10 |
11 | :::
12 |
13 | If you need to add new environment variables, make sure to add them to both `.env` and `.env.test`, and update the `env.ts` with the corresponding zod validation.
14 |
15 | ## Why not use .env.local?
16 |
17 | Prisma can read the `.env` file, and the `DATABASE_URL` is a required key for migration. While Next.js prioritizes `.env.local`, splitting the dotenv files can be inefficient. Therefore, to maintain consistency with Prisma, this template uses `.env`.
18 |
--------------------------------------------------------------------------------
/.github/workflows/internal.yml:
--------------------------------------------------------------------------------
1 | name: internal
2 |
3 | on:
4 | pull_request:
5 | branches:
6 | - main
7 | push:
8 | branches:
9 | - main
10 |
11 | jobs:
12 | e2e:
13 | runs-on: ubuntu-latest
14 | strategy:
15 | matrix:
16 | file:
17 | - common
18 | - all-opt-out
19 | - no-docker
20 | - no-e2e
21 | - no-otel
22 | - no-stripe
23 | - no-sample-code
24 | steps:
25 | - uses: actions/checkout@v6
26 | - uses: ./.github/actions/setup-node
27 | - if: ${{ github.ref_name == 'main' }}
28 | run: echo "IS_MAIN_BRANCH=true" >> $GITHUB_ENV
29 | - run: pnpm exec playwright install chromium
30 | - run: cd ./.internal/tests && make run-${{ matrix.file }}
31 | env:
32 | # to fetch this repo via CLI on main branch
33 | IS_MAIN_BRANCH: ${{ env.IS_MAIN_BRANCH }}
34 | IS_LOCAL: false
35 |
--------------------------------------------------------------------------------
/e2e/integrations/auth.test.ts:
--------------------------------------------------------------------------------
1 | import { user1 } from "../dummyUsers";
2 | import { test } from "../fixtures";
3 | import { useUser } from "../helpers/users";
4 |
5 | test.describe("no sign in", () => {
6 | test("should redirect to signIn page when accessing /me page", async ({
7 | mePage,
8 | signInPage,
9 | }) => {
10 | await mePage.goTo();
11 |
12 | await mePage.expectHeaderUI("signOut");
13 | await signInPage.expectUI();
14 | });
15 | });
16 |
17 | test.describe("sign in", () => {
18 | useUser(test, user1);
19 |
20 | test.beforeEach(async ({ topPage }) => {
21 | await topPage.goTo();
22 | await topPage.expectUI("signIn", user1);
23 | await topPage.expectHeaderUI("signIn", user1);
24 | });
25 |
26 | test("should go to /me page", async ({ mePage }) => {
27 | await mePage.goToMePage();
28 |
29 | await mePage.expectHeaderUI("signIn", user1);
30 | await mePage.expectUI(user1.name);
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.formatOnSave": true,
3 | "editor.codeActionsOnSave": {
4 | "source.organizeImports.biome": "explicit",
5 | "source.fixAll.biome": "explicit"
6 | },
7 | "editor.defaultFormatter": "esbenp.prettier-vscode",
8 | "[javascript]": {
9 | "editor.defaultFormatter": "biomejs.biome"
10 | },
11 | "[javascriptreact]": {
12 | "editor.defaultFormatter": "biomejs.biome"
13 | },
14 | "[typescript]": {
15 | "editor.defaultFormatter": "biomejs.biome"
16 | },
17 | "[typescriptreact]": {
18 | "editor.defaultFormatter": "biomejs.biome"
19 | },
20 | "[prisma]": {
21 | "editor.defaultFormatter": "Prisma.prisma"
22 | },
23 | "prettier.requireConfig": false,
24 | "cSpell.enabled": true,
25 | "cSpell.words": [
26 | "dotenv",
27 | "biomejs",
28 | "otel",
29 | "otlp",
30 | "clsx",
31 | "vitest",
32 | "knip",
33 | "cuid"
34 | ],
35 | "cSpell.allowCompoundWords": true,
36 | "cSpell.ignorePaths": ["**/node_modules/**"]
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/_components/Input.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import clsx from "clsx";
4 | import type { JSX } from "react";
5 | import { useFormId } from "../_hooks/useFormId";
6 | import { FormBox, type Props as FormBoxProps } from "./FormBox";
7 |
8 | type Props = JSX.IntrinsicElements["input"] &
9 | Omit
23 |
28 | Item Detail
24 | 27 |{item.content}
29 |
| 
| 
| 
|
6 |
7 | Observability is essential for operating web services effectively. This template connects Next.js with [OpenTelemetry](https://opentelemetry.io/), enabling you to trace through to the database layer using Prisma. In the local environment, the setup includes routing through an OpenTelemetry Collector and visualizing the traces in [Jaeger](https://www.jaegertracing.io/).
8 |
9 | For production environments, it is recommended to use the OpenTelemetry Collector as a sidecar and integrate with platforms such as Datadog for advanced monitoring and analysis.
10 |
11 | _The Tracing data of Top Page_
12 |
13 | 
14 |
15 | _The SQL and Prisma_
16 |
17 | 
18 |
19 | ## OpenTelemetry
20 |
21 | ::: code-group
22 | <<< ../../../../src/otel/node.ts
23 | <<< ../../../../compose.yml
24 | :::
25 |
--------------------------------------------------------------------------------
/.internal/site/src/features/unit-testing.md:
--------------------------------------------------------------------------------
1 | # Unit Testing
2 |
3 | | | | | |
4 | | :---------------------------------------------------------: | :---------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :---------------------------------------------------------: |
5 | | 
| 
| 
| |
6 |
7 | ## Running real databases in parallel
41 |
56 |
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/.internal/site/src/introduction/tasks.md:
--------------------------------------------------------------------------------
1 | # Tasks
2 |
3 | ## Development
4 |
5 | ```sh
6 | $ pnpm dev
7 | ```
8 |
9 | `pnpm dev` runs Docker Compose, migrates, generates Prisma client code, and finally runs `next dev`.
10 |
11 | ## Production
12 |
13 | ```sh
14 | # need to boot Database
15 | $ pnpm db:up
16 | $ pnpm build
17 | $ pnpm start
18 | ```
19 |
20 | ## Payment
34 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/.internal/site/src/features/code-quality-automation.md:
--------------------------------------------------------------------------------
1 | # Code Quality Automation
2 |
3 | | | | | | | | |
4 | | :-------------------------------------------------------: | :-------------------------------------------------------------: | :---------------------------------------------------------: | :-----------------------------------------------------: | ----------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------- |
5 | | Subscription Status
35 | {data?.subscriptionId &&{data.subscriptionId}
} 36 | {!success ? ( 37 |internal error
38 | ) : ( 39 |46 | Available until {format(limitDate)} 47 |
48 | )} 49 | 55 | DEBUG: Test card numbers 56 | 57 | 60 |
| 
| | 
| 
| 
| 
|
6 |
7 | ### Code Quality
8 |
9 | This template primarily utilizes Biome, with Prettier also playing a complementary role. Actually, both library the same purpose, but Biome cannot format Markdown and YAML files, which is why both are used.
10 |
11 | ## Git Pre-commit
12 |
13 | Lefthook deploys shell scripts to the `.githooks` directory during the postinstall phase when running `pnpm i` or `pnpm rebuild`.
14 |
15 | <<< ../../../../lefthook.yml
16 |
17 | ## Tool Configuration Overview
18 |
19 | ### Biome
20 |
21 | <<< ../../../../biome.json
22 |
23 | ### Prettier
24 |
25 | No Configuration File.
26 |
27 | ### Prisma
28 |
29 | No Configuration File.
30 |
31 | ### EditorConfig
32 |
33 | <<< ../../../../.editorconfig
34 |
35 | ### Renovate
36 |
37 | <<< ../../../../renovate.json
38 |
--------------------------------------------------------------------------------
/e2e/models/Base.ts:
--------------------------------------------------------------------------------
1 | import { expect, type Locator, type Page } from "@playwright/test";
2 | import type { User } from "next-auth";
3 |
4 | export class Base {
5 | page: Page;
6 | headerLocator: Locator;
7 | headerButtonSignInLocator: Locator;
8 | headerButtonSignOutLocator: Locator;
9 | headerLinkMyPageLocator: Locator;
10 | headerImageMyAvatorLocator: Locator;
11 | footerLocator: Locator;
12 | footerLinkRepositoryLocator: Locator;
13 |
14 | constructor(page: Page) {
15 | this.page = page;
16 | this.headerLocator = this.page.locator("header");
17 | this.headerButtonSignInLocator = this.headerLocator.getByRole("button", {
18 | name: "Sign in",
19 | });
20 | this.headerButtonSignOutLocator = this.headerLocator.getByRole("button", {
21 | name: "Sign out",
22 | });
23 | this.headerLinkMyPageLocator = this.headerLocator.locator("a[href='/me']");
24 | this.headerImageMyAvatorLocator = this.headerLocator.getByRole("img", {
25 | name: "profile",
26 | });
27 | this.footerLocator = this.page.locator("footer");
28 | this.footerLinkRepositoryLocator = this.footerLocator.getByRole("link", {
29 | name: "Repository",
30 | });
31 | }
32 |
33 | async goToMePage() {
34 | await this.headerLinkMyPageLocator.click();
35 | }
36 |
37 | async expectHeaderUI(state: "signIn" | "signOut", user?: User) {
38 | if (state === "signIn") {
39 | await expect(this.headerButtonSignInLocator).not.toBeVisible();
40 | await expect(this.headerButtonSignOutLocator).toBeVisible();
41 | expect(await this.headerImageMyAvatorLocator.getAttribute("src")).toBe(
42 | user?.image,
43 | );
44 | }
45 |
46 | if (state === "signOut") {
47 | await expect(this.headerButtonSignInLocator).toBeVisible();
48 | await expect(this.headerButtonSignOutLocator).not.toBeVisible();
49 | await expect(this.headerButtonSignInLocator).toBeVisible();
50 | }
51 | }
52 |
53 | async expectFooterUI() {
54 | await expect(this.footerLinkRepositoryLocator).toBeVisible();
55 | await expect(this.footerLinkRepositoryLocator).toHaveAttribute(
56 | "href",
57 | "https://github.com/hiroppy/web-app-template",
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/prisma/schema/user.prisma:
--------------------------------------------------------------------------------
1 | enum Role {
2 | USER
3 | ADMIN
4 | }
5 |
6 | // https://authjs.dev/getting-started/adapters/prisma#schema
7 | model Account {
8 | id String @id @default(cuid())
9 | userId String @map("user_id")
10 | type String
11 | provider String
12 | providerAccountId String @map("provider_account_id")
13 | refresh_token String? @db.Text
14 | access_token String? @db.Text
15 | expires_at Int?
16 | token_type String?
17 | scope String?
18 | id_token String? @db.Text
19 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
20 | createdAt DateTime @default(now()) @map("created_at")
21 | updatedAt DateTime @updatedAt @map("updated_at")
22 |
23 | @@unique([provider, providerAccountId])
24 | @@map("accounts")
25 | }
26 |
27 | model User {
28 | id String @id @default(cuid())
29 | name String?
30 | email String? @unique
31 | emailVerified DateTime? @map("email_verified")
32 | image String?
33 | accounts Account[]
34 | createdAt DateTime @default(now()) @map("created_at")
35 | updatedAt DateTime @updatedAt @map("updated_at")
36 | // https://authjs.dev/guides/basics/role-based-access-control
37 | role Role @default(USER)
38 | // start: sample
39 | items Item[]
40 | // end: sample
41 | stripeId String? @unique @map("stripe_id") // cus_XXXX
42 | subscriptions Subscription[]
43 |
44 | @@map("users")
45 | }
46 |
47 | model Subscription {
48 | id String @id @default(cuid())
49 | subscriptionId String @unique @map("subscription_id") // sub_XXXX
50 | status String
51 | currentPeriodEnd DateTime? @map("current_period_end")
52 | cancelAtPeriodEnd Boolean @default(false) @map("cancel_at_period_end")
53 | createdAt DateTime @default(now()) @map("created_at")
54 | updatedAt DateTime @updatedAt @map("updated_at")
55 | userId String @map("user_id")
56 | user User @relation(fields: [userId], references: [id])
57 |
58 | @@map("subscriptions")
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/_clients/nextAuthConfig.ts:
--------------------------------------------------------------------------------
1 | // don't import prisma or @auth/prisma-adapter here to avoid importing it at Edge
2 | // [auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror
3 | // [auth][cause]: Error: PrismaClient is not configured to run in Edge Runtime (Vercel Edge Functions, Vercel Edge Middleware, Next.js (Pages Router) Edge API Routes, Next.js (App Router) Edge Route Handlers or Next.js Middleware). In order to run Prisma Client on edge runtime, either:
4 |
5 | import type { NextAuthConfig } from "next-auth";
6 | import GoogleProvider from "next-auth/providers/google";
7 |
8 | export const configForTest = {
9 | jwt: {
10 | encode: async ({ token }) => {
11 | return btoa(JSON.stringify(token));
12 | },
13 | decode: async ({ token }) => {
14 | if (!token) {
15 | return {};
16 | }
17 |
18 | return JSON.parse(atob(token));
19 | },
20 | },
21 | } satisfies Omit
12 | loading ...}>
13 |
15 | loading ...}>
16 |
18 |
19 | );
20 | }
21 |
22 | async function Status() {
23 | const session = await getSessionOrReject();
24 |
25 | return (
26 |
27 |
34 | );
35 | }
36 |
37 | async function List() {
38 | const data = await prisma.item.findMany({
39 | include: {
40 | user: true,
41 | },
42 | orderBy: {
43 | createdAt: "desc",
44 | },
45 | });
46 |
47 | return (
48 | 28 | {session?.data?.user 29 | ? `you are signed in as ${session.data.user.name} 😄` 30 | : "you are not signed in 🥲"} 31 |
32 | {session?.data?.user &&-
49 | {data.map(({ id, content, createdAt, user }) => (
50 |
-
54 | 55 | {user.image && ( 56 |72 | {format(createdAt)} 73 |
64 | )} 65 | 69 | {content} 70 | 71 |
74 | ))}
75 |
| | | 
|
6 |
7 | ## Schema | 
| 
| |
6 |
7 | ## Server Actions
8 |
9 | ### Result Type 
| | |
6 |
7 | This template uses JWT (strategy) to manage session persistence. Since it leverages the Prisma adapter, users also have the option to manage sessions in the database. Each approach has its own pros and cons, but the default choice is set to JWT.
8 |
9 | > [!IMPORTANT]
10 | > Recently, Prisma has been adapted to run on Edge. However, database drivers and database types / hosting providers are required. See more [details](https://www.prisma.io/docs/orm/prisma-client/deployment/edge/overview)
11 |
12 | ## Why Choose JWT?
13 |
14 | Authentication in Next.js is typically handled via middleware, which operates in the Edge runtime. Adapters, including Prisma, need to be compatible with the Edge runtime, and platform-specific support is often required. By using JWT, these compatibility concerns are eliminated, simplifying the implementation and avoiding potential runtime issues.
15 |
16 | However, as you may know, managing sessions with JWT comes with challenges such as difficulty in purging tokens and syncing claims. For these reasons, I personally recommend managing sessions in a database whenever possible.
17 |
18 | ## Split Config 
| | |
6 |
7 | ## Supporting Multiple dummy accounts 84 |
85 |
86 | 87 | > [!IMPORTANT] 88 | > If you find yourself writing similar code often or think this repository can be optimized more than now, please submit [an issue](https://github.com/hiroppy/web-app-template/issues/new) ! 89 | -------------------------------------------------------------------------------- /.internal/tests/no-docker.test.mjs.snapshot: -------------------------------------------------------------------------------- 1 | exports[`no-docker > should put files 1`] = ` 2 | [ 3 | "internal-tests-output-no-docker/.editorconfig", 4 | "internal-tests-output-no-docker/.env", 5 | "internal-tests-output-no-docker/.env.sample", 6 | "internal-tests-output-no-docker/.env.test", 7 | "internal-tests-output-no-docker/.github/actions/setup-db/action.yml", 8 | "internal-tests-output-no-docker/.github/actions/setup-node/action.yml", 9 | "internal-tests-output-no-docker/.github/workflows/ci.yml", 10 | "internal-tests-output-no-docker/.gitignore", 11 | "internal-tests-output-no-docker/.node-version", 12 | "internal-tests-output-no-docker/.npmrc", 13 | "internal-tests-output-no-docker/.vscode/extensions.json", 14 | "internal-tests-output-no-docker/.vscode/mcp.json", 15 | "internal-tests-output-no-docker/.vscode/settings.json", 16 | "internal-tests-output-no-docker/README.md", 17 | "internal-tests-output-no-docker/biome.json", 18 | "internal-tests-output-no-docker/compose.yml", 19 | "internal-tests-output-no-docker/env.ts", 20 | "internal-tests-output-no-docker/knip.config.ts", 21 | "internal-tests-output-no-docker/lefthook.yml", 22 | "internal-tests-output-no-docker/next.config.ts", 23 | "internal-tests-output-no-docker/otel-collector-config.yml", 24 | "internal-tests-output-no-docker/package.json", 25 | "internal-tests-output-no-docker/playwright.config.ts", 26 | "internal-tests-output-no-docker/pnpm-lock.yaml", 27 | "internal-tests-output-no-docker/pnpm-workspace.yaml", 28 | "internal-tests-output-no-docker/postcss.config.mjs", 29 | "internal-tests-output-no-docker/prisma.config.ts", 30 | "internal-tests-output-no-docker/prisma/schema/item.prisma", 31 | "internal-tests-output-no-docker/prisma/schema/migrations/migration_lock.toml", 32 | "internal-tests-output-no-docker/prisma/schema/schema.prisma", 33 | "internal-tests-output-no-docker/prisma/schema/user.prisma", 34 | "internal-tests-output-no-docker/public/.gitkeep", 35 | "internal-tests-output-no-docker/renovate.json", 36 | "internal-tests-output-no-docker/tests/db.setup.ts", 37 | "internal-tests-output-no-docker/tests/vitest.helper.ts", 38 | "internal-tests-output-no-docker/tests/vitest.setup.ts", 39 | "internal-tests-output-no-docker/tsconfig.json", 40 | "internal-tests-output-no-docker/vitest.config.ts", 41 | "mocked/migration.sql" 42 | ] 43 | `; 44 | 45 | exports[`no-docker > should update .github/workflows/ci.yml 1`] = ` 46 | [ 47 | "name: ci", 48 | "", 49 | "on:", 50 | " pull_request:", 51 | " branches:", 52 | " - main", 53 | " paths:", 54 | " - .github/workflows/ci.yml", 55 | " - package.json", 56 | " - src/**", 57 | " - e2e/**", 58 | " push:", 59 | " branches:", 60 | " - main", 61 | " paths:", 62 | " - .github/workflows/ci.yml", 63 | " - package.json", 64 | " - src/**", 65 | " - e2e/**", 66 | "", 67 | "jobs:", 68 | " lint:", 69 | " runs-on: ubuntu-latest", 70 | " steps:", 71 | " - uses: actions/checkout@v5", 72 | " - uses: ./.github/actions/setup-node", 73 | " - run: pnpm lint", 74 | " - run: npx biome check . && npx prettier --check './**/*.{md,yml}'", 75 | " build:", 76 | " runs-on: ubuntu-latest", 77 | " steps:", 78 | " - uses: actions/checkout@v5", 79 | " - uses: ./.github/actions/setup-node", 80 | " - uses: ./.github/actions/setup-db", 81 | " - run: pnpm build", 82 | " unit-test:", 83 | " runs-on: ubuntu-latest", 84 | " steps:", 85 | " - uses: actions/checkout@v5", 86 | " - uses: ./.github/actions/setup-node", 87 | " - run: pnpm test", 88 | " e2e-test:", 89 | " runs-on: ubuntu-latest", 90 | " steps:", 91 | " - uses: actions/checkout@v5", 92 | " - uses: ./.github/actions/setup-node", 93 | " - uses: ./.github/actions/setup-db", 94 | " - run: pnpm exec playwright install chromium", 95 | " - run: pnpm build", 96 | " - run: pnpm test:e2e", 97 | "" 98 | ] 99 | `; 100 | -------------------------------------------------------------------------------- /.internal/setup/questions/sample-code.mjs: -------------------------------------------------------------------------------- 1 | import { readFile } from "node:fs/promises"; 2 | import { join } from "node:path"; 3 | import { 4 | executeOptionalQuestion, 5 | removeDeps, 6 | removeDirs, 7 | removeFiles, 8 | writeFileToCopiedDir, 9 | } from "../utils.mjs"; 10 | 11 | export const removedFiles = /** @type {const} */ ([ 12 | "src/app/_actions/items.ts", 13 | "src/app/_actions/items.test.ts", 14 | "src/app/_hooks/useOnlineStatus.ts", 15 | "src/app/_hooks/useOnlineStatus.test.ts", 16 | "src/app/_schemas/items.ts", 17 | "src/app/_schemas/items.test.ts", 18 | "src/app/forbidden.tsx", 19 | "src/app/unauthorized.tsx", 20 | "src/app/opengraph-image.tsx", 21 | 22 | // e2e 23 | "e2e/integrations/item.test.ts", 24 | "e2e/a11y/itemPage.test.ts", 25 | "e2e/models/ItemPage.ts", 26 | 27 | // others 28 | "prisma/schema/item.prisma", 29 | ]); 30 | 31 | export const removedDirs = /** @type {const} */ ([ 32 | "src/app/(public)/items", 33 | "src/app/(public)/_components", 34 | ]); 35 | 36 | export const modifiedFiles = /** @type {const} */ ([ 37 | "next.config.ts", 38 | "src/app/layout.tsx", 39 | "src/app/(public)/page.tsx", 40 | "e2e/fixtures.ts", 41 | "e2e/models/TopPage.ts", 42 | "src/middleware.ts", 43 | "src/middleware.test.ts", 44 | "prisma/schema/user.prisma", 45 | "e2e/a11y/topPage.test.ts", 46 | ]); 47 | 48 | // TODO: need to consider keeping them or not 49 | const removedDeps = /** @type {const} */ [ 50 | "@hookform/resolvers", 51 | "react-hook-form", 52 | ]; 53 | 54 | export async function sampleCode(answer, isSkipQuestion) { 55 | const fences = [ 56 | ["/* start: sample */", "/* end: sample */"], 57 | ["// start: sample", "// end: sample"], 58 | ]; 59 | 60 | await executeOptionalQuestion({ 61 | question: "> Do you want to remove sample application code? (y/N) ", 62 | answer, 63 | isSkipQuestion, 64 | codeAndFenceList: [ 65 | [modifiedFiles[0], fences[0]], 66 | [modifiedFiles[1], fences[0]], 67 | [modifiedFiles[3], fences[0]], 68 | [modifiedFiles[4], fences[0]], 69 | [modifiedFiles[7], fences[1]], 70 | [modifiedFiles[8], fences[0]], 71 | ], 72 | yesCallback: async () => { 73 | await Promise.all([ 74 | removeFiles(removedFiles), 75 | removeDirs(removedDirs), 76 | removeDeps(removedDeps), 77 | writeFileToCopiedDir( 78 | modifiedFiles[1], 79 | await readReplacedCode("app-layout.tsx"), 80 | ), 81 | writeFileToCopiedDir( 82 | modifiedFiles[2], 83 | await readReplacedCode("app-(public)-page.tsx"), 84 | ), 85 | ]); 86 | }, 87 | }); 88 | } 89 | 90 | async function readReplacedCode(fileName) { 91 | return await readFile( 92 | join(import.meta.dirname, join("..", "code", fileName)), 93 | "utf-8", 94 | ); 95 | } 96 | 97 | // async function cleanUpNextConfig() { 98 | // const data = await readFileFromCopiedDir("next.config.ts"); 99 | // const sourceFile = ts.createSourceFile( 100 | // "next.config.ts", 101 | // data, 102 | // ts.ScriptTarget.Latest, 103 | // true, 104 | // ); 105 | 106 | // function visit(context) { 107 | // return (rootNode) => { 108 | // function visitor(node) { 109 | // if ( 110 | // ts.isVariableDeclaration(node) && 111 | // node.name.getText() === "nextConfig" && 112 | // node.initializer && 113 | // ts.isObjectLiteralExpression(node.initializer) 114 | // ) { 115 | // return ts.factory.updateVariableDeclaration( 116 | // node, 117 | // node.name, 118 | // node.exclamationToken, 119 | // node.type, 120 | // ts.factory.createObjectLiteralExpression([], false), 121 | // ); 122 | // } 123 | // return ts.visitEachChild(node, visitor, context); 124 | // } 125 | // return ts.visitNode(rootNode, visitor); 126 | // }; 127 | // } 128 | 129 | // const result = ts.transform(sourceFile, [visit]); 130 | // const updatedSourceFile = result.transformed[0]; 131 | // const printer = ts.createPrinter(); 132 | // const updatedContent = printer.printFile(updatedSourceFile); 133 | 134 | // await writeFileToCopiedDir("next.config.ts", updatedContent); 135 | // } 136 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | paths: 8 | - .github/workflows/ci.yml 9 | - package.json 10 | - src/** 11 | # start: e2e # 12 | - e2e/** 13 | # end: e2e # 14 | # start: docker # 15 | - Dockerfile 16 | # end: docker # 17 | push: 18 | branches: 19 | - main 20 | paths: 21 | - .github/workflows/ci.yml 22 | - package.json 23 | - src/** 24 | # start: e2e # 25 | - e2e/** 26 | # end: e2e # 27 | # start: docker # 28 | - Dockerfile 29 | # end: docker # 30 | ####### 👉 remove ####### 31 | repository_dispatch: 32 | types: [trigger-ci] 33 | ######################## 34 | 35 | jobs: 36 | lint: 37 | runs-on: ubuntu-latest 38 | steps: 39 | - uses: actions/checkout@v6 40 | - uses: ./.github/actions/setup-node 41 | - run: pnpm lint 42 | - run: npx biome check . && npx prettier --check './**/*.{md,yml}' 43 | build: 44 | runs-on: ubuntu-latest 45 | steps: 46 | - uses: actions/checkout@v6 47 | - uses: ./.github/actions/setup-node 48 | - uses: ./.github/actions/setup-db 49 | - run: pnpm build 50 | # start: docker # 51 | build-docker: 52 | runs-on: ubuntu-latest 53 | env: 54 | NEXT_PUBLIC_SITE_URL: http://localhost:3000 55 | steps: 56 | - uses: actions/checkout@v6 57 | - uses: ./.github/actions/setup-node 58 | - uses: ./.github/actions/setup-db 59 | - run: | 60 | docker build \ 61 | -t app \ 62 | -f Dockerfile \ 63 | --add-host=host.docker.internal:host-gateway \ 64 | --build-arg DATABASE_USER=${{env.DATABASE_USER}} \ 65 | --build-arg DATABASE_PASSWORD=${{env.DATABASE_PASSWORD}} \ 66 | --build-arg DATABASE_DB=${{env.DATABASE_DB}} \ 67 | --build-arg DATABASE_HOST=${{env.DATABASE_HOST}} \ 68 | --build-arg DATABASE_PORT=${{env.DATABASE_PORT}} \ 69 | --build-arg DATABASE_SCHEMA=${{env.DATABASE_SCHEMA}} \ 70 | --build-arg GOOGLE_CLIENT_ID=${{env.GOOGLE_CLIENT_ID}} \ 71 | --build-arg GOOGLE_CLIENT_SECRET=${{env.GOOGLE_CLIENT_SECRET}} \ 72 | --build-arg NEXT_PUBLIC_SITE_URL=${{env.NEXT_PUBLIC_SITE_URL}} \ 73 | --build-arg NEXTAUTH_SECRET=${{env.NEXTAUTH_SECRET}} \ 74 | --build-arg TRACE_EXPORTER_URL=${{env.TRACE_EXPORTER_URL}} \ 75 | --build-arg STRIPE_PRICE_ID=${{env.STRIPE_PRICE_ID}} \ 76 | --build-arg STRIPE_SECRET_KEY=${{env.STRIPE_SECRET_KEY}} \ 77 | --build-arg STRIPE_WEBHOOK_SECRET=${{env.STRIPE_WEBHOOK_SECRET}} \ 78 | . 79 | env: 80 | # please set the following environment variables as github secrets 81 | DATABASE_USER: local 82 | DATABASE_PASSWORD: 1234 83 | DATABASE_DB: local 84 | DATABASE_HOST: host.docker.internal 85 | DATABASE_PORT: 5432 86 | DATABASE_SCHEMA: public 87 | NEXTAUTH_SECRET: TKDdLVjf7cTyTs5oWVpv04senu6fia4RGQbYHRQIR5Q= 88 | GOOGLE_CLIENT_ID: dummy 89 | GOOGLE_CLIENT_SECRET: dummy 90 | # start: otel # 91 | TRACE_EXPORTER_URL: "" 92 | # end: otel # 93 | # start: stripe # 94 | STRIPE_PRICE_ID: price_1 95 | STRIPE_SECRET_KEY: pk_test_1 96 | STRIPE_WEBHOOK_SECRET: whsec_1 97 | # end: stripe # 98 | - run: docker run -d -p 3000:3000 app 99 | - run: | 100 | until $(curl --output /dev/null --silent --fail ${{env.NEXT_PUBLIC_SITE_URL}}); do 101 | printf '!' 102 | sleep 1 103 | done 104 | timeout-minutes: 1 105 | # end: docker # 106 | unit-test: 107 | runs-on: ubuntu-latest 108 | steps: 109 | - uses: actions/checkout@v6 110 | - uses: ./.github/actions/setup-node 111 | - run: pnpm test 112 | # start: e2e # 113 | e2e-test: 114 | runs-on: ubuntu-latest 115 | steps: 116 | - uses: actions/checkout@v6 117 | - uses: ./.github/actions/setup-node 118 | - uses: ./.github/actions/setup-db 119 | - run: pnpm exec playwright install chromium 120 | - run: pnpm build 121 | - run: pnpm test:e2e 122 | # end: e2e # 123 | -------------------------------------------------------------------------------- /.github/workflows/update-internal-e2e.yml: -------------------------------------------------------------------------------- 1 | name: Update internal e2e 2 | 3 | on: 4 | issue_comment: 5 | types: [created] 6 | 7 | permissions: 8 | contents: write 9 | pull-requests: write 10 | packages: write 11 | 12 | env: 13 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 14 | IS_MAIN_BRANCH: false 15 | IS_LOCAL: false 16 | 17 | jobs: 18 | update-snapshots: 19 | if: github.event.issue.pull_request && contains(github.event.comment.body, '/update') 20 | runs-on: ubuntu-latest 21 | steps: 22 | - uses: actions/checkout@v6 23 | - uses: ./.github/actions/setup-node 24 | - uses: ./.github/actions/setup-db 25 | - run: pnpm exec playwright install chromium 26 | - name: Get PR information 27 | id: pr 28 | uses: actions/github-script@v8 29 | with: 30 | script: | 31 | const { data: pullRequest } = await github.rest.pulls.get({ 32 | owner: context.repo.owner, 33 | repo: context.repo.repo, 34 | pull_number: context.issue.number 35 | }); 36 | return { 37 | head_ref: pullRequest.head.ref, 38 | head_sha: pullRequest.head.sha, 39 | base_ref: pullRequest.base.ref 40 | }; 41 | - name: Checkout PR branch 42 | uses: actions/checkout@v6 43 | with: 44 | token: ${{ secrets.GITHUB_TOKEN }} 45 | ref: ${{ fromJson(steps.pr.outputs.result).head_ref }} 46 | - name: Fix git safe directory 47 | run: git config --global --add safe.directory /__w/web-app-template/web-app-template 48 | - uses: ./.github/actions/setup-node 49 | - name: Update snapshots 50 | run: cd .internal/tests && make skip-tests-update 51 | - name: Check for changes 52 | id: changes 53 | run: | 54 | if [ -n "$(git status --porcelain)" ]; then 55 | echo "changed=true" >> $GITHUB_OUTPUT 56 | echo "Files have been modified by the build process" 57 | else 58 | echo "changed=false" >> $GITHUB_OUTPUT 59 | echo "No files were modified by the build process" 60 | fi 61 | - name: Commit and push changes 62 | if: steps.changes.outputs.changed == 'true' 63 | run: | 64 | git config --local user.email "action@github.com" 65 | git config --local user.name "GitHub Action" 66 | git add . 67 | git commit -m "chore: update test snapshots 68 | 69 | 🤖 Generated with GitHub Actions 70 | 71 | Co-Authored-By: GitHub Action