🐩 A boilerplate for HTML5, Vue, TypeScript, Vite, Vitest, and Render.
🌈 Live Demo - The server application is here.
Prerequisites:
- Node.js v20
- PNPM v8
Get started with Vue Starter.
$ pnpm install
# dev server
$ pnpm dev
# mock server
$ pnpm mock
Follow steps to execute this boilerplate.
$ pnpm install
$ pnpm dev
$ pnpm mock
$ pnpm build
$ pnpm preview
$ pnpm lint
$ pnpm check
$ pnpm test
$ pnpm e2e
This seed repository provides the following features:
- ---------- Essentials ----------
- Vue - User Interface Framework
- Router - Routing
- Routes - File-based Routing
- Storer - State Management
- Formor - Form Validation
- Valibot - Schema Validation
- Localer - Internationalization and Localization
- Use - Composition Utilities
- Qrcode Image - QR Code Generation
- Lodash - JavaScript Utilities
- Date Fns - Date Utilities
- UnoCSS - CSS Utilities
- Iconify - Icon Utilities
- Tiptap Editor - Rich Text Editor Utilities
- D3 - Data Visualization Utilities
- ---------- Tools ----------
- Vite - Bundler
- TypeScript - JavaScript with Syntax for Types
- Sassy CSS - CSS Extension
- ESLint - Linter
- Prettier - Formatter
- Vitest - Test Runner
- Playwright - Test Automation
- ---------- Environments ----------
- Node.js - JavaScript Runtime Environment
- Pnpm - Package Manager
- Caddy - Web Server
- Docker - Containerized Application Development
- GitHub Actions - Continuous Integration and Delivery
- Render - Cloud Application Hosting
Control the environment.
Set your local environment variables.
// vite.config.ts
define: envify({
API_URL: process.env.API_URL || '',
}),
Add environment secrets to the GitHub Actions workflow.
DEPLOY_HOOK=xxx
Add environment variables to the Render build.
API_URL=xxx
The structure follows the LIFT Guidelines.
.
├── .github/workflows/ci.yml
├── api
├── e2e
├── public
├── src
│ ├── assets
│ ├── components
│ ├── composables
│ ├── layouts
│ ├── locales
│ ├── middleware
│ ├── plugins
│ ├── routes
│ ├── utilities
│ ├── App.vue
│ ├── main.ts
│ └── shims.d.ts
├── ui
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .prettierrc
├── Caddyfile
├── docker-compose.yml
├── Dockerfile
├── index.html
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── README.md
├── render.yaml
├── tsconfig.json
└── vite.config.ts