frontend-buildwww-vite

Automate multi-target frontend builds with Vite and TypeScript.

20|3|Updated Aug 13, 2023
One-click install
npx skills add https://github.com/duranserkan/DRN-Project --skill frontend-buildwww-vite
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-buildwww-vite
Source: https://github.com/duranserkan/DRN-Project/tree/main/.agent/skills/frontend-buildwww-vite
Command: npx skills add https://github.com/duranserkan/DRN-Project --skill frontend-buildwww-vite

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to configuring and coordinating multi-target frontend builds using Vite and TypeScript, ensuring consistent output directories and clear entry-point management.

Core Features & Use Cases

  • Multi-target build setup for app, htmx, and bootstrap with dedicated output directories
  • TypeScript path alias configuration and centralized build configuration
  • Built assets compatible with Razor pages and shared library usage
  • Environment-driven build selection via BUILD_TYPE and corresponding npm scripts

Quick Start

Configure the build by selecting the target with BUILD_TYPE and run the appropriate npm script to produce the wwwroot assets.

Frequently Asked Questions about frontend-buildwww-vite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a Vite build for multiple targets like app and htmx?

Multi-target Vite builds are configured by setting the BUILD_TYPE environment variable and running the corresponding npm script to produce dedicated output directories for app, htmx, and bootstrap assets.

What is the best way to set up TypeScript path aliasing in a Vite project?

TypeScript path aliasing in a Vite project is managed through centralized build configuration, ensuring correct module resolution and clear entry-point management for appPreload and appPostload outputs.

Does Vite work with Razor pages for frontend asset bundling?

Yes, Vite works with Razor pages by generating built assets and manifests that are directly compatible with Razor page integration and shared library usage across the frontend project.

Why do I need manifest generation in a multi-target Vite build?

Manifest generation in a multi-target Vite build is needed to map original asset file names to their hashed, bundled versions, allowing backend frameworks to reference the correct output files.

Can I use environment variables to select specific build outputs in Vite?

Yes, you can use environment variables to select specific build outputs in Vite by assigning the target type to BUILD_TYPE, which triggers the appropriate npm script to build app, htmx, or bootstrap targets.

What are the limitations of using Vite for multi-target frontend builds?

Multi-target Vite builds require strict adherence to specified configuration and output constraints via vite.config.js, meaning deviations in entry-point management or path aliasing may break the structured orchestration.