feat(create-vite): set default title in index.html to project name #20519

Copilot · 2025-07-31T17:39:22Z

This PR implements the feature requested in #20111 to set the default title in index.html to the project name instead of framework-specific titles like "Vite + React", "Vite + Vue", etc.

Problem

Currently, all Vite projects created with create-vite have generic titles in their index.html files that reflect the framework used (e.g., "Vite + React", "Vite + Vue"). This creates several issues:

When working with multiple projects, browser tabs all show similar generic titles
Developers need to manually change the title in every new project
The title doesn't immediately identify the specific project

Solution

This PR modifies the create-vite scaffolding process to automatically replace the <title> content with the project name provided by the user using regex pattern matching.

Implementation Details

Template Preservation: All template index.html files maintain their original framework-specific titles
Dynamic Replacement: Modified the write function in create-vite/src/index.ts to detect index.html files and use regex (/<title>.*?<\/title>/) to replace the title content with the project name
Universal Application: The title replacement now applies to ALL templates including lit templates
Test Coverage: Existing test validates the title replacement functionality

Before/After Example

Before:

npm create vite@latest my-awesome-app --template react
# Results in: <title>Vite + React</title>

npm create vite@latest my-lit-app --template lit
# Results in: <title>Vite + Lit</title>

After:

npm create vite@latest my-awesome-app --template react  
# Results in: <title>my-awesome-app</title>

npm create vite@latest my-lit-app --template lit
# Results in: <title>my-lit-app</title>

Templates Affected

All 16 template variants now get dynamic title replacement:

template-react, template-react-ts
template-vue, template-vue-ts
template-svelte, template-svelte-ts
template-vanilla, template-vanilla-ts
template-preact, template-preact-ts
template-qwik, template-qwik-ts
template-solid, template-solid-ts
template-lit, template-lit-ts

Backwards Compatibility

This change is fully backwards compatible - it only affects newly created projects and doesn't impact existing functionality or workflows.

Fixes #20111

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

packages/create-vite/template-lit-ts/index.html

packages/create-vite/src/index.ts

packages/create-vite/__tests__/cli.spec.ts

…d clean up test Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

packages/create-vite/template-preact-ts/index.html

… titles Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

packages/create-vite/src/index.ts

… all templates Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

Copilot · 2025-08-01T07:32:34Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

vite.dev
- Triggering command: /home/REDACTED/.cache/playwright-bin/chromium_headless_shell-1181/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMediaControls,HttpsUpgrades,ImprovedCookieControls,LazyFrameLoading,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --force-color-profile=srgb --metrics-recording-only --no-first-run --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --disable-search-engine-choice-screen --unsafely-disable-devtools-self-xss-warnings --edge-skip-compat-layer-relaunch --enable-automation --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --no-sandbox --disable-setuid-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-L6MaZp --remote-debugging-pipe --no-startup-window (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)
workers.cloudflare.com
- Triggering command: node (vitest 3) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

packages/create-vite/src/index.ts

Initial plan

3fc8c19

Copilot AI assigned Copilot and sapphi-red Jul 31, 2025

Copilot started work on behalf of sapphi-red July 31, 2025 17:39 View session

Implement feature: Set default title in index.html to project name

d6a42c4

Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Implement @vitejs/vite/issues/20111~~ feat(create-vite): set default title in index.html to project name Jul 31, 2025

Copilot AI requested a review from sapphi-red July 31, 2025 17:56

Copilot finished work on behalf of sapphi-red July 31, 2025 17:56

sapphi-red requested changes Aug 1, 2025

View reviewed changes

packages/create-vite/template-lit-ts/index.html Outdated Show resolved Hide resolved

packages/create-vite/src/index.ts Outdated Show resolved Hide resolved

packages/create-vite/__tests__/cli.spec.ts Outdated Show resolved Hide resolved

Copilot started work on behalf of sapphi-red August 1, 2025 06:31 View session

Address PR feedback: revert lit templates, improve code structure, an…

66d17b7

…d clean up test Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

Copilot AI changed the title ~~feat(create-vite): set default title in index.html to project name~~ feat(create-vite): set default title in index.html to project name (excluding lit templates) Aug 1, 2025

Copilot AI requested a review from sapphi-red August 1, 2025 06:40

Copilot finished work on behalf of sapphi-red August 1, 2025 06:40

sapphi-red requested changes Aug 1, 2025

View reviewed changes

packages/create-vite/template-preact-ts/index.html Outdated Show resolved Hide resolved

Copilot started work on behalf of sapphi-red August 1, 2025 07:11 View session

Use regex to replace title content while preserving original template…

4845552

… titles Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

Copilot AI changed the title ~~feat(create-vite): set default title in index.html to project name (excluding lit templates)~~ feat(create-vite): set default title in index.html to project name using regex replacement Aug 1, 2025

Copilot AI requested a review from sapphi-red August 1, 2025 07:22

Copilot finished work on behalf of sapphi-red August 1, 2025 07:22

sapphi-red requested changes Aug 1, 2025

View reviewed changes

packages/create-vite/src/index.ts Outdated Show resolved Hide resolved

Copilot started work on behalf of sapphi-red August 1, 2025 07:24 View session

Remove special handling for lit templates, apply title replacement to…

0cc09c2

… all templates Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

Copilot AI requested a review from sapphi-red August 1, 2025 07:32

Copilot finished work on behalf of sapphi-red August 1, 2025 07:32

sapphi-red reviewed Aug 1, 2025

View reviewed changes

packages/create-vite/src/index.ts Outdated Show resolved Hide resolved

update

62e970a

sapphi-red changed the title ~~feat(create-vite): set default title in index.html to project name using regex replacement~~ feat(create-vite): set default title in index.html to project name Aug 1, 2025

sapphi-red added the feat: create-vite create-vite package label Aug 1, 2025

sapphi-red added the p2-nice-to-have Not breaking anything but nice to have (priority) label Aug 1, 2025

sapphi-red marked this pull request as ready for review August 1, 2025 07:39

sapphi-red approved these changes Aug 1, 2025

View reviewed changes

bluwy approved these changes Aug 5, 2025

View reviewed changes

sapphi-red added this to the 7.2 milestone Aug 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(create-vite): set default title in index.html to project name #20519

feat(create-vite): set default title in index.html to project name #20519

Uh oh!

Copilot AI commented Jul 31, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Aug 1, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(create-vite): set default title in index.html to project name #20519

Are you sure you want to change the base?

feat(create-vite): set default title in index.html to project name #20519

Uh oh!

Conversation

Copilot AI commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Implementation Details

Before/After Example

Templates Affected

Backwards Compatibility

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Aug 1, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Jul 31, 2025 •

edited

Loading