skills.rest
remoodle
remoodleOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vite

Configure Vite build tooling for frontend development and SSR.

2|Updated Oct 5, 2024
Search Tags:#frontend#configuration#plugin#vite#ssr#build tool
One-click install
npx skills add https://github.com/remoodle/heresy --skill vite-remoodle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite
Source: https://github.com/remoodle/heresy/tree/main/src/calendar/.agents/skills/vite
Command: npx skills add https://github.com/remoodle/heresy --skill vite-remoodle

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you understand and configure Vite, a modern frontend build tool, for efficient development and optimized production builds.

Core Features & Use Cases

  • Configuration: Learn to set up vite.config.ts for various project needs.
  • Plugin API: Understand how to leverage and create Vite plugins.
  • Build & SSR: Configure Vite for library builds, Server-Side Rendering (SSR), and multi-page applications.
  • Use Case: You need to configure a Vite project to use a specific alias for your source directory and set up a proxy for API requests during development.

Quick Start

Configure Vite to use TypeScript and set the build output directory to 'dist'.

Frequently Asked Questions about vite

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

FAQPage Schema
How do I configure Vite for a frontend project using TypeScript?▼

Configure Vite by creating a vite.config.ts file to define project settings like build output directories and aliases. This setup ensures efficient development and optimized production builds for your frontend application.

How do I set up a proxy for API requests in Vite during development?▼

Set up an API proxy in Vite by configuring the server.proxy option within your vite.config.ts file. This allows you to route specific API requests to a backend server during local development.

How does Vite handle Server-Side Rendering (SSR) and library mode builds?▼

Vite handles SSR by configuring the SSR build target to externalize dependencies, and handles library mode by adjusting build configurations to output distributable component libraries instead of standard applications.

Can I create custom Vite plugins and what hooks are available?▼

You can create custom Vite plugins by defining objects with Vite-specific hooks that tap into the build pipeline. These hooks allow you to transform code and extend functionality for your frontend build.

What is the Vite 8 migration to Rolldown bundler and Oxc transformer?▼

The Vite 8 migration involves transitioning the underlying bundler to Rolldown and the transformer to Oxc. This upgrade aims to improve build performance and compatibility within the frontend build tool ecosystem.

How do I use glob imports and environment variables in Vite?▼

Use glob imports in Vite to dynamically import multiple modules from the file system, and access environment variables via the special env object to manage configuration across different deployment environments.

Related Skills

Explore More Software Engineering Skills→
dang0705dang0705

vite

Configure and utilize Vite for frontend builds, SSR, and plugins.

Community
Advanced
yoanbernabeuyoanbernabeu
34

slidev-deployment

Deploy Slidev presentations to GitHub Pages, Netlify, Vercel, or Docker.

Community
Advanced
hakushunhakushun

vite

Configure Vite projects with TypeScript, plugins, SSR, and Rolldown migration.

Community
Advanced
jholhewresjholhewres
3

bundler-analyze

Analyze JavaScript bundle sizes for Vite and Webpack projects.

Community
Basic