Implement Vite template package with automated build system #1
Conversation
![charliecreates[bot]](https://avatars.githubusercontent.com/in/1140780?s=60&v=4){kind=small}
There was a problem hiding this comment.
- The build script relies on a pre-existing
template/srcwhile the repo deletes sources and ignorestemplate/, causing fatal failures on clean clones/CI. The build must populatetemplate/withsrc/,public/, andindex.html. - Fragile glob copies (
cp *.config.*) withset -ewill fail when no matches exist; make these null-safe. npm run checkusesnpm ciwithout a lockfile insidetemplate/, which will fail; switch tonpm installor provide a lockfile.- Minor robustness issues in test packaging (capture tarball name from
npm pack, add cleanup trap) and overly tight devDependency pinning in the generated template.
Additional notes (1)
- Maintainability |
test-template-pack.sh:7-14
Consider adding a cleanup trap so temporary files are removed even if the test fails midway. This keeps the workspace clean and avoids interference between runs.
Summary of changes
- Added a build script
build-template.shthat prepares atemplate/directory, copies config files, and generatestemplate/_package.jsonplus an emptytemplate/dist/. - Converted the project into an npm-publishable Vite template package by updating
package.json(name, metadata, scripts, files field) and adding test scripts (build-templateandtest-local). - Added a test script
test-template-pack.shthat packs the repo, verifies the packaged contents, installs template deps, builds, and validates an eject workflow. - Updated
.gitignoreto ignoretest-output/, generated tarballs, and the generatedtemplate/directory. - Removed previous app source files under
src/andpublic/to rely on the generatedtemplate/.
build-template.sh
Outdated
| echo "📋 Source files already in template/ - preserving them..." | ||
| # Source files (src/, public/, index.html) are already in template/ | ||
| # Just ensure directory exists | ||
| if [[ ! -d "template/src" ]]; then | ||
| echo "❌ ERROR: template/src not found" | ||
| exit 1 | ||
| fi |
There was a problem hiding this comment.
This script assumes template/src already exists and explicitly exits if it does not. However, the repo deletes src/ and public/ and also ignores template/ via .gitignore. On a clean clone or CI runner, template/src will not exist, so this will always fail. This contradicts the PR summary stating the template is built from source files and eliminates manual sync. You need to copy or generate the app sources (src/, public/, and index.html) into template/ during the build.
Suggestion
Change the build to actually populate template/ from your single source of truth, and remove the hard dependency on pre-existing template/src. For example:
# after creating template directories
rsync -a --delete src/ template/src/
rsync -a --delete public/ template/public/
cp -f index.html template/Alternatively, if the source-of-truth lives elsewhere, point these commands there. Also remove the early exit block that errors on missing template/src. Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.
build-template.sh
Outdated
| cp tsconfig*.json template/ | ||
| cp *.config.* template/ | ||
| cp vite.config.ts template/ |
There was a problem hiding this comment.
Using bare globs with set -e makes the script brittle. If no files match *.config.* (or even tsconfig*.json in some repos), cp will error and the script will exit. This causes false failures depending on the presence of optional configs.
Suggestion
Make glob copies null-safe. For example:
shopt -s nullglob
for f in tsconfig*.json vite.config.* *.config.*; do
[ -e "$f" ] && cp "$f" template/
done
shopt -u nullglobThis avoids failing when optional config files are absent. Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.
build-template.sh
Outdated
| @@ -0,0 +1,66 @@ | |||
| #!/bin/bash | |||
| set -e | |||
There was a problem hiding this comment.
The script currently uses only set -e. Adding -Euo pipefail improves robustness by catching unset variables and pipeline failures, which is especially useful in packaging/build scripts.
Suggestion
Strengthen the shell safety settings:
set -Eeuo pipefailThis makes the build more resilient to subtle failures. Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.
package.json
Outdated
| "files": ["template"], | ||
| "scripts": { | ||
| "build-template": "./build-template.sh", | ||
| "check": "./build-template.sh && cd template && cp _package.json package.json && npm ci && npm run build && npx tsc --noEmit && npm run format --check && rm package.json", |
There was a problem hiding this comment.
check uses npm ci inside template/ right after creating package.json. Without a package-lock.json in template/, npm ci will fail by design. Your test-template-pack.sh uses npm install, which is correct here. The mismatch will break npm run check.
Suggestion
Either switch to npm install in check, or ensure a lockfile exists before running npm ci (e.g., copy a curated package-lock.json into template/). Recommended simple fix:
"check": "./build-template.sh && cd template && cp _package.json package.json && npm install --no-audit --no-fund && npm run build && npx tsc --noEmit && npm run format --check && rm package.json"Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.
test-template-pack.sh
Outdated
| echo "📦 Creating npm package..." | ||
| npm pack .. | ||
| PACKAGE_FILE=$(ls create-vite-eject-vibe-*.tgz) | ||
| echo "✅ Created: $PACKAGE_FILE" |
There was a problem hiding this comment.
Capturing the packed tarball name via ls is fragile (multiple files, locale differences). npm pack already prints the archive name—capture that directly to avoid ambiguity.
Suggestion
Capture the output of npm pack directly:
PACKAGE_FILE=$(npm pack .. | tail -n1)
echo "✅ Created: $PACKAGE_FILE"Then use it with quotes: tar -xzf "$PACKAGE_FILE". Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.
test-template-pack.sh
Outdated
| if [[ ! -f "template/src/App.tsx" ]]; then | ||
| echo "❌ ERROR: template/src/App.tsx missing" | ||
| exit 1 | ||
| fi | ||
|
|
||
| if [[ ! -f "template/index.html" ]]; then | ||
| echo "❌ ERROR: template/index.html missing" | ||
| exit 1 | ||
| fi |
There was a problem hiding this comment.
The test checks for template/src/App.tsx and template/index.html, but the build script never creates or copies them. The current test-local npm script runs the build first, but the build must be responsible for populating these files for a fresh clone/CI. This is currently a broken contract between the build and test steps.
Suggestion
After fixing build-template.sh to populate template/src, template/public, and template/index.html, keep these assertions. If you do not intend to generate sources during build, adjust the test to create the required files before packing—but that defeats the stated goal of automation. Reply with "@CharlieHelps yes please" if you'd like me to add a commit with the coordinated fixes.
build-template.sh
Outdated
| 'prettier': '^3.6.2', | ||
| 'tailwindcss': '^4.0.0', | ||
| 'typescript': '~5.8.3', | ||
| 'vite': '^7.1.0' |
There was a problem hiding this comment.
The devDependency versions in the generated template are very tightly pinned (e.g., "typescript": "~5.8.3"). This increases the risk of install failures if that exact patch is unavailable or unpublished in some registries/mirrors. Templates typically use caret ranges aligned with Vite's official templates to balance stability and availability.
Suggestion
Loosen version ranges to stable caret ranges consistent with Vite templates, e.g. "typescript": "^5.8.0" and similar for related tools. Optionally, source these versions from a single versions map to keep them consistent. Reply with "@CharlieHelps yes please" if you'd like me to add a commit updating the ranges.
|
@CharlieHelps feel free to do a complete rewrite, please update the PR |
Expand this to see my work.
|
- build-template.sh: populate template/ from root src/, public/, index.html; null-safe copying; strict shell flags; generate _package.json with sane caret ranges; add .prettierignore - test-template-pack.sh: deterministic npm pack capture, robust quoting, cleanup trap, end-to-end checks - package.json: CI-safe check script (no lockfile dependency), cleanups; align scripts - add source-of-truth app in src/ and public/vite.svg; link CSS via index.html to satisfy TS noUncheckedSideEffectImports Passes local check and pack tests.
|
Pushed a complete rewrite of the build/test system and updated the PR body. The template now builds from a single source of truth and validates end‑to‑end in CI. What changed
Verification
If you want different dependency ranges or script names, I can adjust quickly. |
- Fixes CI error where npx tsc was resolving to wrong package - Now uses ./node_modules/.bin/tsc to ensure correct TypeScript compiler 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Replace direct tsc/build commands with npm run check - Use npm run test-local for comprehensive template testing - Rename jobs to reflect new template package structure - Fixes CI TypeScript compilation error 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
|
@CharlieHelps check the ci coverage |
Expand this to see my work.
|
|
Coverage status: CI is not collecting or reporting code coverage for this PR.
Open questions
If you confirm the targets and tool, I can add a follow-up PR that introduces a minimal test suite in the template, enables coverage (e.g., vitest --coverage), and uploads an lcov artifact and summary in CI. |
|
@CharlieHelps yes just the hello world of test suites, for best practices so we are setup for success |
Expand this to see my work.
|
… Add Vitest config (vitest.config.ts) and jsdom env\n- Generate test deps/scripts in template _package.json\n- Add src/App.test.tsx (hello-world component test)\n- Run tests in root check script and pack test\n- Keep Prettier passing and CI-safe
|
Added a minimal test suite to the template and wired it into scripts and CI. What changed
Why this fits
Verification
Notes
|
Complete rewrite: self-sufficient build/test system for the Vite template package.
Context
This addresses all review feedback by removing assumptions about pre-existing
template/content and making the build + tests deterministic and CI-safe. The template is now assembled from a single source of truth in the repo and fully validated end‑to‑end vianpm pack.Changes
set -Eeuo pipefailand safeIFS.template/to avoid stale files.src/,public/(if present), andindex.htmlintotemplate/.nullglobovertsconfig*.json,vite.config.*,*.config.*,tailwind.config.*.template/_package.jsonwith correct nameeject-vibe, scripts (dev,build,preview,format), and caret dependency ranges aligned with Vite 7 + React 19 + Tailwind v4.template/.prettierignoreto excludedist,node_modules, and lockfile from format checks.npm packoutput; nolsglobbing.trapcleanup using amktempworkdir.template/_package.json,template/src/App.tsx, andtemplate/index.htmlexist, then install, typecheck, build, and simulate an eject edit.check: CI-safe—builds template, installs deps intemplate/without requiring a lockfile, builds, runstsc --noEmit, runsprettier --check, and cleans up temp files (package.json, lockfile,node_modules,dist).build-template/test-local: usebashand align with the new scripts.src/and linked CSS via<link rel="stylesheet" href="/src/index.css">to avoid side-effect imports undernoUncheckedSideEffectImports.public/vite.svgreferenced byindex.html.Template manifest (generated)
Key fields in
template/_package.json:eject-vibedev,build(tsc -b && vite build),preview,format(prettier --check .)react,react-domvite,@vitejs/plugin-react,typescript,tailwindcss,@tailwindcss/postcss,postcss,autoprefixer,prettier,@types/*(caret ranges)Packaging hygiene
files: ["template"]ensures only the intended contents are published..gitignorealready excludestemplate/and test artifacts; no extra ignores needed.Impact
npm run build-templateproduces a completetemplate/withsrc/,public/,index.html, configs, and_package.json.npm run checkinstalls/builds/types/format-checks without requiring a pre-existing lockfile and cleans temporary artifacts.npm run test-localpacks the repo and validates the published contents and build.Verification
If you’d like any tweaks to the dependency ranges or script names, I can adjust quickly.