web-app-template - GitLite

KO | EN

gitlite — search

#python #ai #typescript #golang #machine-learning #rust #java #windows #kubernetes #vue #security #pytorch #ios #openai

web-app-template

(★ 171)

A minimal web service template 🎃 "npx create-app-foundation@latest" !

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
  - claude-code-review.yml
  - claude.yml
  - internal.yml
  - site.yml
  - update-internal-e2e.yml
- - package.json
  - pnpm-lock.yaml
  - README.md
- - common-processing.mjs
  - db.mjs
  - format.mjs
  - init.mjs
  - package-json.mjs
  - utils.mjs
- - package-lock.json
  - package.json
- - all-opt-out.test.mjs
  - Basetest.mjs
  - common.test.mjs
  - common.test.mjs.snapshot
  - makefile
  - no-docker.test.mjs
  - no-docker.test.mjs.snapshot
  - no-e2e.test.mjs
  - no-e2e.test.mjs.snapshot
  - no-otel.test.mjs
  - no-otel.test.mjs.snapshot
  - no-sample-code.test.mjs
  - no-sample-code.test.mjs.snapshot
  - no-stripe.test.mjs
  - no-stripe.test.mjs.snapshot
- .gitignore
- README.md
- extensions.json
- mcp.json
- settings.json
- - itemPage.test.ts
  - mePage.test.ts
  - notFoundPage.test.ts
  - signInPage.test.ts
  - topPage.test.ts
- - app.ts
  - getRandomPort.ts
  - prisma.ts
  - users.ts
  - waitForHealth.ts
- - auth.test.ts
  - item.test.ts
  - user.test.ts
- - Base.ts
  - ItemPage.ts
  - MePage.ts
  - NotFoundPage.ts
  - SignInPage.ts
  - TopPage.ts
- - auth.ts
- dummyUsers.ts
- fixtures.ts
- - item.prisma
  - schema.prisma
  - user.prisma
- .gitkeep
- - error.tsx
  - favicon.ico
  - global-error.tsx
  - globals.css
  - globals.d.ts
  - layout.tsx
  - not-found.tsx
  - opengraph-image.tsx
  - robots.txt
- - node.ts
- instrumentation.ts
- proxy.test.ts
- proxy.ts
- db.setup.ts
- vitest.helper.ts
- vitest.setup.ts
.dockerignore
.editorconfig
.env.sample
.env.test
.gitignore
.node-version
.npmrc
biome.json
compose.yml
Dockerfile
env.ts
knip.config.ts
lefthook.yml
LICENSE
next.config.ts
otel-collector-config.yml
package.json
playwright.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
postcss.config.mjs
prisma.config.ts
README.md
renovate.json
tsconfig.json
vitest.config.ts

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>️️A minimal template for web app 🎃</h1>
  <img src=".internal/site/src/public/images/icon.png" alt="icon" width="120">
  <p>From Zero to Service, Build with Best Practices, Minimal Code, and Essential Tools</p>
  <br />
  <a href="https://hiroppy.github.io/web-app-template/"target="_blank" >📜 Read The Docs 📜</a>
  <br />
  <br />
</div>

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**     | <div align="center"><img src=".internal/site/src/public/images/libs/nextjs.png" alt="nextjs" width="44"><br>Next.js</div>                  | <div align="center"><img src=".internal/site/src/public/images/libs/tailwind.png" alt="tailwind" width="44"><br>Tailwind CSS</div>                   | <div align="center"><img src=".internal/site/src/public/images/libs/next-auth.png" alt="next-auth" width="44"><br>NextAuth.js</div>   | <div align="center"><img src=".internal/site/src/public/images/libs/react-hook-form.png" alt="react-hook-form" width="44"><br>React Hook Form</div> |
|             | <div align="center"><img src=".internal/site/src/public/images/libs/zod.svg" alt="zod" width="44"><br>Zod </div>                           | <div align="center"><img src=".internal/site/src/public/images/libs/otel.png" alt="otel" width="44"><br>OpenTelemetry</div>                          | <div align="center"><img src=".internal/site/src/public/images/libs/prisma.png" alt="prisma" width="44"><br>Prisma</div>              | <div align="center"><img src=".internal/site/src/public/images/libs/postgresql.png" alt="postgresql" width="44"><br>PostgreSQL</div>                |
|             | <div align="center"><img src=".internal/site/src/public/images/libs/stripe.png" alt="stripe" width="44"><br>Stripe</div>                   |                                                                                                                                                      |                                                                                                                                       |
|             |                                                                                                                                            |                                                                                                                                                      |                                                                                                                                       |
| **Tools**   | <div align="center"><img src=".internal/site/src/public/images/libs/typescript.png" alt="typescirpt" width="44"><br>TypeScript</div>       | <div align="center"><img src=".internal/site/src/public/images/libs/pnpm.svg" alt="pnpm" width="44"><br>pnpm</div>                                   | <div align="center"><img src=".internal/site/src/public/images/libs/biome.png" alt="biome" width="44"><br>Biome </div>                | <div align="center"><img src=".internal/site/src/public/images/libs/prettier.png" alt="prettier" width="44"><br> Prettier</div>                     |
|             | <div align="center"><img src=".internal/site/src/public/images/libs/knip.png" alt="knip" width="44"><br>Knip</div>                         | <div align="center"><img src=".internal/site/src/public/images/libs/editorconfig.png" alt="editorconfig" width="44"><br> EditorConfig </div>         | <div align="center"><img src=".internal/site/src/public/images/libs/lefthook.png" alt="lefthook" width="44"><br> lefthook</div>       | <div align="center"><img src=".internal/site/src/public/images/libs/docker.png" alt="docker" width="44"><br> Docker </div>                          |
|             |                                                                                                                                            |                                                                                                                                                      |                                                                                                                                       |
| **Testing** | <div align="center"><img src=".internal/site/src/public/images/libs/vitest.png" alt="vitest" width="44"><br> Vitest</div>                  | <div align="center"><img src=".internal/site/src/public/images/libs/testing-library.png" alt="testing-library" width="44"><br> Testing Library</div> | <div align="center"><img src=".internal/site/src/public/images/libs/playwright.png" alt="playwright" width="44"><br> Playwright</div> | <div align="center"><img src=".internal/site/src/public/images/libs/testcontainers.png" alt="testcontainers" width="44"><br> Testcontainers</div>   |
|             |                                                                                                                                            |                                                                                                                                                      |
| **Others**  | <div align="center"><img src=".internal/site/src/public/images/libs/github-actions.png" alt="actions" width="44"><br> GitHub Actions</div> | <div align="center"><img src=".internal/site/src/public/images/libs/renovate.png" alt="renovate" width="44"><br> Renovate</div>                      | <div align="center"><img src=".internal/site/src/public/images/libs/vscode.png" alt="vscode" width="44"><br> VSCode</div>             |

Please read the features provided by this template first! 👉
[Challenges Solved](https://hiroppy.github.io/web-app-template/introduction/challenges-solved.html)

## 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
- Stripe

## Setup

```sh
# enable corepack
$ npm run setup
# install deps
$ pnpm i
# create ".env" and modify environment variables
$ cp .env.sample .env
```

## Development

```sh
$ pnpm dev
```

### Debugging Stripe

1. Create a subscription [here](https://dashboard.stripe.com/test/products?active=true&create=product&source=product_list) and get `price_id`.

2. Modify the environment variables. The test API key is [here](https://dashboard.stripe.com/test/apikeys).

```sh
STRIPE_SECRET_KEY=
STRIPE_PRICE_ID=
```

3. [Install stripe CLI](https://docs.stripe.com/stripe-cli) to bypass the webhook.

4. Execute the following command in another terminal.

```sh
$ pnpm dev:stripe
```

5. Add webhook signing secret like `whsec_...` from the cli output to env file

```
STRIPE_WEBHOOK_SECRET=whsec_...
```

6. After signing in, you can go to the `http://localhost:3000/me/payment` page to see how to make a payment.

## 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

$ pnpm build

$ pnpm test:e2e
$ pnpm test:e2e:ui
```

## Database

```sh
$ pnpm db:migrate
$ pnpm db:reset
# view the database items
$ pnpm db:studio
```

## Links

- [Web App Template](https://hiroppy.github.io/web-app-template/)