franciscokloganb / vitesse-enterprise

Vitesse Enterprise Starter

Demonstrations

Live on Netlify
Live on Vercel
Playground on Stackblitz

Features

• ⚡️ Vue 3

  • 🏃 Vite 4, pnpm, esbuild

• 🗂 File based routing

• 📦 Components auto importing

• 🔎 Component previews

• 🍍 State Management via Pinia

• 📑 Layout system

• 📲 PWA

• 🎨 UnoCSS

• 😃 Use icons from any icon sets with classes

• 🌍 I18n ready

• 🗒 Markdown Support

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing

• 🖨 Static-site generation (SSG) via vite-ssg

• 🦾 TypeScript, of course

• 🦔 Critical CSS via critters

• 🖌️ SCSS support

• 👮🏻 Format and Lint with VSCode and CLI

  • 💾 Eslint, Import Sort*, Markdownlint, Prettier and, Stylelint.

• 🤖 Standards checking with pre-commit hooks. Test validation on pre-push with Husky

• ⚙️ E2E testing with Cypress

• 📤 GitHub Actions

• ☁️ Deploy on Netlify, zero-config - See Netlify Deployment

• ☁️ Deploy on Vercel - See Vercel Deployment

*CLI only. VSCode plugin does not support configuration files.

Pre-packed

UI Frameworks

• UnoCSS - The instant on-demand atomic CSS engine.

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• Pure CSS Icons via UnoCSS

Plugins

• Vue Router
  • vite-plugin-pages
    • File system based routing
  • vite-plugin-vue-layouts
    • Layouts for pages
• Pinia
  • Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components
  • Components auto import
• unplugin-auto-import
  • Directly use Vue Composition API and others without importing
• unplugin-vue-macros
  • Explore and extend more macros and syntax sugar to Vue.
• vite-plugin-pwa
  • PWA
• vite-plugin-vue-component-preview
  • Preview single component in VSCode
• vite-plugin-vue-markdown
  • Markdown as components / components in Markdown
  • markdown-it-shiki
    • Shiki for syntax highlighting
• Vue I18n
  • unplugin-vue-i18n
• VueUse
  • Collection of useful composition APIs
• vite-ssg-sitemap
  • Sitemap generator
• @vueuse/head
  • Manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint

Dev tools

• Cypress - E2E Testing
• Netlify - zero-config deployment
• PNPM - fast, disk space efficient package manager
• Recommended VSCode extensions - Near IDE experience on VSCode
• Typescript
• Vitest - Unit testing powered by Vite
• Vite-ssg - Static-site generation
  • Critters - Critical CSS

Developer Experience

• Alias @ to <rootDir>
• Alias ~ to <rootDir>/src a.k.a. <srcDir>
• Predefined and fully typed global variables:
  • VITE_APP_VERSION is read from package.json version at build time
  • VITE_APP_BUILD_EPOCH is populated as new Date().getTime() at build time

Variations

This template is strongly opinionated with my personal preferences and feature sets. It is a fork of the original template created by @antfu and also takes inspiration from vitesse-stackter made by @shamscorner.

For an up-to-date list of official and community contributions to the vitesse ecosystem, we recommend checking the official repository's variations section.

Try it now

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit FranciscoKloganB/vitesse-enterprise my-vitesse-enterprise-app
cd my-vitesse-enterprise-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Checklist

When you use this template, try follow the checklist to update your info properly

• Remove .github/funding.yml file which contains the funding info
• Remove vercel.json or netlify.yml depending on your deployment provider.
• Rename name field in package.json
• Rename projectId field in cypress.json
• Change the author name in LICENSE
• Change the title in App.vue
• Change the hostname in vite.config.ts
• Change the favicon in public
• Clean up the READMEs and remove routes
• Bump project dependencies (e.g.: dependabot) - We update them on a best-effort-basis, every now and then.

Usage

Development

Run and visit http://localhost:4000

pnpm dev

Code formatting and linting

pnpm lint

Testing

pnpm run:test

Build for production

# Alias for "run-s prebuild 'build:prod:ssg'"
pnpm run:build
# Other builds
# Ouputs files to dist folder. Ready to be served in SPA mode.
pnpm build:prod
# Outputs files to dist folder which passed through the Vite SSG pipeline. Ready to be served.
pnpm build:prod:ssg

Previewing

# Runs project locally with files from dist folder
pnpm run:preview
# Can also run locally with HTTPS (may require sudo) - requires available dist/ folder
pnpm preview:https

Separation of Concerns

• Create separate folder for each module and place them under /src folder
• The following folders are auto imported within each module
  • components/
  • modules/
  • pages/
  • stores/
• Place all the layouts in the core/layouts folder
• Place all the custom styles in the core/assets/styles folder and import them into main.{css,scss}

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Docker Production Build

First, build the vitesse image by opening the terminal in the project's root directory.

# One of either
DOCKER_BUILDKIT=1 docker build . -t vitesse:latest
# Docker Buildx is a CLI plugin to extend docker command and support BuildKit without the env var.
docker buildx build . -t vitesse:latest

Run the image and specify port mapping with the -p flag.

docker run --rm -it -p 8080:80 vitesse:latest

Deploy on Vercel

Vercel has some short-commings regarding pnpm based projects. After creating and importing the project on Vercel dashboard you will need to navigate to the project settings and override the Build Command and Install Command respectively, with the following bash commands:

  # Build Command
  npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run:build
  # Install Command
  npm i -g pnpm && pnpm -i

Alternatevely, for zero configuration on import you need to alter package.json scripts to have a build and install entries with the commands above.

Why

On top of what was mentioned by Anthony Fu in the original post, working in conjunction with others often requires strict styling rules. Creating a seamless developer experience across VSCode, CLI and CI/CD consumes time. Vue, Vite and, Vitesse, are amazing tools for web developmen and are now my go to choices for development. To avoid repeating myself over and over again for to get this configurations going, I decided to fork Vitesse repository and create a baseline project for my own (or other people) use, enabling us to be vite. Pun intended.

Feedback

If you notice any bug, inconsistency or change for improvement, feel free to either create an issue so that I may try to fix it later or to propose a pull request with the changes.

vitesse-enterprise's Issues

issue: package.json build for production misleading

Description

As a user
I want to be reassured that my package.json#build script is also a production build and that package.json#build:prod is an alternative that adds compilation for server side rendering
so I can use either one without bias or fear of loss of performance.

Acceptance criteria

Scenario user reads package.json
Given a set of scripts
Then the build method should be named build:prod
And the build:prod method should be named build:prod:ssr

Additional notes

Files that depend on this scripts, e.g.: README, CI/CD files and, others, might need to be updated.

Add unplug-vue-macros and other updates from vitesse

Thanks for sharing this template. We're finding it very helpful.

There have been a couple of updates to vitesse in the last year. Would you be able to add them?

• Add unplug-vue-macros packlage. See: https://github.com/antfu/vitesse/blob/75e627165659d615148a69fa2f43156e23f34ab8/package.json#L52 and https://vue-macros.sxzz.moe/
• Add vite-plugin-vue-component-preview package. See: https://github.com/antfu/vitesse/blob/75e627165659d615148a69fa2f43156e23f34ab8/package.json#L57
• Add starter Dockerfile. See: https://github.com/antfu/vitesse/blob/main/Dockerfile

I think that's all the changes... I may have missed something though

404 not found when using base prefix

Context (Environment)

I set a base url prefix in vite.config.ts

export default defineConfig({
  base: '/test/',
  ...
})

I ran pnpm dev but the page http://localhost:4000/test/ is a 404 not found
I can't access to the page until I hard reload (cmd + maj + R) the page.
Same for hot-reload, after each I'm redirecting to the 404 page, and I have to hard reload.

feat(StackBlitz): ✨ Add playground

Description

This is feature what allow us to code without ide

Add folder aliases

Hey,

Well done on on setting up an enterprise structure; this is similar to how I build my projects too.

I see in your "nice to haves" you mentioned folder aliasing. You might want to consider Alias HQ (one of mine) to expand on this.

You set up your aliases once only in tsconfig.json then choose an integration for each toolchain, for example Vite:

import { defineConfig } from 'vite'
import hq from 'alias-hq'

export default defineConfig({
  resolve: {
    alias: hq.get('rollup')
  }
})

Anyway. Hope that's helpful.

Multiple builds / bundles

Great work @FranciscoKloganB!

I need to do 2 different builds for my current project (from the same codebase). Each build is just a different combination of modules. Do you have any suggestions on the best way to set that up?

Thanks in advance

bug: unable to run component tests in gitlab ci

Context (Environment)

When in Gitlab pipeline component-tests seem to initiate but then are stuck at the start of the process, eventually, timing out after 15 minutes. Consequently the pipeline is currently only executing e2e-tests.

Expected Behavior

It would be expected for Component tests to run smoothly on the GitLab CI/CD pipeline just as they do on GitHub Actions.

Current Behavior

Component tests do not execute. Tried multiple methods and none seemed to work.

Steps to Reproduce

1. Import this public repository onto your GitLab account
2. Go to the project's dashboard and open the new project
3. On the project menu, select CI/CD > Editor, make and commit a change
4. See how the pipeline gets stuck when trying to run component tests

Possible Solution

Do not know any but the Yarn implementation seen in this repository seems to work: https://github.com/Uninen/vite-ts-tailwind-starter/blob/main/.gitlab-ci.yml