Merge pull request #3022 from wallabag/webpack

Adds Webpack support and remove Grunt

2 files changed, 66 insertions, 0 deletions

diff --git a/docs/en/developer/front_end.rst b/docs/en/developer/front_end.rst
new file mode 100644
index 00000000..40f18a42
--- /dev/null
+++ b/docs/en/developer/front_end.rst
@@ -0,0 +1,33 @@
+Tips for front-end developers
+=============================
+
+Starting from version 2.3, wallabag uses webpack to bundle its assets.
+
+Dev mode
+--------
+
+If the server runs in dev mode, you need to run ``yarn run build:dev`` to generate the outputted javascript files for each theme. These are named ``%theme%.dev.js`` and are ignored by git. You need to relaunch ``yarn run build:dev`` for each change made to one of the assets files (js, css, pictures, fonts,...).
+
+Live reload
+-----------
+
+Webpack brings support for live reload, which means you don't need to regenerate the assets file for each change neither reload the page manually. Changes are applied automatically in the web page. Just set the ``use_webpack_dev_server`` setting to ``true`` in ``app/config/config.yml`` and run ``yarn run watch`` and you're good to go.
+
+.. note::
+
+    Don't forget to put back ``use_webpack_dev_server`` to ``false`` when not using the live reload feature.
+
+Production builds
+-----------------
+
+When you want to commit your changes, build them in production environment by using ``yarn run build:prod``. This will build all the assets needed for wallabag. To test that it properly works, you'll need to have a server in production mode, for instance with ``bin/console server:run -e=prod``.
+
+.. note::
+
+    Don't forget to generate production builds before committing !
+
+
+Code style
+----------
+
+Code style is checked by two tools : stylelint for (S)CSS and eslint for JS. ESlint config is based on the Airbnb base preset.
diff --git a/docs/fr/developer/front-end.rst b/docs/fr/developer/front-end.rst
new file mode 100644
index 00000000..714df08b
--- /dev/null
+++ b/docs/fr/developer/front-end.rst
@@ -0,0 +1,33 @@
+Conseils pour développeurs front-end
+====================================
+
+Depuis la version 2.3, wallabag utilise webpack pour générer ses assets.
+
+Mode développeur
+----------------
+
+Si le serveur fonctionne en mode dev, vous devez lancer la commande ``yarn run build:dev`` pour générer les fichiers de sortie javascript pour chaque thème. Ils sont nommés ``%theme%.dev.js`` et sont ignorés par git. Vous devez relancer la commande ``yarn run build:dev`` pour chaque changement que vous effectuez dans les fichiers assets (js, css, images, polices,...).
+
+Live reload
+-----------
+
+Webpack apporte le support pour la fonctionnalité de live reload, ce qui signifie que vous n'avez pas besoin de regénérer manuellement le fichier de sortie javascript ni de rafraichir la page dans votre navigateur. Les changements sont appliqués automatiquement. Vous avez juste besoin de mettre le paramètre ``use_webpack_dev_server`` à ``true`` dans ``app/config/config.yml`` et de lancer ``yarn run watch`` pour que cela soit actif.
+
+.. note::
+
+    N'oubliez pas de remettre ``use_webpack_dev_server`` à ``false`` lorsque vous n'utilisez pas la fonctionnalité de live reload.
+
+Production builds
+-----------------
+
+Lorsque vous committez vos changements, vous devez les compiler dans un environnement de production en exécutant ``yarn run build:prod``. Cela compilera tous les assets nécessaires pour wallabag. Pour tester que cela fonctionne proprement, vous devrez avoir un serveur en mode de production, par exemple avec ``bin/console server:run -e=prod``.
+
+.. note::
+
+    N'oubliez pas de générer des fichiers en mode production avant de committer !
+
+
+Code style
+----------
+
+Le style de code est vérifié par deux outils : stylelint pour le (S)CSS et eslint pour le JS. La configuration ESlint config est basée sur le preset Airbnb base.