Django et Laravel-mix

Juste avant de passer au vrai sujet de ce billet, parlons un peu des virtualenv. Récemment, Python3.6 a été publié. Mise à jour classique du langage, mais ça m’a permis d’apprendre quelque chose.
En fait je tentais de préparer une configuration Webpack avec Helpmepiz, et en voulant réactiver le virtualenv, plus rien ne répondait. C’était lié à ma nouvelle version du langage, et c’est là que l’utilisation de freeze a pris tout son sens. Il a fallut supprimer le dossier env, et et en créer un nouveau, puis lancer pip freeze > requirements.txt.
Par contre, ça m’a surtout fait comprendre que le virtualenv n’avait rien à faire dans le dépôt. Il faut le mettre complètement ailleurs, là où j’avais pris comme reflex de le mettre au même niveau que l’appli. Il faudra donc que je déporte ça à terme, mais surtout, ne faites pas la même erreur !

Passons maintenant à Laravel-mix. En poussant la configuration de webpack, je commençais à avoir envie de pleurer. Puis Laravel-mix est arrivé. C’est un Webpack prêt à l’usage, qui colle parfaitement à ce que je veux faire. Il se colle sur n’importe quelle application, contrairement à ce que son nom laisse entendre, donc allons-y !

Installation avec Yarn

Il faut donc déjà avoir Yarn d’installé en global. Ensuite, on va installer Webpack, également en global. Une dépendance qui n’est pas encore documentée (mais qui vous évitera de chercher), est cross-env, qu’il faut aussi avoir en global :

sudo npm install -g webpack cross-env

Effectivement, je n’utilise pas Yarn pour installer en global, il y a des soucis dans les liens symboliques, donc npm est plus approprié.

Ensuite on est prêt à accueillir Mix dans l’application :

yarn add laravel-mix && cp -r node_modules/laravel-mix/setup/** ./

Ajouter les commandes npm

Pour s’éviter d’avoir à taper les longues commandes avec webpack, voici ce que vous devez ajouter au fichier packages.json :

"scripts": {
    "webpack": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "hmr": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

La commande webpack vous permet de compiler vos fichiers une seule fois.
La commande dev va recompiler à chaque changement de fichier
La commande hmr vous permet d’activer le hrm (duh?)
Et la commande production va compiler, minifier, et générer les .map pour la production.

Modifier la configuration apache

On a vu dans un article précédent comment configurer un vhost apache pour Django. Mais si on livrait les assets compilés dans le repertoire /assets de l’application (c’est le comportement par défaut de Django il me semble), je préfère changer et passer ça dans /dist.
/assets contiendra tous les fichiers non compilés, donc voici ce qu’on ajoute :

Alias /static/  /chemin/vers/helpmepyz.dev/helpmepyz/dist/

La fonction mix pour Python/Django

Alors c’est ma toute première fonction python, c’est pas parfait, mais ça fait le job. Il faudra juste remplacer le retour avec un objet request, pour déterminer l’url complète.

Mais globalement, qu’est ce que fait cette fonction :

Ignorons la partie hot reload pour l’instant, mais Laravel Mix génère un fichier mix-manifest.json. Dans ce fichier, il y a les chemins vers les chunks versionnés, ce qui va vous éviter de dire « vous pouvez rafraichir la page syouplai? F5 ».

from os.path import isfile, abspath
from os import getcwd
from json import loads


def mix(path, manifest = False, should_hot_reload = False):
    if not manifest:
        manifest_path = getcwd() + '/mix-manifest.json'
        should_hot_reload = isfile(abspath('/dist/hot'))
        if not isfile(manifest_path):
            raise Exception( 'The Laravel Mix manifest file does not exist. Please run "npm run webpack" and try again.')

        manifest_file = loads(open(manifest_path).read())

    # if (not path.startswith('/')): path = f"/{path}"

    if not path in manifest_file:
        raise Exception('Unknown Laravel Mix file path: f"{path}".'
                        'Please check your requested webpack.mix.js output path, and try again.')

    return 'http://localhost:8080f"{manifest_file[path]}"' if should_hot_reload else manifest_file[path]

Donc on va bientôt être prêt coté front !

Sinon, en lisant Sam et Max, je suis tombé sur cette phrase, qui m’a permis de comprendre la différence entre les 2 termes, et de manière très simple, donc je vous la laisse :

Donc, quand vous faites import os, Python va faire une boucle for là dessus et chercher dans chaque dossier si un package (un dossier avec un fichier __init__.py) ou un module (un fichier avec l’extension .py) nommé os existe.

metrogeek

Laisser un commentaire