Server-Side Scripting/Routes and Templates/Node.js (Express)

From Wikiversity
Jump to navigation Jump to search

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.

See Also[edit | edit source]

Retrieved from "https://en.wikiversity.org/w/index.php?title=Server-Side_Scripting/Routes_and_Templates/Node.js_(Express)&oldid=2253571"