Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Jul 31, 2025

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

  1. Template Preservation: All template index.html files maintain their original framework-specific titles
  2. 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
  3. Universal Application: The title replacement now applies to ALL templates including lit templates
  4. 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.

@Copilot 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 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
@Copilot 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 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
@Copilot 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 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
Copy link
Contributor Author

Copilot AI commented Aug 1, 2025

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:

@Copilot 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 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 sapphi-red added the feat: create-vite create-vite package label Aug 1, 2025
@sapphi-red sapphi-red added the p2-nice-to-have Not breaking anything but nice to have (priority) label Aug 1, 2025
@sapphi-red sapphi-red marked this pull request as ready for review August 1, 2025 07:39
@sapphi-red sapphi-red added this to the 7.2 milestone Aug 5, 2025
@github-project-automation github-project-automation bot moved this to Discussing in Team Board Aug 20, 2025
@sapphi-red sapphi-red moved this from Discussing to Approved in Team Board Aug 20, 2025
@sapphi-red sapphi-red removed this from the 7.2 milestone Sep 22, 2025
@sapphi-red sapphi-red merged commit b178f90 into main Sep 22, 2025
21 checks passed
@sapphi-red sapphi-red deleted the copilot/fix-15397ff1-c3a1-4b95-a80e-83c976f6e1e6 branch September 22, 2025 11:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: create-vite create-vite package p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
Status: Approved
Development

Successfully merging this pull request may close these issues.

Set the default title in index.html to the project name.
3 participants