Npm executable init script

apps/boilerplate-react-vite/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Editor directories and files
 .vscode/*

apps/boilerplate-react-vite/README.md

@@ -1,50 +1,23 @@
-# React + TypeScript + Vite
+## React Vite Boilerplate
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This project provides a template that can be used to quickly create a React Vite
+application using the standard set of shared Canonical packages.
 
-Currently, two official plugins are available:
+### Getting started
+#### Installing the boilerplate
+An installer script is provided that automatically checks out and configures the boilerplate.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+`npx @canonical/boilerplate-react-vite setup`
 
-## Expanding the ESLint configuration
+Then, install node dependencies using your package manager's `install` command. 
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+##### Testing the installer script
+If you are working on this boilerplate itself and need to test it, you can run it locally:
 
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+```bash
+cd apps
+npx ./boilerplate-react-vite setup
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+#### Running the boilerplate
+Run `bun run dev` to run a live development server.

apps/boilerplate-react-vite/package.json

@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "bin": {
+    "setup": "setup.sh"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -30,4 +33,4 @@
     "typescript": "^5.5.3",
     "vite": "^5.4.8"
   }
-}
+}

apps/boilerplate-react-vite/setup.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+REPO_URL="https://github.com/canonical/vanilla-monorepo"
+SUBPACKAGE_PATH="apps/boilerplate-react-vite"
+# This is temporarily using the feature branch, it can be changed once merged
+BRANCH="wd-15812-vite-boilerplate"
+
+# Prompt for the project directory name
+read -p "Enter your project's name: " PROJECT_NAME
+
+# Check if the input is empty
+if [ -z "$PROJECT_NAME" ]; then
+  echo "You must provide a project name."
+  exit 1
+fi
+
+# Initialize a new Git repository and configure sparse-checkout
+git init "$PROJECT_NAME"
+cd "$PROJECT_NAME" || exit
+git remote add -f upstream "$REPO_URL"
+git sparse-checkout init --cone
+
+# Set sparse-checkout to include the subpackage directory
+git sparse-checkout set "$SUBPACKAGE_PATH"
+
+# Perform a shallow sparse checkout
+git fetch upstream "$BRANCH"
+git checkout "$BRANCH"
+
+# Delete all files except for the 'apps' directory
+shopt -s extglob  # Enable extended globbing
+rm -rf !(apps)  # Remove everything except the 'apps' directory
+
+# Move the contents of the subpackage to the current directory
+mv "$SUBPACKAGE_PATH/"* .  # Move all files and folders from the subpackage
+
+# Cleanup
+git remote remove upstream
+rm -rf apps setup.sh 
+
+# Update package.json with the project name and version
+PACKAGE_JSON_PATH="./package.json"
+if [ -f "$PACKAGE_JSON_PATH" ]; then
+  # Update the name and version fields in package.json
+  jq --arg name "$PROJECT_NAME" --arg version "0.0.1" '
+    .name = $name | 
+    del(.private) | 
+    .version = $version
+  ' "$PACKAGE_JSON_PATH" > tmp.json && mv tmp.json "$PACKAGE_JSON_PATH"
+  echo "Updated $PACKAGE_JSON_PATH with name: $PROJECT_NAME and version: 0.0.1"
+else
+  echo "$PACKAGE_JSON_PATH not found, skipping update."
+fi
+
+echo "Cloned $SUBPACKAGE_PATH from branch $BRANCH into $PROJECT_NAME"

apps/boilerplate-react-vite/vite.config.ts

@@ -7,10 +7,5 @@ export default defineConfig({
     react({
       include: "src/**/*.tsx",
     })
-  ],
-  server: {
-    watch: {
-      usePolling: true
-    }
-  }
+  ]
 })