hiroppy / web-app-template Goto Github PK

This template is based on create-next-app but has below new tech and configs.

Just running create-next-app does not satisfy the dependencies, development environment, and CI environment to create a web application. In addition, many dependencies require setting configs for example, @next-auth/prisma-adapter requires adding many schemas to schema.prisma but we don't know what we add so always need to check the docs every time. This project is created as a template with minimal code in advance so that you can focus on development.

This repo is a github template so click the "Use this template" button and you will create your repo.

create-app-foundation creates a directory based on this template and skips the setup section automatically.

npx create-app-foundation

1. Installing Docker Compose

Please check Installation scenarios section.

2. Enabling git hook and corepack

npm run setup

3. Installing Deps

pnpm i

4. Creating .env.local and modifying environment variables

cp .env.sample .env.local

Set the following environment variables in .env.local.

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

If you don't use Google OAuth, you can remove a provider from _clients/NextAuth.ts.

5. Running init.mjs

• generating DB migration files
• removing unnecessary code
• updating name in package.json using directory name

node init.mjs

# start docker-compose, migrations(generating the client), and next dev
pnpm dev
# create new migration
pnpm dev:db:migrate
# reset the DB
pnpm dev:db:reset
# view the contents
pnpm dev:db:studio

📙 Database ER diagram

Test uses also DB so need to start DB first.

# unit test

# run the DB and generate the client
pnpm test:db:setup
# execute
pnpm test
# watch the unit test
pnpm test:watch
# reset the DB
pnpm test:db:reset

# e2e

# install chrome
pnpm exec playwright install chrome
# run the DB and generate the client
pnpm test:db:setup
# test uses a built app since next.js has different cache behavior between development and production
pnpm build
# execute
pnpm test:e2e

💁‍♀️ This template recommends using a real database but when you face not keeping idempotency, you might consider using mock.

pnpm db:start
pnpm build
pnpm start

If you set POSTGRESQL_URL as GitHub secrets, you will be able to execute migration for database on GitHub actions(.github/workflows/migration.yml).