Dans ce guide, vous découvrirez comment il est possible de créer une application Web sur Hosting Node JS avec un service formidable comme Heroku. Nous analyserons en détail toutes les étapes nécessaires.
di Antonio Lamorgese
Si vous lisez ce guide, c’est sûrement parce que vous êtes attiré par les technologies de l’information et la programmation. Par conséquent, si vous suivez ce que j’écris, vous aurez déjà lu dans certains de mes autres billets, que je n’aime pas négliger les principes cardinaux d’un sujet soumis à l’intuition ou aux opinions personnelles. Alors, même si je risque d’être un peu chiant et évident, je vais essayer de reprendre l’argumentaire sur Node JS en définissant tout de suite un aspect très important, qui concerne le développement d’applications web, c’est-à-dire le sens du terme “deploy” que j’analyserai en détail en expliquant comment il est possible de développer et de créer une application web sur Hosting Node JS avec un service formidable comme Heroku.
1. Qu’est-ce que Node JS
Ces dernières années, Node JS s’est avéré être le langage le plus adapté pour développer une application web, et ce pour une bonne raison. Node JS vous permettra d’exécuter du Javascript côté serveur, ce qui n’est pas une mince affaire. Après l’avoir utilisé pendant un certain temps, vous comprendrez également pourquoi. Non seulement il est constamment mis à jour et conforme aux dernières mises à jour et avancées de JavaScript, mais son système d’exécution de code asynchrone lui permet de traiter rapidement de grandes quantités d’informations sans utiliser de threads qui rendent généralement le code plus complexe. à gérer. Certains ont déjà créé une applications avec Node JS et si vous l’avez fait, vous vous êtes sûrement posé cette question: “Que dois-je faire pour distribuer mon application Node JS”? Ne vous inquiétez pas, ce n’est pas une question triviale. Si vous le cherchez sur Google, vous vous rendrez vite compte qu’il existe de nombreuses opinions et approches différentes à ce sujet, mais chacune semble être plus compliquée que l’autre. Il n’y a qu’une seule réponse à cette question: “Heroku”. Mais essayons maintenant de comprendre ce qu’est Heroku et comment il peut vous aider à distribuer et à développer des applications Web avec Node JS.
Lire la suite: Le meilleur éditeur de photos pour retouche photos gratuit
2. Qu’est-ce qu’Heroku
Si vous aimez Node JS et recherchez une plateforme d’hébergement facile à utiliser, flexible et illimitée pour développer une application, vous devez absolument connaître Heroku. Heroku est une PaaS (Platform as a Service) qui vous permet de développer et de vous concentrer uniquement sur les aspects importants du développement. En bref, cela vous permettra de vous concentrer uniquement sur la création de l’application elle-même au lieu de passer du temps à vous soucier de la configuration du serveur ou des problèmes liés à l’évolutivité, etc. Mais voyons comment Heroku peut vous aider à développer une application avec Node JS.
3. Développement avec Node JS et Heroku
Node JS et Heroku sont la combinaison gagnante pour votre site Web si vous souhaitez vous libérer d’autres soucis en laissant ce service fantastique s’occuper des serveurs et de leur configuration. Une opération compliquée et chronophage pour ceux qui ne connaissent pas trop le sujet ou qui sont novices avec ce type de développement. Mais voyons maintenant comment développer votre première application web avec Node JS et Heroku.
3.1 Installer Node JS
Eh bien, l’exigence de base, avant de procéder à la création d’une application, est d’installer Node JS. La chose est plus simple que prévu. Allez simplement sur sa page d’accueil, téléchargez et exécutez le package d’installation pour votre système d’exploitation.
Il est de bon ton, après l’installation de chaque logiciel, de vérifier sa bonne exécution. Par conséquent, ouvrez l’invite de commande et tapez cette instruction: « node -v« . Si le système affiche la version de Node JS installée, cela signifie que tout s’est bien passé.
3.2 Installer le code Visual Studio
Une autre exigence fondamentale est l’installation d’un éditeur de texte avancé pour le développement. Le seul remarquable est Visual Studio Code. Je vous en ai déjà parlé dans mon autre guide sur ce sujet.
Lire la suite: JavaScript Local Storage Le navigateur web en tant que datastore
Cependant, l’installation de Visual Studio Code est aussi simple que l’installation de Node JS. Là aussi, il vous suffit de vous rendre sur sa page d’accueil en cliquant sur ce lien et de télécharger et d’exécuter le package d’installation de votre système d’exploitation.
Encore une fois, c’est une bonne idée de vérifier que Visual Studio Code est correctement installé. Par conséquent, ouvrez l’invite de commande et tapez cette instruction: « code -v ». Si le système affiche la version de Visual Studio Code installée, cela signifie que tout s’est bien passé.
3.3 Créez votre application NodeJS
Ok, nous sommes prêts. Maintenant, créez un dossier sur votre bureau et, pour plus de simplicité, nous l’appellerons « HelloWorld. Ouvrez maintenant Visual Studio Code en cliquant sur l’icône sur le bureau, cliquez sur le bouton « Open folder » et sélectionnez « HelloWorld« .
Eh bien, à ce stade, il vous suffit de créer le fichier index.js dans lequel nous allons taper les instructions nécessaires pour afficher le classique « Hello World…!« . Ensuite, développez le dossier « HelloWorld« , présent dans Visual Studio Code, en cliquant sur la flèche vers le bas à côté du nom du dossier lui-même. Ensuite, cliquez sur l’icône avec le symbole ‘+‘, tapez ‘index.js‘ et appuyez sur la touche ENTER.
Maintenant, copiez et collez le code suivant dans le fichier index.js:
var http = require('http');
http.createServer(function (req, res) {
res.write('Hello World!');
res.end();
}).listen(3000, function(){
console.log("server start at port 3000");
});
3.4 Exécutez votre application Node JS
Eh bien, après tant de travail acharné, je pense que vous voulez voir votre code Node JS au travail? Je le pense vraiment. Ensuite, rouvrez l’invite de commande, accédez au dossier HelloWorld sur le bureau et tapez la commande « node index.js » suivie de la touche ENTER.
À ce stade, votre serveur Web, créé avec Node JS, est prêt et répond sur le port 3000. Il vous suffit d’ouvrir votre navigateur Web préféré et de pointer l’adresse: http://localhost:3000, et le message d’accueil « Hello World …! » s’affichera dans la fenêtre active du navigateur.
4. Déploiement d’une application Web Node JS avec Heroku
Le terme « deployment » a déjà été défini à plusieurs reprises dans des contextes de développement d’applications web, mais toujours, avec un sens restreint. Dans un sens abrégé et moins technique, on entend généralement le transfert d’un ou plusieurs fichiers du serveur du développeur (la machine sur laquelle le développement a généralement lieu) vers un serveur de production (la machine qui hébergera le site une fois terminé).
L’une des difficultés rencontrées par les débutants en programmation web est le choix de l’environnement serveur, qui peut être assez complexe, car il dépend d’une série d’aspects techniques et fonctionnels qui vont caractériser le logiciel. Ce problème n’est pas nouveau, mais il est important de savoir qu’il existe des solutions gratuites et très efficaces qui vous aideront à diffuser votre application en ligne.
Heroku, en fait, est une excellente plate-forme de déploiement, si vous souhaitez vous inscrire pour la première fois et que vous ne savez pas comment le faire, dans ce guide, je vais vous expliquer toutes les étapes pour créer et distribuer votre application Node JS avec ce service extraordinaire.
4.1 Inscrivez-vous et connectez-vous à Heroku
La première étape nécessaire est de s’inscrire sur Heroku. La procédure est similaire à de nombreux autres sites Web qui nécessitent une authentification de l’utilisateur avant d’accorder l’accès aux services proposés. Ensuite, cliquez sur ce lien. La page que vous verrez correspond à la page d’accueil du portail Heroku. Depuis cette position, vous aurez accès à tous les services que le portail met à votre disposition. Mais vous devez d’abord vous authentifier, pour ce faire, vous devez vous inscrire en tant que nouvel utilisateur.
Si vous êtes déjà inscrit, cliquez sur le lien « Log in« , sinon cliquez sur le bouton « Sign in » et procédez à l’enregistrement en tant que nouvel utilisateur. Le masque que vous verrez doit être complété dans toutes ses parties. Une fois que vous avez rempli le formulaire d’inscription, vous pouvez cliquer sur le bouton « Create Free Account« . Immédiatement après, vous recevrez un e-mail de confirmation avec lequel vous activerez votre compte Heroku gratuit.
Après la phase d’inscription, vous pouvez cliquer sur le bouton « Log in » pour accéder à la plateforme. Saisissez « email » et le « Password » indiqués lors de l’inscription et cliquez sur le bouton « Log in« .
Il est facile pour Heroku de vous demander de confirmer l’accès en entrant le code OTP, configuré, par exemple via l’application « Free OTP » ou « Google Authenticator » (au choix), lors de l’inscription sur le portail. Après avoir entré le code de vérification, cliquez sur le bouton « Verify« .
À ce stade, vous êtes authentifié dans Heroku et pourrez accéder librement à tous les services proposés par le portail.
4.2 Créer une application sur Heroku
Rouvrez Visual Studio Code avec le fichier index.js ouvert et prêt pour les modifications dans l’éditeur. Depuis la fenêtre du terminal Visual Studio Code, tapez la commande: “npm init” et appuyez sur ENTER à chaque requête. A la fin de la phase d’exécution de la commande vous retrouverez le fichier “package.json” dans le même dossier que le fichier index.js.
Maintenant, ouvrez le fichier package.json et éditez-le en insérant les lignes de code suivantes:
{
"name": "heroku",
"version": "1.0.0",
"description": "",
"main": "index.js",
"start": "node index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC"
}
Maintenant, revenez à la page d’accueil Heroku et cliquez sur le bouton « Create new app« . Spécifiez le nom de l’application, écrit tout en minuscules, choisissez votre statut d’adhésion et cliquez sur le bouton « Create app« .
Considérez que vous pouvez également modifier le nom de l’application que vous allez créer avec Heroku, mais il doit s’agir d’un nom unique dans son conteneur pour une région ou un état spécifique. Par conséquent, après avoir tapé le nom de l’application, Heroku, il vous donnera le résultat positif ou négatif sur la possibilité de créer une application avec ce nom et renverra le message: « helloworld-node is available » (voir figure).
4.3 Téléchargez et installez Heroku CLI
À ce stade, il est nécessaire de télécharger Heroku CLI, la console de commande Heroku depuis le terminal. Après avoir cliqué sur le lien « Download and install Heroku CLI« , vous pouvez télécharger celui qui convient le mieux à votre système d’exploitation, une fois le téléchargement terminé, vous pouvez l’installer.
4.4 Déployez votre application sur Heroku
Une fois l’installation Heroku CLI terminée, retournez dans Visual Studio Code et dans la fenêtre du terminal tapez cette commande: « heroku login » suivi d’un appui sur la touche ENTER. La commande de connexion heroku vous demandera si vous souhaitez vous connecter via le navigateur, si tel est votre choix, vous cliquerez à nouveau sur la touche ENTER et le navigateur s’ouvrira sur la page de connexion Heroku. Il ne vous reste plus qu’à cliquer sur le bouton « Login » de la page de connexion Heroku de votre navigateur, sans avoir à ressaisir votre nom d’utilisateur et votre mot de passe.
Heroku utilise GIT comme système de gestion des versions de code. Et c’est via GIT que l’application web est transférée vers Heroku. Logiquement, avant de continuer, vous devez installer GIT. Pour cela, il vous suffit de cliquer sur ce lien et de télécharger la version adaptée à votre système d’exploitation. Après avoir installé GIT, et toujours depuis le terminal Visual Studio Code, tapez ces commandes:
git init heroku git:remote -a helloworld-node git add . git commit -am "ici votre message à chaque commit…” git push heroku master
Après l’exécution de ces commandes et surtout de la commande « git push heroku master » votre application sera disponible sur Heroku et pourra être démarrée librement en cliquant sur le lien fourni par la commande elle-même dans la fenêtre du terminal de Visual Studio Code. Le lien aura, pour cette application, cet aspect: “https://helloworld-node.herokuapp.com”. Maintenant, copiez et collez cette URL dans la boîte d’adresse de votre navigateur et vous verrez comme par magie votre application « helloworld-node » prendre vie.
Il est important de préciser qu’à chaque modification du code source et après chaque commande git commit -am “votre message…”, la commande “git push heroku master” doit toujours être répétée. Cela est nécessaire pour répercuter immédiatement les modifications apportées au code source local avec celui présent sur Heroku.
5. Conclusion
J’espère avoir été utile et complet. J’ai essayé d’expliquer, de la manière la plus simple possible, le système utilisé par les pros. Il est important de préciser qu’à chaque modification du code source et après chaque commande git commit -am « votre message … », le “git push heroku master » doit toujours être répétée. Cela est nécessaire pour répercuter immédiatement les modifications apportées au code source local avec celui présent sur Heroku. Le développement logiciel professionnel est un art qui doit être appliqué selon des règles précises à l’aide d’outils avancés tels que Heroku Je vous recommande de revoir plusieurs fois les étapes abordées dans ce guide pour mieux les cibler et apprendre la technique que les développeurs professionnels pratiquent au quotidien.