webapp-template
webapp-template copied to clipboard
SvelteKit x Tailwind CSS x Supabase x Turborepo (pnpm)
Next.js Template
Monorepo template for creating a web service with Next.js.
Uses
- Turborepo x pnpm
- Prettier / ESLint (w/ eslint-plugin-import)
- lint-staged / husky
- Renovate (w/ renovate-approve)
- GitHub Actions (Linting + Formatting)
- Execute
eslint --fix
andprettier
when saving with VS Code
Apps and Packages
-
Apps
-
nhost
:
Nhost dev server for prod/test server migration -
mockup
: [Demo]
A starting point for building a static site. -
storybook
: [Demo]
Storybook forapps/web
. -
web
: [Demo]
A starting point for building a Next.js application.
Next.js x Tailwind CSS (w/ TypeScript)
Page Transition (react-transition-group x GSAP)
pathpida / Jotai
Nhost (w/ Apollo Client x GraphQL Code Generator)
-
-
Packages
-
constatns
: As the name implies -
eslint-preset
: The base preset for ESLint
inc.eslint-config-next
/eslint-config-prettier
/eslint-plugin-import
-
generated
: The files output from graphql-codegen -
lintstagedrc
: The settings for applying husky x lint-staged in each JS/TS file -
pathtest-utils
: The utilities used inapps/mockup
for URL checking -
script-modules
: static site script used inapps/mockup
-
tailwind-preset
: The base preset for Tailwind CSS
inc.postcss.config.cjs
/@tailwindcss/typography
-
tsconfig
: The basetsconfig.json
-
types
: Various types -
utils
: Simple utilities
-
VS Code Extensions (Recommend)
Commands
pnpm i # Resolve dependency packages and prepare .env files
# Then set up /.env
pnpm build # Build all apps and packages
pnpm dev # Set up file monitoring builds and local servers for development
pnpm lint # eslint + prettier --check
pnpm format # eslint --fix + prettier --write
pnpm clean # rm .turbo, node_module and generated files
List of listening port numbers
-
1337
:apps/nhost/
- Hasura-
* (auto)
: GraphQL Endpoint -
* (auto)
: MailHog
-
-
3000
:apps/web/
- Next.js application -
6006
:apps/storybook/
- Storybook -
8000
:apps/mockup/
- Static site -
49160
:apps/mockup/
- Express server
Registering environment variables for GitHub / Vercel
If you need to prepare GitHub / Vercel environment, you need to set environment variables (.env
items) in each service.
Deploy to Vercel
ref: https://vercel.com/docs/concepts/git/monorepos#setup-turborepo
Make the following settings in Vercel's Project Settings
.
※Change the <mockup/storybook/web> parts below
-
General
>Build
&Development Settings
-
BUILD COMMAND
:cd ../.. && pnpm exec turbo run build --scope=<mockup/storybook/web> --include-dependencies --no-deps
-
OUTPUT DIRECTORY
:- for
mockup
:public
- for
storybook
:storybook-static
- for
-
-
General
>Root Directory
:apps/<mockup/storybook/web>
- [x] Include source files outside of the Root Directory in the Build Step.
How to check for dependent packages
# If graphviz is not installed
# ref: https://graphviz.org/download/
brew install graphviz
# Output a graph to check dependencies
pnpm build -- --graph
Use renovate on GitHub
Give Renovate and renovate-approve permission to operate the repository.
Then change your GitHub settings as follows.
Settings
> Branches
> Branch protection rule
- Branch name pattern:
main
- Protect matching branches:
- [x] Require a pull request before merging
- [x] Require approvals:
[1]
- [x] Require approvals:
- [x] Require status checks to pass before merging
- Status checks that are required:
-
Build (Node 16 on ubuntu-latest)
-
Vercel – <project-name-on-vercel>
- ...
-
- Status checks that are required:
- [x] Require a pull request before merging