Comment déployer votre application sur le Web à l'aide d'Express.js et Heroku

Si vous êtes nouveau dans le monde du développement Web, vous passerez beaucoup de temps à apprendre à créer des sites statiques avec HTML, CSS et JavaScript.

Vous pourriez alors commencer à apprendre à utiliser des frameworks populaires tels que React, VueJS ou Angular.

Mais après avoir essayé quelques nouvelles idées et exécuté certains sites localement, vous vous demandez peut-être comment déployer réellement votre site ou votre application. Et il s'avère qu'il est parfois difficile de savoir par où commencer.

Personnellement, je trouve qu'exécuter un serveur Express hébergé sur Heroku est l'un des moyens les plus simples de démarrer. Cet article vous montrera comment procéder.

Heroku est une plate-forme cloud qui prend en charge un certain nombre de langages et de cadres de programmation différents.

Ce n'est pas un article sponsorisé - il existe bien sûr de nombreuses autres solutions disponibles, telles que:

  • Océan numérique
  • Services Web Amazon
  • Azur
  • Google Cloud Platform
  • Netlify
  • ZEIT maintenant

Vérifiez-les tous et voyez ce qui correspond le mieux à vos besoins.

Personnellement, j'ai trouvé Heroku le plus rapide et le plus facile à utiliser "out of the box". Le niveau gratuit est quelque peu limité en termes de ressources. Cependant, je peux le recommander en toute confiance à des fins de test.

Cet exemple hébergera un site simple utilisant un serveur Express. Voici les étapes de haut niveau:

  1. Configuration avec Heroku, Git, npm
  2. Créer un serveur Express.js
  3. Créer des fichiers statiques
  4. Déployer sur Heroku

Cela devrait prendre environ 25 minutes au total (ou plus si vous souhaitez passer plus de temps sur les fichiers statiques).

Cet article suppose que vous connaissez déjà:

  • Quelques bases de HTML, CSS et JavaScript
  • Utilisation de base de la ligne de commande
  • Git de niveau débutant pour le contrôle de version

Vous pouvez trouver tout le code dans ce référentiel.

Mise en place

La première étape de tout projet consiste à configurer tous les outils dont vous savez avoir besoin.

Vous aurez besoin de:

  • Node et npm installés sur votre machine locale (lisez comment faire cela ici)
  • Git installé (lisez ce guide)
  • La CLI Heroku installée (voici comment procéder)

1. Créez un nouveau répertoire et initialisez un référentiel Git

Depuis la ligne de commande, créez un nouveau répertoire de projet et accédez-y.

$ mkdir lorem-ipsum-demo $ cd lorem-ipsum-demo

Maintenant que vous êtes dans le dossier du projet, initialisez un nouveau référentiel Git.

⚠️Cette étape est importante car Heroku s'appuie sur Git pour déployer le code de votre machine locale vers ses serveurs cloud ⚠️

$ git init

Enfin, vous pouvez créer un fichier README.md à modifier ultérieurement.

$ echo "Edit me later" > README.md

2. Connectez-vous à la CLI Heroku et créez un nouveau projet

Vous pouvez vous connecter à Heroku en utilisant la CLI Heroku (interface de ligne de commande). Vous aurez besoin d'un compte Heroku gratuit pour ce faire.

Il y a deux options ici. Par défaut, Heroku vous permet de vous connecter via le navigateur Web. L'ajout de l' -iindicateur vous permet de vous connecter via la ligne de commande.

$ heroku login -i

Maintenant, vous pouvez créer un nouveau projet Heroku. J'ai appelé le mien lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Nommer votre projet:

  • Heroku générera un nom aléatoire pour votre projet si vous n'en spécifiez pas dans la commande.
  • Le nom fera partie de l'URL que vous pouvez utiliser pour accéder à votre projet, alors choisissez celle que vous aimez.
  • Cela signifie également que vous devez choisir un nom de projet unique que personne d'autre n'a utilisé.
  • Il est possible de renommer votre projet plus tard (alors ne vous inquiétez pas trop pour obtenir le nom parfait maintenant).

3. Initialisez un nouveau projet npm et installez Express.js

Ensuite, vous pouvez initialiser un nouveau projet npm en créant un fichier package.json. Utilisez la commande ci-dessous pour ce faire.

⚠️Cette étape est cruciale. Heroku compte sur vous pour fournir un fichier package.json pour savoir qu'il s'agit d'un projet Node.js lors de la création de votre application ⚠️

$ npm init -y

Ensuite, installez Express. Express est un framework de serveur largement utilisé pour NodeJS.

$ npm install express --save

Enfin, vous êtes prêt à commencer à coder!

Ecrire un serveur Express simple

L'étape suivante consiste à créer un fichier appelé app.js, qui exécute un serveur Express localement.

$ touch app.js

Ce fichier sera le point d'entrée de l'application lorsqu'elle sera prête. Cela signifie que la seule commande nécessaire pour lancer l'application sera:

$ node app.js

Mais d'abord, vous devez écrire du code dans le fichier.

4. Modifiez le contenu de app.js

Ouvrez app.jsdans votre éditeur préféré. Écrivez le code ci-dessous et cliquez sur Enregistrer.

// create an express app const express = require("express") const app = express() // use the express-static middleware app.use(express.static("public")) // define the first route app.get("/", function (req, res) { res.send("

Hello World!

") }) // start the server listening for requests app.listen(process.env.PORT || 3000, () => console.log("Server is running..."));

Les commentaires devraient aider à indiquer ce qui se passe. Mais décomposons rapidement le code pour mieux le comprendre:

  • The first two lines simply require the Express module and create an instance of an Express app.
  • The next line requires the use of the express.static middleware. This lets you serve static files (such as HTML, CSS and JavaScript) from the directory you specify. In this case, the files will be served from a folder called public.
  • The next line uses app.get() to define a URL route. Any URL requests to the root URL will be responded to with a simple HTML message.
  • The final part starts the server. It either looks to see which port Heroku will use, or defaults to 3000 if you are running locally.

⚠️The use of process.env.PORT || 3000 in the last line is important for deploying your app successfully ⚠️

If you save app.js and start the server with:

$ node app.js

You can visit localhost:3000 in your browser and see for yourself the server is running.

Create your static files

The next step is to create your static files. These are the HTML, CSS and JavaScript files you will serve up whenever a user visits your project.

Remember in app.js you told the express.static middleware to serve static files from the public directory.

The first step is of course to create such a directory and the files it will contain.

$ mkdir public $ cd public $ touch index.html styles.css script.js

5. Edit the HTML file

Open index.html in your preferred text editor. This will be the basic structure of the page you will serve to your visitors.

The example below creates a simple landing page for a Lorem Ipsum generator, but you can be as creative as you like here.

Lorem Ipsum generator

How many paragraphs do you want to generate?

Generate Copy!

6. Edit the CSS file

Next up is editing the CSS file styles.css. Make sure this is linked in your HTML file.

The CSS below is for the Lorem Ipsum example. But again, feel free to be as creative as you want.

h1 { font-family: 'Alegreya' ; } body { font-family: 'Source Sans Pro' ; width: 50%; margin-left: 25%; text-align: justify; line-height: 1.7; font-size: 18px; } input { font-size: 18px; text-align: center; } button { font-size: 18px; color: #fff; } #generate { background-color: #09f; } #copy { background-color: #0c6; }

7. Edit the JavaScript file

Finally, you might want to edit the JavaScript file script.js. This will let you make your page more interactive.

The code below defines two basic functions for the Lorem Ipsum generator. Yes, I used JQuery - it's quick and easy to work with.

$("#generate").click(function(){ var lorem = $("#lorem"); lorem.html(""); var quantity = $("#quantity")[0].valueAsNumber; var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"]; for(var i = 0; i < quantity; i++){ lorem.append("

"+data[i]+"

"); } }) $("#copy").click(function() { var range = document.createRange(); range.selectNode($("#lorem")[0]); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); } )

Note that here, the data list is truncated to make it easier to show. In the actual app, it is a much longer list of full paragraphs. You can see the entire file in the repo, or look here for the original source.

Deploying your app

After writing your static code and checking it all works as expected, you can get ready to deploy to Heroku.

However, there are a couple more things to do.

8. Create a Procfile

Heroku will need a Procfile to know how to run your app.

A Procfile is a "process file" which tells Heroku which command to run in order to manage a given process. In this case, the command will tell Heroku how to start your server listening on the web.

Use the command below to create the file.

⚠️This is an important step, because without a Procfile, Heroku cannot put your server online. ⚠️

$ echo "web: node app.js" > Procfile

Notice that the Procfile has no file extension (e.g., ".txt", ".json").

Also, see how the command node app.js is the same one used locally to run your server.

9. Add and commit files to Git

Remember you initiated a Git repository when setting up. Perhaps you have been adding and committing files as you have gone.

Before you deploy to Heroku, make sure to add all the relevant files and commit them.

$ git add . $ git commit -m "ready to deploy"

The final step is to push to your Heroku master branch.

$ git push heroku master

You should see the command line print out a load of information as Heroku builds and deploys your app.

The line to look for is: Verifying deploy... done.

This shows that your build was successful.

Now you can open the browser and visit your-project-name.herokuapp.com. Your app will be hosted on the web for all to visit!

Quick recap

Below are the steps to follow to deploy a simple Express app to Heroku:

  1. Create a new directory and initialise a Git repository
  2. Login to the Heroku CLI and create a new project
  3. Initialise a new npm project and install Express.js
  4. Edit the contents of app.js
  5. Edit the static HTML, CSS and JavaScript files
  6. Create a Procfile
  7. Add and commit to Git, then push to your Heroku master branch

Things to check if your app is not working

Sometimes, despite best intentions, tutorials on the Internet don't work exactly as you expected.

The steps below should help debug some common errors you might encounter:

  • Did you initialise a Git repo in your project folder? Check if you ran git init earlier. Heroku relies on Git to deploy code from your local machine.
  • Did you create a package.json file? Check if you ran npm init -y earlier. Heroku requires a package.json file to recognise this is a Node.js project.
  • Is the server running? Make sure your Procfile uses the correct file name to start the server. Check you have web: node app.js and not web: node index.js.
  • Does Heroku know which port to listen on? Check you used app.listen(process.env.PORT || 3000) in your app.js file.
  • Do your static files have any errors in them? Check them by running locally and seeing if there are any bugs.

Thanks for reading - if you made it this far, you might want to checkout the finished version of the demo project.