Server-Side Scripting/Routes and Templates/Node.js (Express)
Appearance
app.js
[edit | edit source]// Demonstrates a complete server-side website using:
// * static HTML and CSS
// * a template
// * a code module
//
// NOTE: Static pages (html, css, images, etc.) are placed in
// a folder named "static". Template pages are placed in a folder
// named "templates". Code modules are placed in a folder named
// "routes".
//
// Folder structure:
// app.js
// routes
// code.js
// template.js
// static
// index.html
// static.html
// styles.css
// templates
// template.html
//
// References:
// https://repl.it/languages/express
// https://expressjs.com/en/guide/routing.html
// https://expressjs.com/en/starter/static-files.html
const express = require("express");
const fs = require("fs");
const app = express();
app.use(express.static(__dirname + '/static'));
app.use(express.urlencoded({
extended: true
}));
// Map routes to all .js files in the /routes folder.
fs.readdirSync("./routes").map((filename) => {
const module = require("./routes/" + filename);
const route = filename.replace(".js", "")
app.use("/" + route, module);
});
app.listen(3000, () => console.log('server started'));
routes/code.js
[edit | edit source]// Displays "Hello code world!"
//
// References:
// https://expressjs.com/en/starter/hello-world.html
// https://expressjs.com/en/guide/routing.html
const express = require('express')
const router = express.Router()
const HTML = `
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="styles.css">
`
router.get("/", function (request, response) {
result = HTML;
result += "Hello code world!";
response.send(result);
});
module.exports = router;
routes/template.js
[edit | edit source]// This module returns a rendered template.
//
// References:
// https://expressjs.com/en/starter/hello-world.html
// https://expressjs.com/en/guide/routing.html
// https://www.npmjs.com/package/handlebars
// https://handlebarsjs.com/guide
const express = require('express')
const fs = require("fs");
const handlebars = require('handlebars');
const router = express.Router()
router.get("/", function (request, response) {
let source = fs.readFileSync("./templates/template.html");
let template = handlebars.compile(source.toString());
let data = {
greeting: "Hello",
name: "world"
}
let result = template(data);
response.send(result);
});
module.exports = router;
static/index.html
[edit | edit source]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
<ul>
<li><a href="static.html">Static</a></li>
<li><a href="template">Template</a></li>
<li><a href="code">Code</a></li>
</ul>
</body>
</html>
static/static.html
[edit | edit source]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello static world!</p>
</body>
</html>
static/styles.css
[edit | edit source]body {
color: blue;
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
}
templates/template.html
[edit | edit source]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>{{greeting}} template {{name}}!</p>
</body>
</html>
Try It
[edit | edit source]Copy and paste the code above into the following free online development environment or use your own Node.js (Express) compiler / interpreter / IDE.