Getting Started

Prerequisites

• Node.js v20 or higher
• Docker

Since web-app-template uses Docker to set up the database, you must install Docker before running the initialization script. Also, older Docker versions that cannot run Docker compose are not supported.

Installation

Two deployment methods are provided:

Using CLI (recommended)

$ npx create-app-foundation@latest

NOTE

The CLI creates the project directory after asking for the directory name and then executes an init script automatically

Using GitHub Template

This repo is a GitHub Template. When you click this link, this template will be pre-selected on the repository creation screen so that you can create it from here.

After creating the repository, you need to run the following commands to clean and set up the repository.

$ node .internal/setup/init.mjs

Opt-out

• Dockerfile and Docker build job as GitHub Actions
• OpenTelemetry
• E2E testing

Configuration

Rewriting .env

This repository uses Google Oauth provider via next-auth so needs to set up.

CAUTION

If you don't use Google Oauth, please skip this section and delete the provider from nextAuthConfig.ts

See Full Code

// don't import prisma or @auth/prisma-adapter here to avoid importing it at Edge
// [auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror
// [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:

import type { NextAuthConfig, User } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const configForTest = {
  jwt: {
    encode: async ({ token }) => {
      return btoa(JSON.stringify(token));
    },
    decode: async ({ token }) => {
      if (!token) {
        return {};
      }

      return JSON.parse(atob(token));
    },
  },
} satisfies Omit<NextAuthConfig, "providers">;

export const config = {
  pages: {
    signIn: "/signin",
  },
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
          // https://authjs.dev/guides/role-based-access-control#persisting-the-role
          role: profile.role ?? "user",
        };
      },
    }),
  ],
  callbacks: {
    redirect: ({ url, baseUrl }) => {
      return baseUrl;
    },
    session: ({ session, token }) => {
      if (session?.user && token) {
        session.user.id = token.id as string;
        session.user.role = token.role as User["role"];
      }

      return session;
    },
  },
  // https://authjs.dev/getting-started/deployment#docker
  trustHost: true,
  ...(process.env.NEXTAUTH_TEST_MODE === "true" ? configForTest : {}),
} satisfies NextAuthConfig;

1. Creating a project on Google Cloud
2. Accessing the credentials page and set below values

• AUTHORIZED JAVASCRIPT ORIGINS

http://localhost:3000

• AUTHORIZED REDIRECT URIS

http://localhost:3000/api/auth/callback/google

3. After creating the OAuth 2.0 client, please fill below to .env

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=