Includes

Sometimes you may find that you are writing the same code for several different pages. A "Header" and a "Footer" are good examples of this as you will probably want these on most of your site pages. Say, you have a sight, you want to change some of the "Header" or Footer" data. If you only have a few pages it becomes a nuisance, but if you have a few hundred pages, it becomes very problematic.

*note: some programmers call these files "partials"", and some call them "includes".

A better way to do this would be to create these files as separate files, and then include them into our pages, where needed. Like PHP, Express gives us a way to include separate files into any different location within a webpage coding. The caveat' is that they must be ejs files.

The way to set this up is pretty simple. First you need to create a sub-directory to hold our include files. You can name this sub-folder anything you like (I normally call it includes). So Our directory structure would look something like this:

•   express
•   node_modules
•   views
  •   includes
  •   projectFile1.ejs
  •   projectFile2.ejs
•   index.js
•   package-lock.json
•   package.json

You then just need write your include HTML files as ejs files.

Remember, with ejs files, you can incorporate both HTML, and Js as needed. Also, the base structure of a ejs file is the same as for an HTML file, but you don't write an entire HTML page with the html declarations, head section, body, and closing body and html tags. These are already incorporated in the file where you are placing your includes.

Creating the Include File

To write our include files, we just need to write the specific code we need. For example:

• <p>Some Header Code goes here.</p>

•   express
•   node_modules
•   views
  •   includes
    •   header.ejs
    •   footer.ejs
  •   projectFile1.ejs
  •   projectFile2.ejs
•   index.js
•   package-lock.json
•   package.json

An now all we need to do is to actually include these files into any of our project files. If we recall, in our index.js file, we designated our default views directory. So all we need to do is to reference the path to our includes/file directory, like so:

• <%- include('includes/header') %>