Illuminatiiiiii
8/27/2018 - 12:25 AM

Using HTML and Template Engines

Episode 6 of the Node.js and Express Tutorial series. Video:

homepage.ejs
content_copyfile_download
<!-- This is a simple EJS file, a file that mixes HTML with Javascript -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Illuminati Productions</title>
    </head>
    <body>
        <h1>Welcome to the Illuminati Productions website</h1>
    </body>
</html>
game.ejs
content_copyfile_download
<!-- This is a simple EJS file, a file that mixes HTML with Javascript -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Game Page</title>
    </head>
    <body>
        <h2>Game Title: <%= title %></h2> <!-- Anything between the EJs signs are javascript code -->
        <h3>Game Creator: <%= creator %></h3>
    </body>
</html>
directhtmlcodesend.js
content_copyfile_download
const express = require("express");
const app = express();

app.get("/", function(req, res){
    res.render("homepage.ejs"); //Every EJS file must be in the views folder. EJS is our view engine
});

app.get("/game/:gameTitle/:gameCreator", function(req, res){
    //Just creating variables for our two route parameters
    const title = req.params.gameTitle;
    const creator = req.params.gameCreator;
    res.render("game.ejs", {
        //Passing our route parameters to EJS file we're rendering
        title: title, //The names can be the same
        creator: creator //The name on the left is the one you will reference in the EJS file.
    });
});

app.listen("3000", function(){
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});
Using HTML and Template Engines.txt
content_copyfile_download
I'm going to cut down on the commentary for these from now on. If you want a detailed explanation of the code, make sure to check the videos! Don't worry though, the code will still have some explanation. <3

EJS is basically a dynamic webpage package from npm(View Engine) that allows you to fuse javascript code like: loops, if statements and variables into your HTML code.