Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hiroppy/web-app-template
A minimal web service template 🎃 "npx create-app-foundation@latest" !
https://github.com/hiroppy/web-app-template
next next-auth nextjs-template opentelemetry prisma-orm react-hook-form scaffolded taiwindcss templates typescript
Last synced: about 14 hours ago
JSON representation
A minimal web service template 🎃 "npx create-app-foundation@latest" !
- Host: GitHub
- URL: https://github.com/hiroppy/web-app-template
- Owner: hiroppy
- License: mit
- Created: 2024-02-14T14:22:06.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-17T13:40:36.000Z (8 days ago)
- Last Synced: 2025-01-17T14:12:06.191Z (8 days ago)
- Topics: next, next-auth, nextjs-template, opentelemetry, prisma-orm, react-hook-form, scaffolded, taiwindcss, templates, typescript
- Language: TypeScript
- Homepage: https://hiroppy.github.io/web-app-template/
- Size: 3.64 MB
- Stars: 102
- Watchers: 4
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
️️A minimal template for web app 🎃
From Zero to Service, Build with Best Practices, Minimal Code, and Essential Tools
📜 Read The Docs 📜
Installing this template automatically sets up the following libraries/tools. By saving you significant effort, it allows you to focus entirely on writing your product code.🤗
| | | | | |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **App** |
Next.js |
Tailwind CSS |
NextAuth.js |
React Hook Form |
| |
Zod |
OpenTelemetry |
Prisma |
PostgreSQL |
| | | | |
| **Tools** |
TypeScript |
pnpm |
Biome |
Prettier |
| |
EditorConfig |
lefthook |
Docker | |
| | | | |
| **Testing** |
Vitest |
Testing Library |
Playwright |
Testcontainers |
| | | |
| **Others** |
GitHub Actions |
Renovate |
VSCode |
Copilot Edits |
## Prerequisites
- Node.js v20 or higher
- [Docker](https://docs.docker.com/engine/install/)
## Installation
When installing the repository, you can skip the setup section, as the init script will do the equivalent of setup.
### Using CLI (recommended)
```sh
$ 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"](https://github.com/new?template_owner=hiroppy&template_name=web-app-template) button to create your repo. Then, you need to execute the below to finish setting it up.
```sh
$ node .internal/setup/init.mjs
```
### Opt-out
The following items will be asked whether they are required when the project is initialized:
- Sample Application Code
- Dockerfile
- E2E Testing
- Observability feature
## Setup
```sh
# enable git hooks and corepack
$ npm run setup
# install deps
$ pnpm i
# create ".env" and modifying environment variables
$ cp .env.sample .env
```
## Development
```sh
$ pnpm dev
```
## Production
```sh
$ pnpm db:up
$ pnpm build
$ pnpm start
```
### Observability
This template uses Jaeger as a tracing platform. The local environment doesn't require `TRACE_EXPORTER_URL` environment value.
```sh
# open Jaeger
$ open http://localhost:16686/
```
## Test
### Unit Test
```sh
$ pnpm test
$ pnpm test:watch
```
### E2E Test
A build task must be executed before running tests to bypass JWT logic.
```sh
# 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
$ pnpm test:e2e
# execute with UI
$ pnpm test:e2e:ui
```
## Database
```sh
# create new migration
$ pnpm db:migrate
# reset the DB
$ pnpm db:reset
# view the database items
$ pnpm db:studio
```
## Links
- [Database ER diagram](/prisma/ERD.md)
- [Web App Template](https://hiroppy.github.io/web-app-template/)