Installer NodeCG et lancer son premier projet

Avant d’installer NodeCG

Avant de commencer, je pars du principe que vous avez déjà installé quelques outils et que vous connaissez au moins leurs bases :

• Node.js : j’utilise actuellement la version 22.13.1. J’ai rencontré quelques problèmes avec des versions plus récentes de Node.js, donc cette version est celle que j’utiliserai dans ce guide.
• npm : le gestionnaire de paquets fourni avec Node.js.
• Git (facultatif) : pour conserver notamment les historiques et les modifications apportées au projet.
• Un editeur de code : personnellement j’utilise VSCodium
• OBS Studio, ou un autre logiciel de diffusion capable d’afficher des sources “Navigateur Web”.

Si vous avez un doute concernant Node et npm, vous pouvez simplement vérifier leur installation depuis un terminal :

node -v
npm -v

Si les deux commandes retournent une version, tout est prêt !

Installer NodeCG

NodeCG s’installe simplement avec npm, le gestionnaire de paquets fourni avec Node.

Pour une première découverte je vous épargne la création manuelle de la structure du projet, je vous propose donc de travailler directement sur un petit bundle d’initiation prêt à l’emploi.

Téléchargement direct

L’objectif est simple : vous permettre de lancer NodeCG rapidement et de commencer à l’explorer, sans avoir à vous préoccuper dès maintenant de la création des différents dossiers et fichiers.

1. Télécharger le bundle d’initiation

2. Extraire le dossier quelque part

3. Ouvrir un terminal dans le dossier (clic-droit > “Ouvrir dans un terminal”)

4. Tapez la commande :

   npm nodecg install

5. npm télécharge NodeCG et un dossier node_modules apparaît dans le projet

Une fois l’installation terminée, vous pouvez lancer NodeCG.

Note

NodeCG v3 est actuellement en préparation pour décembre 2026. Certains détails présentés dans ce guide pourront donc évoluer avec cette nouvelle version.

Lancer NodeCG

Depuis le dossier de votre projet, ouvrez un terminal et lancez :

npx nodecg start

Si vous voyez ceci, c’est parfait !

Le premier démarrage peut prendre un peu de temps mais si tout se passe bien, NodeCG démarre dans votre terminal.

Danger

Attention vous devez garder ce terminal ouvert, sinon NodeCG s’arrête !

Accéder à l’interface de NodeCG

Une fois NodeCG lancé, ouvrez votre navigateur et rendez-vous à l’adresse : http://localhost:9090

Vous arrivez alors sur l’interface de NodeCG.

Note

localhost:9090 signifie que vous accédez à un service qui fonctionne directement en local, sur votre ordinateur, sur le port 9090

Dashboard

Le Dashboard regroupe vos panneaux de contrôle. C’est ici que vous pourrez interagir avec les différentes fonctionnalités et les différents éléments graphiques de votre projet.

Vous verrez les deux panneaux de controle inclus dans ce bundle : un panneau d’accueil et un panneau pour gérer le scoreboard.

Un aperçu de la partie “Dashboard”

Graphics

Les Graphics correspondent aux pages HTML que vous pouvez afficher dans votre logiciel de diffusion, par exemple dans OBS.

Vous pouvez donc avoir, par exemple, un panneau dans le Dashboard permettant de modifier le contenu d’un graphique, tandis que ce graphique est affiché dans OBS.

Il y a deux élements visuels listés dans ce bundle : un visuel d’exemple (hello.html) et le scoreboard à intégrer dans OBS.

Les différents éléments graphiques disponibles

A vous de tester

Si NodeCG est lancé, testez par vous-même en ouvrant un élement graphique dans votre navigateur : http://localhost:9090/bundles/nodecg-initiation-test/graphics/hello.html

Votre premier projet

Si vous utilisez le bundle d’initiation, vous trouverez une structure de projet volontairement simple.

Elle a été pensée pour vous permettre de comprendre progressivement comment fonctionne un projet NodeCG, sans vous retrouver dès le départ avec une multitude de fichiers et de dossiers dont vous ne connaissez pas encore le rôle.

L’important est simplement de retenir que :

• NodeCG est installé et géré avec npm
• le serveur NodeCG se lance avec npx nodecg start
• le Dashboard permet de contrôler votre projet ;
• les Graphics permettent d’afficher des éléments dans OBS

À partir de cette base, vous pourrez commencer à créer vos propres panels, graphics et autres éléments pour construire votre première application NodeCG.