Outillage  et

mise en ligne

Conception de documents et d'interfaces numériques

Utilisation d'un serveur de développement local

cd path\to\project
npm init -y
npm install --save-dev parcel-bundler

Parcel bundler

{
  "name": "correction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }
}

Ajouter un script "dev" dans le fichier package.json :

Que fait Parcel ?

  • Analyse les ressources (fichiers) utilisées à partir du point d'entrée spécifié (index.html) (liens vers d'autres pages HTML, inclusion de fichiers CSS, images, JS...)
  • Regroupe les ressources utilisées dans un dossier dist
  • Lance un serveur HTTP local sur le port 1234
  • Observe les modifications faites sur les fichiers pour mettre à jour automatiquement le contenu du dossier dist et raffraichir les onglets de navigateurs ouverts sur http://localhost:1234

Utiliser Parcel pour faire un build de production optimisé

{
  "name": "correction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }
}

On se retrouve avec plein de fichiers en double parce que Parcel ne fait pas le ménage dans le dossier dist entre deux builds

Suppression du contenu de dist entre deux builds

npm install --save-dev rimraf
{
  "name": "correction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean-dist": "rimraf dist",
    "dev": "parcel index.html",
    "predev": "npm run clean-dist",
    "build": "parcel build index.html",
    "prebuild": "npm run clean-dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "rimraf": "^3.0.2"
  }
}

Que fait Parcel (en mode production) ?

  • Analyse les ressources (fichiers) utilisées à partir du point d'entrée spécifié (index.html) (liens vers d'autres pages HTML, inclusion de fichiers CSS, images, JS...)
  • Optimise les ressources qui peuvent l'être (minification des fichiers de texte, optimisation des algorithmes de compression des images selon leur format...)
  • Regroupe les ressources utilisées dans un dossier dist

Grâce à Parcel, on a :

 

  • Un serveur avec rechargement automatique pendant la phase de développement
  • Un dossier avec tous les fichiers optimisés et prêt à être mis en ligne pour la production

Mettre son site web en ligne

Pour mettre un site web en ligne on a besoin :

 

  • d'une machine constamment allumée et reliée à Internet via une bonne connexion (un serveur)
  • d'un logiciel installé sur cette machine, qui tourne en tâche de fond afin d'intercepter les requêtes HTTP qui lui sont envoyées, les traiter, et envoyer les réponses HTTP (un serveur HTTP)

Ca peut sembler facile, mais...

 

  • il faut savoir installer et configurer un serveur HTTP
  • il faut savoir générer des certificats SSL pour pouvoir servir nos pages en HTTPS
  • il faut savoir sécuriser la machine (configuration des accès, SSH, ouverture des ports, firewall...)
  • ...

Vercel

Vercel est un service qui propose d'héberger nos sites web sans qu'on ait à gérer nous-même le serveur

Ce n'est pas le seul qui existe. D'autres exemples de services similaires : Netlify, Heroku

Vercel - création du compte

Vercel s'interface avec différents services externes de gestion de versions (Github, Gitlab, Bitbucket). Il ne permet pas de créer un compte directement sur Vercel, mais de se connecter via l'un de ces 3 services.

Le service le plus utilisé parmi les 3 est Github. Créez un compte sur Github puis utilisez ce service pour vous connecter sur Vercel

Vercel - initialisation de la CLI

Pour intéragir avec Vercel depuis notre machine et y envoyer nos fichiers, on va utiliser la ligne de commande.

 

Premièrement, installer la commande vercel en tapant la commande `npm install -g vercel`

 

Puis lancer la commande `vercel login` et suivre les instructions

Vercel - mise en ligne

Après s'être déplacé dans le dossier du projet (avec la commande `cd`), lancer la commande `vercel`. Au premier lancement, elle nous demande des infos de configuration :

  • Set up and deploy "..."? [Y/n] : taper entrée
  • Which scope to you want to deploy to? : taper entrée
  • Link to existing project? [y/N] : taper entrée
  • What's your project name? (nom par défaut) : entrer le nom souhaité (sans espaces) puis taper entrée
  • In which directory is your code located? ./ : taper entrée
  • Want to override the settings? [y/N] : taper Y puis entrée
  • Avec les flèches du clavier, se déplacer sur "Output directory" puis appuyer sur Espace pour sélectionner cet élément, puis taper sur entrée
  • What's your Output Directory? : taper "dist" puis entrée

Liens complémentaires

CDIN - 06 - Mettre un site web en ligne

By Cyrille Perois

Made with Slides.com

CDIN - 06 - Mettre un site web en ligne

  • 965

More from Cyrille Perois