Hiro website

Vite + Vue app for Hiro website.

• ESLint is used for linting and Prettier is used for code formatting.
• Vue Router is included for multi-page apps, remove it if not needed.
• Helm charts for Kubernetes are also included.
• PostCSS is used for CSS processing and includes CSS Nesting support plugin.

Recommended IDE Setup

VSCode + Volar (and disable Vetur). JetBrains IDEs are also recommended, but make sure to use Vue Language Server (Volar). If you use Vim or Emacs, you probably already know what you're doing.

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize Vite configuration

See Vite Configuration Reference.

Dockerfile

Dockerfile is included for building a Docker NGINX image with the app production build. Basic configuration is included in conf folder, but it's recommended to customize it for your needs.

GitHub Actions

GitHub Actions workflow is included for building Docker image and pushing it to GitHub Container Registry, and subsequently publishing Helm charts to GitHub Pages.

Project Setup

Node 20 or higher is required. Node installation is recommended via nvm.

If you are interested in GitHub Actions workflow that works with this project, you need to set up GitHub Variables for your repository at https://github.com/<workspace>/<project>/settings/variables/actions:

• DOCKER_IMAGE_NAME - The name of the Docker image for uploading to the repository. Format: <workspace>/<project>

Also gh-pages branch should be created for publishing Helm charts. To create empty gh-pages branch, run the following commands:

git switch --orphan gh-pages
git commit --allow-empty -m "gh-pages branch created"
git push -u origin gh-pages

Project is set up with pnpm. Also, project is Corepack-ready, it's usually already included in modern Node.js versions. So, there is no need to install pnpm globally, just run corepack enable and pnpm install.

corepack enable
pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Lint with ESLint

pnpm lint

Format with Prettier

pnpm format

Neither the content of the website nor the design was done by the frontend team.