Rendering with ejs in express.js
1 - Express ejs basic example
In this section I will be starting out with a very simple basic example of using ejs and express. This will just be a simple hello world type examples that will just involve a single index.ejs file, and main app.js script in the root project folder. More advanced examples that start to look like an actually project of some kind will involve more paths some of which serve static resources, and often some additional middleware, and packages. However you have to start with just the basic clean example when it comes to these things and this will be that example.
To get started with a basic example start a new project folder, install express, and the ejs npm packages. In this post I am using express 4.16.x, and ejs 2.6.x, and if no major code breaking changes have happened the source code examples in this post should still be up to date.
In the root name space of the project folder I am going to want to create a view folder, this is where I am going to end up placing my ejs files. At the root of the project folder I am also going to have a main app.js file that I will be using as the start scipt for the project, the source code of which I will be getting to in this section.
1.2 - The views folder
As you may have noticed I made a views folder inside the root name space of the project folder, this is where I will be placing all my ejs template files. For my basic demo I just stared off with a single index.ejs file in the root name space of the views folder.
index.ejs would look like this for starters
1.3 - The app.js for the basic example
The main file that is called to start the project is often called app.js in an express.js project, often located at the root of the project folder, and for this example that is what I called and placed my script for this. So the basic idea here is that I just need to set the views path to the folder where my ejs template are, and set the view engine to ejs. Once I have that done I can then use the res.render function to render html using a ejs template file in the view folder.
So then I require in express itself, and will also be using the nodejs built in path module for this example. I then create an instnace of a main express app my calling the main express top level function, just like with any other express example. I then use the app.set method to set an applaction setting value for the port that I will be listeneing on for the script, and also use the app.set method to set the render engine and path to the view folder. For this example I am setting the view engine setting to ejs, and the location of the view folder will be a view folder in the same location as the main app.js file. So I just join the value of the dirname global with the name of the folder to make sure that there is an absolute path to that location for the view setting.
With that all set and done when I set up some middile ware that will respond to incoming get requests I can now use the res.render function to redner html using a file in the view folder such as my index.ejs file.
2 - Using ejs partials, and express.static for static assets
2.1 - The ejs files
2.2 - A public folder with a style.css file
2.3 - The app.js file
3 - Conclusion
When I start this and go to localhost:8080 in my browser I am greeted with the “Hello ejs!” message. I have another post on ejs in which I work with the ejs module by itself, which might be a good idea to do if you want to learn more about ejs. Ejs is just one template engine option when it comes to making an express view, there is also making use of the express static built in middleware as well for the purpose of hosting static assets that are to be used in a view.
If you liked this post be sure to check out my main post on expressjs in general, this is a post where I am branching off into all kinds of topics that have to do with express, and nodejs.