chore: remove vite integration code and use the canonicalwebteam.flask_vite package (#5444)

* chore: remove vite integration code and use the canonicalwebteam.flask_vite package

- install canonicalwebteam.flask_vite
- replace webapp.vite_integration with the new package
- delete webapp.vite_integration package
- update webapp.config with new VITE_REACT config parameter

* fix: formatting

* fix: doc comment for VITE_REACT variable

* fix: add HACKING.md docs for Vite

* fix: drive-by update stale docs

Author: edisile

.github/copilot-instructions.md

@@ -55,8 +55,7 @@ webapp/                   # Flask app (blueprints in */views.py)
   ├── config.py          # Env vars: SECRET_KEY, LOGIN_URL, VITE_PORT, ENVIRONMENT
   ├── endpoints/         # API blueprints
   ├── publisher/         # Publisher dashboard
-  ├── store/             # Store frontend
-  └── vite_integration/  # Vite-Flask integration
+  └── store/             # Store frontend
 static/js/               # React/TypeScript (Jotai state, React Router v7)
   ├── publisher/         # Dashboard components
   ├── public/            # Public-facing JS

HACKING.md

@@ -76,7 +76,7 @@ The application will be reporting errors to your `sentry.io` project from now on
 
 ## Testing
 
-Install the [`dotrun`](https://snapcraft.io/dotrun) snap.
+Install [`dotrun`](https://github.com/canonical/dotrun), then run
 
 ``` bash
 dotrun test
@@ -98,3 +98,6 @@ We are supporting some custom licenses (like the Proprietary license). On update
 When the app is run locally, a GitHub personal access token is required to fetch the CVE data. Make sure you have access to the [canonicalwebteam.snap-cves](https://github.com/canonical/canonicalwebteam.snap-cves) repository. After creating a GitHub classic personal access token, follow the steps described in [GitHub's documentation](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#personal-access-tokens-classic).
 Then, add this token to the .env.local file with the key GITHUB_SNAPCRAFT_BOT_USER_TOKEN.
 
+## Vite setup details
+This project relies on Vite for processing and bundling TypeScript and SCSS source files; referencing these files and the resulting bundles in templates is done through a `vite_import` template function provided by the [Canonical Webteam Flask-Vite integration](https://github.com/canonical/canonicalwebteam.flask-vite) package. The extension is configured via `VITE_*` variables that get loaded into the Flask `app.config` object where the extension reads them from.
+Files referenced via `vite_import` are automatically detected and added as entry points in the Vite config when running the build command.

requirements.txt

@@ -1,5 +1,6 @@
 # App dependencies
 canonicalwebteam.flask-base==3.1.1
+canonicalwebteam.flask-vite==0.3.1
 canonicalwebteam.candid==0.9.0
 canonicalwebteam.discourse==7.0.0
 canonicalwebteam.blog==6.6.0

tests/tests_vite_integration.py

@@ -26,6 +26,9 @@ class ConfigurationError(Exception):
 VITE_MODE = "development" if IS_DEVELOPMENT else "production"
 VITE_PORT = os.getenv("VITE_PORT", 5173)
 VITE_OUTDIR = os.getenv("VITE_OUTDIR", "static/js/dist/vite")
+# VITE_REACT controls whether React hot module reload scripts are injected when
+# running in dev mode; the setting has no effect in prod mode
+VITE_REACT = True
 
 if ENVIRONMENT != "devel":
     SESSION_COOKIE_SAMESITE = "None"

webapp/config.py

@@ -1,5 +1,5 @@
 from flask_wtf.csrf import CSRFProtect
-from webapp.vite_integration import FlaskVite
+from canonicalwebteam.flask_vite import FlaskVite
 
 csrf = CSRFProtect()
 vite = FlaskVite()