Aller au contenu principal

26-1 Configuration de Vite/SCSS/Bootstrap

Installer Vite et Bootstrap dans le projet Admin​

  1. Initialiser npm En ligne de commande. Assurez-vous d'être dans le dossier du projet Snowfall.Web.Admin (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.

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
  1. Installer Bootstrap. Installer Bootstrap et sa dépendance popper.
npm i bootstrap@5.3.3 @popperjs/core
  1. Installer Sass pour compiler.
npm i --save-dev sass

Ajouter les fichiers Scss et JS de base​

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

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

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éé

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.

  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.Admin/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'),
                output: {
                    entryFileNames: `assets/[name].js`,
                    chunkFileNames: `assets/[name].js`,
                    assetFileNames: `assets/[name].[ext]`
                }
            },
            outDir: resolve(__dirname, 'wwwroot/dist'),
        },
    })

    Cette configuration désigne comme point d'entrée app.js et comme dossier de sortie wwwroot lors de la compilation.

Importation de Bootstrap dans app.scss​

Dans le fichier app.scss, importez Bootstrap:

Snowfall.Web.Admin/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.Admin/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'

Tâches de départ de Vite​

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"
  },
...

Action de build​

Nous allons configurer une action de build lors de chaque compilation du projet d'API.

Il peut sembler bizarre d'utiliser le projet d'API pour lancer une démarche de compilation du projet client, mais le projet d'API a été configuré comme projet "hôte" de l'application Blazor WASM. C'est en quelque sorte ce dernier qui est le chef d'orchestre du lancement de l'application.

À chaque fois que sera lancé le projet Snowfall.Web.Api, on appellera npm run build pour compiler les assets et les mettre dans le dossier wwwroot/assets/.

  1. En ayant le projet d'API de sélectionné dans Rider, cliquer sur le menu déroulant et Edit Configuration... Imgur
  2. Dans la portion du bas, Before launch, cliquer sur le + pour ajouter une action supplémentaire Imgur
  3. Choisir Run npm script Imgur
  4. Au niveau de l'option package.json, choisir le fichier package.json du projet Admin et pour Scripts, choisir build
  5. Cliquer sur Ok
  6. Cliquer sur Ok

Ajout à index.html des fichiers JavaScript et CSS​

Snowfall.Web.Admin/wwwroot/index.html
<!-- ... --->
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snowfall.Web.Admin</title>
    <base href="/" />
    <link rel="stylesheet" href="css/app.css" />
    <link href="dist/assets/app.css" rel="stylesheet">

    <!-- ... -->

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="dist/assets/app.js"></script>
</body>
<!-- ... -->

Lancer l'application​

Lancez l'application et ça devrait être "un peu plus beau"

http://localhost:4200