Bodingles | Colt Steele

Recap

To recap, so far we have:

Our "Parent" directory set up.
Our package.json file is set.
Express is installed (node_modules directory)
Our index.js Server File is set
nodemon is installed (for build purposes)
EJS is installed.
and we have our views folder for our templates.

Here is our directory structure:

Parent Directory
- node_modules
- views
- index.js
- package-lock.json
- package.json

and here is what we have for our Server Code, so far:

JavaScript
index.js | Server Code
// Set the variables and requires
const express = require( 'express' );
const app = express();
const port = 3000;
// set our view engine to ejs
app.set( 'view engine', 'ejs' );
// get request for root dir
app.get( '/', ( req, res ) => {
- res.send('Responding on Root Directory.')
})
// Start Server : Listening on {port}
app.listen( port, () => {
- console.log(`Server Online : Listening on port: ${port}`);
})

Setting Up our Views

Now when we talk about views, we are talking about our templates. So from here on, we're just going to call them views.

Now we are ready to create our first view, our "Home Page". So under our views directory, we'll create a new sub-directory called, home. Also, the filename must end with the extension .ejs. So the path is views/home.ejs.

Now, in our home.ejs file, we write html code but the ejs gives us some new capabilities we will discuss in a bit. Let's start by creating the basic html structure with [sh + !].

This gives us our basic html structure. In the body we'll add an <h3>EJS Home Page</h3> with a couple of Lorem Ipsum paragraphs.

Now, within our index.js Server File, we can send back a file template, instead of a string of text, like we have done so far. The express method we are going to use for this is called render and it's info can be found here. According to the documentation, it Renders a view and sends the rendered HTML string to the client.

So instead of sending a string of text, we're going to be sending a string of html data.

So in our index.js Server File that we have so far, we have the following code:

// get request for root dir
app.get( '/', ( req, res ) => {
- res.send('Responding on Root Directory.')
})

This sets up a get request that returns "Responding on Root Directory." if the root directory / is requested. And we're going to modify this with to use the render method, like so:

// get request for root dir
app.get( '/', ( req, res ) => {
- res.render('home')
})

Now, a couple of points here with our render method:

We didn't need to define our path as views/home, because:
- - according to the express documentation, the default view is a views sub-directory.
- - although we could have, we did not change that default directory, so ejs is going to work with the views directory by default.

Also, we did not need to specify home.ejs in the render method, because when we defined the view engine with the line:

app.set( 'view engine', 'ejs' );

we also defined the default file type as ejs. So we can just send the string as:

res.render('home')

node path

So far, we have been working within our root directory, with all of our files and folders all neatly structured within. But what if we wanted to set up a default express directory, with ejs, our index.js file, and our views folder all withing this express directory. And we want to run our index.js from a separate directory. How to accomplish this?

Well, we can do this by using the node path module. More info can be found here, but essentially we set up a node path to our "working environment".

So, in our index.js file, we first need to require the path module:

const path = require( 'path' );

and the after our code that defines our view engine:

app.set( 'view engine', 'ejs' );

we add a new set statement:

app.set( 'views', path.join( __dirname, '/views' ));

So, __dirname is taking the current directory, (where the index.js file is located), and joining that path with /views.

So what this is saying is that if my current working directory (cwd) is not the same one that includes express, and all of the necessary files like index.js, I can still call [nodemon expressDirectory/index.js] and my view will still run, just as if I had ran it from within the working express directory.

So if my express directory name is express, and I'm one level up in the directory structure, I can still run index.js by calling [nodemon express/index.js], and because I "joined" the express working directory to the /views directory, it will know where to find all of my view files. The end result being that we can execute our Server Code from anywhere.

Just remember that __dirname refers to the directory name where this file (index.js) resides. I specifically mention that this file is index.js, because index.js does not have to be named index.js. You can name it anything you like.

Final Code

so far ...

Our "Parent" directory is set up [express].
Our package.json file is set.
Express is installed (node_modules directory)
Our index.js Server File is set
nodemon is installed (for build purposes)
EJS is installed.
we have our views folder for our templates.
we have created our home.ejs file within our view directory.
we have required our node path module (within our index.js Server File).
we have defined our __dirname path (within our index.js Server File)