Aller au contenu principal

4-3 Installer et configurer Vite

Installation de Vite et Bootstrap via npm​

Vite requiert node pour fonctionner. Vous devriez déjà avoir node sur votre ordinateur et être en mesure d'exécuter des commandes de type npm.

SI ce n'est pas le cas, vous pouvez télécharger Node ici.

Si la commande npm fonctionne dans un terminal, vous pouvez poursuivre.

  1. initialiser npm En ligne de commande, assurez-vous d'être dans le dossier du projet Snowfall.Web.Mvc (pas dans le dossier général de la solution.), puis faire npm init pour initialiser: 
    npm init -y
astuce

Pour ouvrir une invite de commande dans le bon dossier projet, vous pouvez faire un clic droit sur le dossier du projet, puis Open In -> Terminal.

Imgur

Cela devrait avoir créé un fichier package.json sous le projet MVC (au même niveau que Program.cs).

  1. Installer Vite Installer la dépendance vite à l'aide de npm. On utilise --save-dev puisqu'il s'agit d'une dépendance de développement seulement.

    npm i --save-dev vite

  2. Installer Bootstrap Installer Bootstrap et sa dépendance popper.

    npm i bootstrap@5.3.3 @popperjs/core

  3. Installer Sass pour compiler.

    npm i --save-dev sass

Si vous basculez en mode File System dans Rider, vous devriez avoir un dossier node_modules contenant un dossier bootstrap.

Imgur

Ajout de dossier assets et fichiers associés au projet​

Il nous faut un endroit pour mettre notre SCSS personnalisé.

info

Comme le SCSS n'est pas publiquement accessible, puisque le navigateur n'est pas en mesure de le lire directement et qu'il s'agit de code source, on mettra le SCSS personnalisé à l'extérieur de wwwroot.

En effet, durant le processus de compilation, c'est là que nous déplacerons le résultat CSS vers wwwroot.

Nous allons créer un dossier assets à la racine du projet MVC pour y mettre nos fichiers JavaScript et SCSS.

  1. Dossier assets. Créez un dossier assets à la racine du projet MVC.
  2. Dossiers scss et js. Sous ce dossier assets, créez deux dossiers: scss et js. Imgur

Créer le fichier assets/scss/app.scss​

  1. Clic droit sur le dossier assets/scss
  2. Add -> Stylesheet
  3. Nommer le fichier app
  4. Sélectionner SCSS dans la liste comme type de stylesheet. Imgur
  5. Un fichier app.scss devrait avoir été créé

Créer le fichier assets/js/app.js​

  1. Clic droit sur le dossier assets/js
  2. Add -> JavaScript File
  3. Nommer le fichier app
  4. Un fichier app.js devrait avoir été créé

Vous devriez maintenant avoir la structure suivante:

Imgur

Configuration de Vite​

info

Nous devons dire à Vite quel est le fichier d'entrée qu'il utilisera. Dans notre cas, ce sera app.js. Nous y reviendrons, mais app.js pourra faire référence à du JavaScript, mais sera aussi utilisé pour charger les styles scss.

  1. Fichier de configuration. Créez un fichier vite.config.js à la racine de votre projet. Ce fichier contient la ou les configurations de Vite.
  2. Mettre la config suivante dans le fichier
    Snowfall.Web.Mvc/vite.config.js
    import { defineConfig } from 'vite'
    import { resolve } from 'path'

    export default defineConfig({
        build: {
            manifest: true,
            rollupOptions: {
                input: resolve(__dirname, 'assets/js/app.js'),
            },
            outDir: resolve(__dirname, 'wwwroot/dist'),
        },
        resolve: {
            alias: {
            }
        },
    })

Importation de Bootstrap dans app.scss​

info

Le fichier app.scss est en quelque sorte le point d'entrée des styles de l'application. Nous devons donc importer Bootstrap dans ce fichier.

Dans le fichier app.scss, importez Bootstrap:

Snowfall.Web.Mvc/assets/scss/app.scss
// Importation de Bootstrap
@import "bootstrap/scss/bootstrap";

Fichier app.js​

Dans le fichier app.js, importons notre fichier app.scss ainsi que le JavaScript de Bootstrap.:

Snowfall.Web.Mvc/assets/js/app.js
import 'vite/modulepreload-polyfill'

// Notre Scss, contenant Bootstrap
import '../scss/app.scss'

// Importation du JavaScript de Bootstrap
import * as bootstrap from 'bootstrap'
info

Il peut sembler contre intuitif de charger du css/scss dans un fichier JavaScript, mais au fond ce fichier d'entrée (app.scss) sera lu et interprété par Vite pour en faire quelque chose de cohérent.

Tâches de départ de Vite​

info

En mode développement, Vite roule comme un serveur indépendant et rend disponible les ressources dont nous avons besoin via une URL. L'avantage est qu'il écoute et réagit aux changements apportés aux fichiers SCSS et JavaScript pour que ces derniers soient disponibles instantanément sans avoir à recompiler manuellement.

Nous allons donc créer des raccourcis vers les tâches fréquentes de Vite (dev et build principalement).

Dans package.json modifiez le bloc script par celui-ci pour vous permettre de rouler facilement Vite:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
...
info

Vous pouvez enlever le script test présent dans package.json.

Exécuter le serveur de compilation et développement de Vite​

Dans une fenêtre de terminal, exécutez la commande suivante dans le dossier de projet MVC (Snowfall.Web.Mvc)

npm run dev

Vous verrez ceci dans la console:

  VITE v4.0.4  ready in 197 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Le principe derrière Vite en mode développement est qu'il met à votre disposition un serveur d'assets. Dès qu'un changement est effectué à un fichier, il s'occupera de mettre à jour les références.

Ainsi, dans notre gabarit de page _Layout, nous devons faire référence à ce serveur pour le CSS et le JavaScript.

Modification du _Layout​

Modifiez le _Layout pour retirer les dépendances à bootstrap.min.css et site.css et les remplacer par le bloc surligné:

Snowfall.Web.Mvc/Views/Shared/_Layout.cshtml
/...
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>@ViewData["Title"] - Snowfall</title>
    <environment names="Development">
        <!-- Vite dev server -->
        <script type="module" src="http://localhost:5173/assets/js/app.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script type="module" crossorigin asp-src-include="~/dist/assets/app-*.js"></script>
        <link rel="stylesheet" asp-href-include="~/dist/assets/app-*.css" />
    </environment>
    <link rel="stylesheet" href="~/Snowfall.Web.Mvc.styles.css" asp-append-version="true"/>
</head>
//...
info

En mode développement, on utilise le serveur de Vite (http://localhost:5173/) qui s'occupera de gérer les différents assets correctement et de les rafraichir au besoin.

En mode "production", on utilise les assets compilés directement qui seront envotés dans le dossier dist de wwwroot.

Bien que nous ne l'utiliserons pas vraiment, vous pouvez exécuter npm run build pour un aperçu du processus de compilation en mode "production".

Exécuter le projet​

  1. Assurez vous que le serveur Vite roule via npm run dev
  2. Exécuter le projet
  3. Vous devriez voir le site normalement, avec les styles de bootstrap.

Vous avez peut-être l'impression d'être retourné à la case départ, mais nous allons voir à la prochaine section l'avantage de cette méthode.

attention

Vous devrez vous assurer de toujours exécuter npm run dev dans un terminal en parallèle de votre projet .NET. Vous pouvez le faire directement dans une fenêtre de terminal Rider.

Ceci dit, vous pouvez vous créer une configuration dans Rider (voir étape suivante).

Configuration optionnelle​

Il est aussi possible de configurer une autre configuration de lancement Rider (un peu comme http dans le haut de la fenêtre avec Run et Debug). Vous aurez alors deux instances qui roulent en parallèle (.NET et npm) et accessibles à partir du menu principal.

  1. Edit Configurations
    Imgur
  2. Cliquer sur le +
    Imgur
  3. Choisir npm
    Imgur
  4. Remplir les infos comme ceci
    Imgur
  5. Cliquer sur OK
  6. Vous aurez maintenant accès à la configuration Vite
    Imgur
  7. Vous devrez faire Launch another configuration pour lancer une seconde configuration en parallèle (comme http par exemple)
    Imgur