dwaps/README.md

## README.md

      
    Raw
  

              README.md
            
          
    INSERTION DYNAMIQUE DE CODE DANS UN FICHIER

INSTALLATION

L'index.html et l'index.js doivent se trouver à la racine du projet.
Ensuite:

Les feuilles de styles à la racine du dossier css/
Les scripts à la racine du dossier js/
Les fragments de code html à la racine du dossier html/


UTILISATION

Dans l'index.html, vous pouvez inserer le fichier de votre choix (html, css, ou js). Pour cela, il suffit de respecter la syntaxe suivant @{<type-de-code> <nom-dufichier>.<extension>}.
Par exemple, pour insérer un fichier form.html (créer dans le dossier html/), il faut écrire dans l'index.html @{html form.html}.
Pour lancer le projet, utiliser node depuis un terminal : node index.js. Il era alors accessible à http://localhost:5657.

REMARQUES

Il s'agit d'une mise en oeuvre très simplifiée: le serveur ne gère pas le routing. Tous les fichiers à insérer doivent l'être à l'intérieur d'un unique point d'entrée (index.html).
Il n'y pas non plus de gestion d'erreur pour ne pas alourdir la lecture par l'étudiant. Cela signifie que tout insertion déclarée dans l'index.html doit obligatoirement trouver sont fichier correspondant.
Les fichiers html, css et js présents dans leur dossier respectif sont jusste des exemples d'utilisation. Le fichier comprenant le code principal est index.js. Vous pouvez donc partir sur l'aborescence minimale suivante: l'index.js à la racine du projet et un index.html sans aucune insertion au départ.

  
## footer.html
<hr>
<footer>
  <p><sup>&copy;</sup>DWAPS Formation - Michael CORNILLON</p>
</footer>

## index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Node JS server</title>
    @{style style.css}
  </head>

  <body>
    @{html nav.html}

    <h1>Bienvenue sur mon site !</h1>

    @{html footer.html}

    @{javascript app.js}
  </body>
</html>

## index.js
const { readFileSync } = require('fs');
const { join } = require('path');
const http = require('http');

const PORT = 5657;

let indexHTML = String(
  readFileSync( join(__dirname, 'index.html') )
);
indexHTML = indexHTML.replace(/@\{(.+)?(\})/g, (text, g1) => {
  const exts = new Map([
    [ 'html', '' ],
    [ 'css', 'style' ],
    [ 'js', 'script' ],
  ]);
  const fileName = g1.split(' ')[1];
  const fileExt = fileName.split('.')[1];
  let startTag = '', endTag = '';

  for (let ext of exts.entries()) {
    if (ext[0] !== 'html' && ext[0] === fileExt) {
      startTag = `<${ext[1]}>`;
      endTag = `</${ext[1]}>`;
    }
  }

  const content = String(readFileSync(join(__dirname, fileExt, fileName)));

  return startTag + content + endTag;
});

http.createServer(
  (req, res) => {
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    res.end(indexHTML);
  })
  .listen(PORT);

## nav.html
<nav>
  <div><a href="#home">Accueil</a></div>
  <div><a href="#presentation">Présentation</a></div>
  <div><a href="#contact">Contact</a></div>
</nav>

## style.css
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #000;
  color: #fff;
}
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<title>Node JS server</title>
	@{style style.css}
	</head>

	<body>
	@{html nav.html}

	<h1>Bienvenue sur mon site !</h1>

	@{html footer.html}

	@{javascript app.js}
	</body>
	</html>
	const { readFileSync } = require('fs');
	const { join } = require('path');
	const http = require('http');

	const PORT = 5657;

	let indexHTML = String(
	readFileSync( join(__dirname, 'index.html') )
	);
	indexHTML = indexHTML.replace(/@\{(.+)?(\})/g, (text, g1) => {
	const exts = new Map([
	[ 'html', '' ],
	[ 'css', 'style' ],
	[ 'js', 'script' ],
	]);
	const fileName = g1.split(' ')[1];
	const fileExt = fileName.split('.')[1];
	let startTag = '', endTag = '';

	for (let ext of exts.entries()) {
	if (ext[0] !== 'html' && ext[0] === fileExt) {
	startTag = `<${ext[1]}>`;
	endTag = `</${ext[1]}>`;
	}
	}

	const content = String(readFileSync(join(__dirname, fileExt, fileName)));

	return startTag + content + endTag;
	});

	http.createServer(
	(req, res) => {
	res.setHeader('Content-Type', 'text/html; charset=utf-8');
	res.end(indexHTML);
	})
	.listen(PORT);
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background: #000;
	color: #fff;
	}