Skip to content
/ web-app-template Public template

A minimal template for web app including DataBase, Google Auth, and frontend infrastructure πŸŽƒ "npx create-app-foundation@latest" !

License

Notifications You must be signed in to change notification settings

hiroppy/web-app-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

️️A minimal template for web app πŸŽƒ


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

App Next.js (Framework) Tailwind CSS (CSS)
React Hook Form (Form) Zod (Schema Validator)
Prisma (ORM) NextAuth.js (Auth) OpenTelemetry (Observability)
Tools TypeScript (Language) pnpm (Package Manager)
Biome (Linter, Formatter) Prettier (Formatter)
lint-staged (Pre Commit) Docker Compose (Docker)
Testing Vitest (Test Runner) Testing Library (React) Playwright (E2E Testing)
Testcontainers (Docker)
Others GitHub Workflows (CI) Renovate (Deps Manager) .vscode (Editor)

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.

πŸ• What does this project support?

Next.js
  • introducing parallel route and intercepting route
  • introducing server actions using Zod
  • setting common files like robots, opengraph-image, etc
  • supporting Docker
  • supporting observability using OpenTelemetry
Prisma
  • introducing dev/test env using Docker Compose and PostgreSQL
  • fixing well-known Next.js issue
  • generating ERD automatically
  • running migration on github actions
NextAuth.js
  • introducing Google Oauth provider
  • defining Prisma schema and connecting database
  • setting Next.js api route using app router
Biome, Prettier
  • introducing how to control these when pre-commit
  • assigning Prisma, Biome, Prettier to each language for vscode
Playwright
  • introducing Page object models for e2e to make it resistant to change code
  • introducing how to avoid OAuth Providers with NextAuth.js
CI
  • CI tasks: lint, build, unit test, e2e test
  • Prod tasks: migrating DB when main branch

Required

Install

When installing the repository, you can skip the setup section, as the init script will do the equivalent of setup.

Using CLI (recommended)

$ npx create-app-foundation@latest

The CLI creates a project directory and run internal/init script so it's easy to get started.

Using GitHub Template

This repo is a GitHub template, so click the "Use this template" button to create your repo. Then, you need to execute the below to finish setting it up.

$ node .internal/setup/init.mjs

Setup

# enable git hooks and corepack
$ npm run setup
# install deps
$ pnpm i
# create ".env" and modifying environment variables
$ cp .env.sample .env

Development

# start docker compose, migrations(generating the client), and next dev
$ pnpm dev

Database

# create new migration
$ pnpm db:migrate
# reset the DB
$ pnpm db:reset
# view the database items
$ pnpm db:studio

Test

Test uses real DB via testcontaiers.

Unit Test

# execute
$ pnpm test
# watch the unit test
$ pnpm test:watch

E2E Test

# install chrome
$ pnpm exec playwright install chrome
# build using test environments since it needs to change encode/decode functions of next-auth
$ pnpm build:test
# execute
$ pnpm test:e2e
# execute with UI
$ pnpm test:e2e:ui

Production

$ pnpm db:up
$ 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).

Observability

This project has OpenTelemetry and it works only production environment.

Local

$ pnpm db:up
$ pnpm build
$ pnpm start
# open Jaeger
$ open http://localhost:16686/

jaeger

Server

Please add a exporter url to .env.

TRACE_EXPORTER_URL=

Links

About

A minimal template for web app including DataBase, Google Auth, and frontend infrastructure πŸŽƒ "npx create-app-foundation@latest" !

Topics

Resources

License

Stars

Watchers

Forks