Tagnpm

[Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS

Source: Use Docker to Create a Node Development Environment et version PDF pour la postérité. Tutoriel (en anglais) extrêmement détaillé et très bien expliqué.

Repo Git: Use Docker to Create a Front-End Node JS Development Environment.

Ce tutoriel m’a permis:

  • d’exécuter NPM depuis un container Docker sans avoir à procéder à une installation locale de NodeJS (écarte les problèmes liés à l’obligation de jongler avec différentes version de Node/NPM en fonction de l’âge du projet).
  • de lancer un serveur Node JS via Express.
  • d’accéder à localhost dans un navigateur.

Pour aller encore plus loin (pas lu l’article en entier, mais il est ressorti dans mes résultats de recherche lorsque j’ai trouvé le tuto dont je parle juste au-dessus et me paraît intéressant à conserver pour améliorer ma pratique de Docker): A Better Way to Develop Node.js with Docker (I’ve seen a lot of articles lately suggesting how to use Docker for development. I haven’t seen one yet that does it correctly). Version PDF pour la postérité.

[Magento 2] Erreur grunt exec « In SourceThemeDeployCommand.php line 179 » à la compilation des thèmes

J’ai un projet dans lequel j’utilise plusieurs thèmes qui héritent entre-eux. J’exécute la commande grunt exec pour compiler les assets front, mais l’erreur In SourceThemeDeployCommand.php line 179 apparaît également lorsque j’utilise la commande Magento setup:static-content:deploy:

Fil de discussion m’ayant aidé pour la résolution: Error when run command grunt:exec in Magento 2.2.0 #12271.

Les éléments à vérifier:

Vos thèmes ont tous le type égal à 0 dans la table theme en base de données

Source. Un theme avec un type de 1 a été automatiquement paramétré comme « virtuel » par Magento 2!

This error happens for multiple reasons, but probably the most annoying and most frequent relates to the fact that Magento2 attempts to validate themes.

Explanation

If a theme exists in the database, but is not physically available in the filesystem at the time the magento setup:install command is run, Magento2 will set it as a « virtual » theme. Once a theme is set as virtual, it is never unset by Magento2. It will forever be virtual until it is manually reset in the database. To reset the theme, go to the theme table, and set the type field to 0, and re-associate the theme with any parent_id. A theme with a type of 1 has been set to virtual.

This problem will provide a stack trace like the following:

This can all be traced through the _getPhysicalTheme method. It’s ridiculous that this even occurs. The physical presence of a theme should just break the site in a very expected way: that is, the frontend just doesn’t appear. Don’t try to be clever and modify the DB. Magento design decisions never cease to amaze me.

You can imagine what this means for anyone migrating their databases to a new host. For example, you import your DB dump to a new host. Once the DB is migrated, you then issue the standard magento setup:install command. Guess what? Now your theme will never build. Why? Because the theme itself did not physically exist on the filesystem at the time of the install. What is supposed to come first, Magento–the chicken or the egg?

Lorsque j’ai rencontré le problème, j’avais effectivement des thèmes dont le type était seté à 1 dans la table theme de ma base de données. J’ai dû, à la main:

  • les repasser à 0
  • vérifier (et reconfigurer si besoin) leur parenté

Avant modification:

Après modification:

Fichiers app/etc/config.php et app/etc/env.php

ATTENTION: vérifier également dans les fichiers app/etc/config.php et app/etc/env.php si le type n’est pas seté à 1 pour vos thèmes et corriger le cas échéant.

Vérifier votre version de node et l’upgrader/downgrader au besoin

La version de node qui fonctionne est la 8.12.0. Perso, mon Dockerfile était configuré sur latest.

Maintenant, tout dépend de la manière dont vous utilisez node. Voici comment mettre à jour Node et NPM proprement sous Ubuntu (ligne de commande) si la dépendance est installée en local sur votre machine.

Si vous utilisez Docker, il faut utiliser l’image node:8.12.0 au lieu de (pour moi) node:latest dans votre fichier Dockerfile.

Puis lancer un docker-compose build (pas besoin de down vos containers au préalable).

Puis docker-compose down et docker-compose up -d --force-recreate <nom_du_container> (exemple: docker-compose up -d --force-recreate node).

Si vous avez un script bash à sourcer (. ./docker/set-env.sh par exemple…) qui initialise un environnement de développement (avec des aliases pour accéder aux containers ou à certaines commandes, ou autre…), il faut également le ré-exécuter.

Attention: une fois la mise à jour de Node effectuée, il convient de repartir d’une installation fraîche du dossier node_modules (suppression du dossier et npm install.

Utiliser @magento_import à la place de @import dans vos sources LESS pour importer les fichiers que Grunt ne trouve pas

Le @magento_import est pour chercher tous les fichiers qui correspondent au path. par exemple:

va chercher tous les fichiers _module.less dans les sous dossier du thème.

Dans mon cas, les erreurs se trouvaient dans la section Theme Core des fichiers styles-m.less de vos thèmes parent et enfant, remplacer @import par @magento_import pour charger les fichiers que Grunt ne trouve pas.

ATTENTION: il est impératif de laisse les lignes @magento_import en commentaire //!

Exemple:

[crossbrowsertesting.com] Erreur « Invalid Host Header » où comment accéder à un site en localhost

Source: What is this “Invalid Host Header” error?

Dans le cadre d’un projet Angular

Angular CLI 6 dans mon exemple, mais voir la documentation officielle de Cross Browser Testing pour des projets Angular 2 ou Webpack.

  1. Stopper le serveur (si il tourne) et le relancer en incluant les paramètres suivants dans la commande: --host 0.0.0.0 --disableHostCheck=true.

    Si vous utilisez NPM et que vous exécutez votre serveur via un npm start, éditez le fichier package.json (ligne « scripts » > « start ») pour y ajouter les paramètres cités plus haut. Exemple:

  2. Sur Quel Est Mon IP, récupérez votre IP Locale (qui commence probablement par 192.168… Dans mon cas 192.168.67.219).
  3. Dans l’interface de crossbrowsertesting, commencer par activer la connexion locale (depuis le bandeau « Local Connection OFF/ON »)
  4. Taper dans la barre d’adresse de l’appli: http://votre_IP_locale:4200 (exemple: http://192.168.67.219:4200/)

[Docker] Compiler les sources de Foundation (Zurb Template) dans un conteneur

Note: déprécié au profit de [Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS.

Accès rapide aux commandes Docker utiles

Docker for Gulp Build Tasks et version PDF pour la postérité. Cet article m’a permis de mettre en place un Docker pour compiler mes sources Front-End via NPM (workflow utilisant Bower et Gulp). Et ça marche!!!


ATTENTION: ce Docker fonctionne bien (les sources en local sont compilées via le conteneur), à l’exception de Browsersync qui ne recharge pas l’aperçu dans le navigateur.

TODOs

  • Les fichiers compilés (dossier dist/) sont bien modifiés en local, mais on ne voit pas les modifications en front dans le navigateur. Hypothèse: on voit les fichiers présents dans le conteneur (qui eux ne sont pas modifiés) et pas les fichiers locaux.

    le truc c’est t’utilise pas du tout de volumes
    donc en gros t’es sources sont accessible dans l’image docker, que parce que y’a un copy dans ton Dockerfile
    ca arrive qu’une fois lors du build de l’image
    donc si tu modifie ton code après coup, ton image docker le verra pas, car le code updaté ne lui est pas fourni


Pourquoi Docker?

Par souci de portabilité de l’environnement de travail.

Problème de versions de nodeJS et de ses dépendances d’un poste de travail à l’autre…

Prérequis

Avoir Docker d’installé, avoir Git d’installé.

Conventions pour ce tutoriel

Nous partirons du principe que nos fichiers de travail se trouvent dans un dossier docker/fzt-master. Vous pouvez créer le dossier docker/ via la commande mkdir docker, mais ne créez pas le dossier fzt-master/ pour le moment.

Attention: si vous utilisez un IDE, il est important que les fins de lignes dans vos fichiers soient au format « Unix ». Dans Sublime Text 3 par exemple, menu View > Line endings > Unix.

Mon environnement de travail est un Ubuntu server dans une VM que je lance depuis un Windows 10 via Virtual Box.

Rapatriement des sources de Foundation

A la racine d’un dossier nommé docker/, exécuter la commande suivante pour récupérer les sources de Foundation Zurb Template (branche master) en local via Git dans un dossier fzt-master/: git clone https://github.com/zurb/foundation-zurb-template.git ftz-master

Se placer à la racine du dossier fzt-master (commande cd fzt-master), créer un fichier Dockerfile (commande touch Dockerfile) et l’éditer pour y placer les lignes de code suivantes (commande vim Dockerfile ou vi Dockerfile si vim n’est pas installé sur votre machine) :

Dans vim, on passe en mode « insertion » en tapant la touche Inser du clavier, ce qui nous permet d’éditer le fichier. La combinaison de touches :wq! nous permet ensuite de sauvegarder les modifications apportées au fichier et de quitter.

Dockerfile:

docker-compose.yml

De manière à pouvoir exploiter browser-sync et le live reload, il faut également créer un fichier docker-compose.yml qui va s’occuper de rediriger les ports du conteneur vers notre machine locale afin que nous ayons accès au résultat de nos fichiers compilés dans notre navigateur préféré (explication ici) :

Vos sources devraient être accessibles dans votre navigateur depuis l’URL: http://localhost:4000 ou ip.de.votre.vm:4000

Pour récupérer l’IP de votre VM, taper la commande ifconfig. Choisir celle qui commence par 192.168..

gulpfile.babel.js

Il faudra également éditer le fichier gulpfile.babel.js en local pour ajouter le paramètre open: false à la fonction server:

Initialiser le conteneur Docker

Builder le conteneur: docker build -t fzt-master . edit: la tâche de build sera effectuée par le docker-compose, juste en-dessous.

A la racine du dossier où se trouvent les fichiers Dockerfile et docker-compose.yml, exécuter la commande: docker-compose up -d

Puis (la première fois et à chaque modification du fichier package.json) installer, via le conteneur, les dépendances NPM en local: docker run --rm -v ~/docker/fzt-master:/home/app/ fzt-master npm install edit: la commande npm install a été ajoutée d’office dans le Dockerfile.

Image for service fzt-master was built because it did not already exist. To rebuild this image you must use docker-compose build or docker-compose up --build.

Exploiter le conteneur Docker

Lancer le conteneur afin qu’il exécute la commande par défaut (yarn start) : docker run --rm --pid=host -v ~/docker/fzt-master:/home/app/ fzt-master

L’argument --pid=host sert à stopper la tâche de compilation des sources dans votre conteneur en utilisant le traditionnel raccourci ctrl + c.


ATTENTION: ce billet est expérimental. Il ne garantit en rien que vous puissiez réellement être en mesure de compiler les sources de Foundation dans un conteneur en suivant les directives ci-dessous. Je suis en-train de mettre en place le Dockerfile qui permettra de le faire. Ce billet constitue des notes de travail. En fonction de mon avancement, vous arriverez peut-être à quelque chose. Je retirerai ce message lorsque le Dockerfile sera fonctionnel comme je l’entends.

Pour aller plus loin:

uwegerdes/frontend-development

Browsersync within a Docker container

How to run livereload with gulp within a docker container?

Le Dockerfile décortiqué

Pour paramétrer correctement le Dockerfile, il convient d’aller chercher quelques informations dans les fichiers readme.md et package.json du repo Git de Foundation que nous venons de cloner. Attention à bien chercher ces informations dans la branche que nous venons de cloner (v6.4). Le framework évolue sans arrêt et les informations, les paquets NPM (et leurs versions) et les commandes dont nous avons besoin pour, respectivement, constituer le Dockerfile et compiler notre code source sans erreurs sont différents d’une branche à l’autre du projet.

Embarquer la bonne version de nodeJS

Premièrement, vérifier la version de nodeJS à installer pour faire fonctionner correctement les dépendances utilisées lors de la compilation des sources. La section Installation du fichier readme.md nous renseigne sur ce point:

NodeJS (0.12 or greater)

Nous pourrons trouver ce fichier qui constitue le script d’installation de la version 0.12 de nodeJS sur le repository Git officiel du projet node. Il est à récupérer et à copier/coller dans le dossier fzt64, à la racine (au même niveau que le Dockerfile).

Pour d’autres versions du framework Foundation ou d’autres projets dont la compilation des sources reposent sur NPM, la liste des scripts d’installation de l’ensemble des distributions de nodeJS se trouve ici.

Edit: pour des raisons que j’ignore (quoique, peut-être un problème relatif à la version 16.04 d’ubuntu server que je déclare et qui serait trop récente… je n’ai pas testé avec une petite 14.04 mais je devrais…), le build du container semble ne pas fonctionner avec la version 0.12 de nodeJS préconisée dans la branche v6.4 de Foundation. Peut-être une erreur de mise à jour dans leur readme…

Step 9/13 : RUN /usr/bin/npm install -g babel-core
—> Running in 510dcfa93753
/bin/sh: 1: /usr/bin/npm: not found
The command ‘/bin/sh -c /usr/bin/npm install -g babel-core’ returned a non-zero code: 127

Je la remplace donc par la version 4.x qui lui succède chronologiquement.

Je pourrais tenter de la remplacer par la version en cours (11.x au moment où j’écris ces lignes…), mais je m’expose à des incompatibilités avec les versions de certains paquets NPM utilisés dans la branche v6.4 de la stack Zurb (trop grand gap de versions entre nodeJS et les paquets). C’est notamment ce problème que nous essayons d’éviter en mettant à profit Docker.

Troubleshooting et installation des applications et devDependencies manquantes

On ne peut pas toujours deviner quelles applications et devDependencies doivent être obligatoirement installées dans le conteneur. Il y a bien un fichier package.json dans le projet, mais toutes les devDependencies ne doivent pas obligatoirement être installées via le Dockerfile. Il faut y aller à tâtons et fixer une à une les erreurs retournées par le terminal lors du build du conteneur.

https://github.com/zurb/foundation-zurb-template/blob/v6.4/package.json#L16

$ docker run –rm -v ~/docker/fzt64:/home/app/ fzt64

> foundation-zurb-template@1.0.0 start /home/app
> gulp

[14:26:11] Failed to load external module @babel/register
[14:26:11] Failed to load external module babel-register
[14:26:11] Failed to load external module babel-core/register
[14:26:11] Failed to load external module babel/register
[14:26:11] Local gulp not found in /home/app
[14:26:11] Try running: npm install gulp

Step 9/11 : RUN /usr/bin/npm install
—> Running in 95a31683f7c9
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: undefined
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: undefined
npm WARN deprecated gulp-uncss@1.0.6: Use UnCSS through gulp-postcss instead.
npm WARN deprecated babel-preset-es2015@6.24.1: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm ERR! Linux 4.4.0-57-generic
npm ERR! argv « /usr/bin/node » « /usr/bin/npm » « install »
npm ERR! node v4.9.1
npm ERR! npm v2.15.11
npm ERR! code ENOGIT

npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.

npm ERR! Please include the following file with any support request:
npm ERR! /home/app/npm-debug.log
The command ‘/bin/sh -c /usr/bin/npm install’ returned a non-zero code: 1

npm ERR! not found: git. Il faut ajouter Git à la liste des paquets à installer.

Step 8/10 : RUN /usr/bin/npm install
—> Running in f25efff29bd2
npm WARN deprecated gulp-uncss@1.0.6: Use UnCSS through gulp-postcss instead.
npm WARN deprecated babel-preset-es2015@6.24.1: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm ERR! git rev-list -n1 4.0: fatal: ambiguous argument ‘4.0’: unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 4.0: Use ‘–‘ to separate paths from revisions, like this:
npm ERR! git rev-list -n1 4.0: ‘git […] — […]’
npm ERR! git rev-list -n1 4.0:
npm ERR! git rev-list -n1 4.0: fatal: ambiguous argument ‘4.0’: unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 4.0: Use ‘–‘ to separate paths from revisions, like this:
npm ERR! git rev-list -n1 4.0: ‘git […] — […]’
npm ERR! git rev-list -n1 4.0:
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: Cloning into bare repository ‘/root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa’…
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: Host key verification failed.
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: fatal: Could not read from remote repository.
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa:
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: Please make sure you have the correct access rights
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: and the repository exists.
npm ERR! Linux 4.4.0-57-generic
npm ERR! argv « /usr/bin/node » « /usr/bin/npm » « install »
npm ERR! node v4.9.1
npm ERR! npm v2.15.11
npm ERR! code 128

npm ERR! Command failed: git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa
npm ERR! Cloning into bare repository ‘/root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa’…
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!

npm ERR! Please include the following file with any support request:
npm ERR! /home/app/npm-debug.log
The command ‘/bin/sh -c /usr/bin/npm install’ returned a non-zero code: 1

Il faut ajouter gulp-cli à la liste des dépendances NPM à installer. Voir ici et .

Builder le container

Pour builder le container (que je vais appeler « fzt64 »), j’exécute la commande: docker build -t fzt64 .

Installer les paquets node en local, via le container

Then open the folder in your command line, and install the needed dependencies:

cd projectname
npm install
bower install

Commande à exécuter obligatoirement avant toute autre pour récupérer les dépendances NPM du projet (dossier node_modules) en local.

Pour exécuter la commande npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Foundation en local sur ma machine, à la racine du dossier home/intlangf/docker/fzt64/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 npm install

Pareil pour Bower: docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 bower install

Commande par défaut

La section Manual setup du fichier readme.md nous renseigne sur les différentes commandes fournies par la stack Zurb:

Finally, run npm start to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:
http://localhost:8000
To create compressed, production-ready assets, run npm run build.

La commande npm start est la commande par défaut dans notre Dockerfile.

Ceci signifie que lorsqu’on exécute la commande docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 dans notre terminal, c’est en réalité la commande npm start qui sera exécutée dans notre container. Elle génèrera un dossier dist/ en local (à la racine du dossier docker/fzt64/) qui contiendra le résultat de la compilation des différentes sources de Foundation.

Exécuter une commande autre que celle par défaut

On voit que d’autres commandes sont disponibles au sein de la stack Zurb.

docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 npm run build

Commandes utiles

Supprimer des images Docker

Lister les images disponibles: docker images -a.

Supprimer des images en utilisant leurs IDs ou leurs tags: docker rmi <Image> <Image>.

[Docker] Utiliser node, npm, grunt, gulp, webpack, bower, yarn, etc.

Docker for Gulp Build Tasks et version PDF pour la postérité. Cet article m’a permis de mettre en place un Docker pour compiler mes sources Front-End via NPM (workflow utilisant Bower et Gulp). Et ça marche!!!


Mes sources pour ce billet:


Avec Foundation Zurb Template

Création de la Dockerfile

Dans home/intlangf/docker/ je fais un git clone https://github.com/zurb/foundation-zurb-template.git fzt (pour récupérer les sources du framework CSS Foundation).

Ensuite, cd fzt pour entrer dans le dossier créé par Git. Puis touch Dockerfile et vim Dockerfile pour créer et éditer un fichier Dockerfile dans lequel je place le code ci-dessous:

Builder le container

Pour builder le container (que je vais appeler « fzt »), j’exécute la commande: docker build -t fzt .

Exécuter une commande à l’intérieur du container: récupérer les paquets NPM

Commande à exécuter obligatoirement avant toute autre pour récupérer les dépendances NPM du projet (dossier node_modules) en local.

Pour exécuter npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Foundation en local sur ma machine, à la racine du dossier home/intlangf/docker/fzt/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/knacss:/home/app/ fzt npm install.

Exécuter une commande à l’intérieur du container: yarn start

Les sources dans Foundation se compilent via la commande yarn start qu’on exécute ainsi: docker run --rm -v ~/docker/knacss:/home/app/ fzt.

Ici on ne précise pas de commande à la suite du nom de l’image Docker, car la commande par défaut dans le fichier Dockerfile est CMD ["yarn", "start"].

Résultat: un dossier dist/ est généré en local avec les sources CSS, JS, etc, compilées via notre image Docker!


Avec KNACSS

Création de la Dockerfile

Dans home/intlangf/docker/ je fais un git clone https://github.com/alsacreations/KNACSS.git knacss (pour récupérer les sources du framework CSS Knacss).

Ensuite, cd knacss pour entrer dans le dossier créé par Git. Puis touch Dockerfile et vim Dockerfile pour créer et éditer un fichier Dockerfile dans lequel je place le code ci-dessous:

Builder le container

Pour builder le container (que je vais appeler « test »), j’exécute la commande: docker build -t test .

Exécuter une commande à l’intérieur du container

Pour exécuter npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Knacss en local sur ma machine, à la racine du dossier home/intlangf/docker/knacss/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/knacss:/home/app/ test npm install.


Expériences plus anciennes

Avec une Dockerfile

Container with ready-to-run gulp-tasks sur hub.docker.com.

  1. copy the contents of the example directory to your project.
  2. change the gulpfile.js to meet your requirements (sass or less, copy included?)
  3. change the gulp_config.js to meet your requirements

4. make the gulp-File executable

Well you can make it by doing as chmod +x filename.sh so it will execute when you call it will ./filename.sh.

5. run ./gulp build:dev or ./gulp watch

see gulp running for you, without having to worry with nodejs, module dependencies, complex tasks configuration

Avec Docker Compose

Bonus:

How To Remove Docker Images, Containers, and Volumes

Remove all images and containers


[Docker] Mettre en place un container workflow de développement Front-End incluant NodeJS, NPM, Bower, Gulp, etc …

Note: déprécié au profit de [Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS.

Docker for Gulp Build Tasks et version PDF pour la postérité. Cet article m’a permis de mettre en place un Docker pour compiler mes sources Front-End via NPM (workflow utilisant Bower et Gulp). Et ça marche!!!


Ressources en ligne

Tutoriels

Repositories

  • Le projet docker-npm de nkenney sous Git. Un node, npm, yarn, bower, grunt and gulp runner.

[NPM] Mettre à jour Node et NPM sous Ubuntu (ligne de commande)

Complètement désinstaller nodejs et npm et tout réinstaller via nvm

Testé et validé! La méthode ci-dessous fonctionne à condition de bien supprimer à la main l’ensemble des fichiers et dossiers listés.

Source: Completely removing Node.js and Npm et la version PDF pour la postérité.

Removing Node.js

To recap, the best way (I’ve found) to completely uninstall node + npm is to do the following:

  • go to /usr/local/lib and delete any node and node_modules
  • go to /usr/local/include and delete any node and node_modules directory
  • if you installed with brew install node, then run brew uninstall node in your terminal
  • check your Home directory for any « local » or « lib » or « include » folders, and delete any « node » or « node_modules » from there
  • go to /usr/local/bin and delete any node executable

You may need to do the additional instructions as well:

  • remove: /usr/local/bin/npm
  • remove: /usr/local/share/man/man1/node.1
  • remove: /usr/local/lib/dtrace/node.d
  • execute: rm -rf /Users/[homedir]/.npm

Ré-installer nodejs avec nvm

Then download nvm and follow the instructions to install node. The latest versions of node come with npm, I believe, but you can also reinstall that as well

Attention: une fois nvm installé via le commande curl ou wget, taper la commande source ~/.profile dans le terminal pour rendre nvm accessible via la commande nvm (source: How to Install NVM (Node Version Manager) for Node.js on Ubuntu 12.04 LTS).

Node still isn’t uninstalled!

Dans mon cas, les deux premières manips décrites dans ce billet ont suffit. Si ce n’est pas votre cas, poursuivez avec les manips décrites ci-dessous.

If you have done the above and you can still execute node on your terminate by firing node then you might need to do the following. Download the source code from nodejs.org exactly like how you have installed your nodejs from source.

Inside the source code, instead of hitting ‘make’ and ‘make install’, do the following

This instruction will uninstall whatever the source has installed into your machine.

Node and Npm still not uninstalled

Well, if you did all the above and you can still use node on your machine. You might want to try using ‘locate’ and manually removing all the necessary npm and node files in your machine by using

after you remove anything from the above command, you should fire the following to update the latest locate database

but you will have the fire the above command every time you successfully remove certain directory as ‘locate’ only update periodically at a specific time every day.


Si la solution ci-dessus n’a pas fonctionné, vous pouvez toujours tenter les solutions ci-dessous:

Nouvelle solution

Passer en mode root en tapant sudo su. Puis taper la ligne suivante: curl -L https://www.npmjs.com/install.sh | sh.

Problème!

Attention: passer en mode root va updater NPM en mode root uniquement… Si l’on sort de ce mode (commande exit), la commande npm -v nous donne toujours la version précédente.

npm update check failed


Commencer par essayer ceci:

Source: How to Install Latest Node.js and NPM on Ubuntu with PPA. Version PDF pour la postérité: tecadmin.net-How to Install Latest Nodejs and NPM on Ubuntu with PPA.

[NPM][Gulp] Ajouter un custom build de Modernizr à un projet

Ajouter les sources de Modernizr comme dépendances NPM

Source: Modernizr documentation > Downloading Modernizr > Command Line Config.

Installer également le paquet gulp-modernizr.

Ce plugin permet tout un tas de paramétrages détaillés ici. Pour l’heure, nous exploiterons uniquement les champs options et tests.

gulpconf.json

Ici je créer un custom build avec uniquement la feature touchevents à déclarer sous tests.

Connaître les options requises en fonction des features qu’on souhaite embarquer

Pour vous aider à savoir quelles sont les options requises en fonction des features que vous souhaitez utiliser, vous pouvez créer votre custom build via l’interface en ligne disponible sur modernizr.com.

Choisissez par exemple la feature touchevents et cliquez sur BUILD (bouton rose en haut à droite). Une modale apparaît. Sous Grunt config cliquez sur « Copy to clipboard ». Le code suivant apparaît:

Les champs options et tests révèlent les pré-requis à renseigner dans la configuration de votre plugin Gulp.

gulpfile.js

Déclarer gulp-modernizr:

Puis initialiser la tâche de build:

[Drupal 7] Conflit Drupal7/NPM – Erreur « segmentation fault » à l’utilisation de Drush

Problème:

Erreur de segmentation (core dumped) au lancement de la commande Drush permettant de vider les caches.

Solution:

Il s’agit en fait d’un conflit entre Drupal7 et Npm. Drupal7 stocke des informations relatives au thème dans un fichier *.info. Certains paquets Npm ont également des fichiers *.info. Lorsque Drush vide les caches, il parcourt l’arborescence projet à la recherche de fichiers *.info et ne sait pas faire la différence entre ceux de Drupal7 et ceux des modules Npm (généralement stockés dans un dossier node_modules au même niveau d’arborescence que le fichier package.json.

La solution est ici, sous Important: Preventing segmentation fault. J’avais, en premier lieu, tenté cette technique à peu près similaire, mais les fichiers *.info présents dans les paquets Npm ne s’effaçaient pas (problème de droits ?).

Dans votre package.json, ajouter les lignes suivantes :

Créez également un fichier .npmrc avec un formatage « Unix » (Dans Sublime Text 3: View > Line endings > Unix) qui contient le code suivant :

Si les fichiers *.info ne se suppriment pas avec cette méthode :

Vous pouvez toujours le faire à la main depuis le shell :

[NPM] Résolution d’erreurs

tunneling socket could not be established, cause=getaddrinfo ENOTFOUND address address:8080

$ vim /home/intlangf/.npmrc et commenter la la ligne qui dirige vers le port 8080 :


Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x

Found bindings for the following environments:
– Linux 64-bit with Node.js 11.x


lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/bin/node -v
v8.10.0
lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/local/bin/node -v
v11.2.0

Lors de npm install ou npm rebuild, c’était « /usr/local/bin/node » qui était utilisé, au lieu de « /usr/bin/node »
Je n’ai pas trouvé où changer ça pour utiliser la bonne commande. j’ai donc renommé « /usr/local/bin/node » vers « /usr/local/bin/node.old » et créer un lien symbolique vers « /usr/bin/node » et là, ça passe.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑