In this article, we will be learning about conditional statements in EJS which is one of the most common template engines for Node.js development. We might not need template engines for ReactJS UI but if one is using plain HTML, CSS, and JavaScript for the frontend of their project then to render HTML files we might need one. There are several template engines like Pug, Mustache. But tbh I find EJS to be the simplest of them all. Its syntax is similar to HTML except for some minor changes when including script statements.
A simple Ejs file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
let's name it as index.ejs
Node.js code:
I'm assuming that you already are familiar with writing a basic Express server. If not, then do subscribe because I'll be uploading more articles related to this very soon.
We will start by creating our express app and a '/' or home path where we will render our "index.ejs" file. Before getting into node, make sure that your Ejs file is inside the "views" folder(make a folder called "views" inside root directory) and all other CSS files are inside the "public" folder.
app.get('/',(req,res)=>{
res.render('index',{error:false,name:"Aarushi"})
})
Here we are passing our variable "error" to our server which is accessible to only "index.ejs" file. You can name your variables anything like any other language.
EJS Code
After we have passed our variable, we need to access it from our index file. For ejs file to know that we are using javascript statements we need to close our js statements inside "<% %>". To render variables we use an extra "=", eg- <%=name%>. This can sometimes get tricky. While a basic "if" statement would look like:
<%if (!error) { %>
<h1>Welcome <%=name%></h1>
<% } %>
Notice the positions of "<% %>" tags. A simple "if/else" statement would look like:
<% if(!error){ %>
<h1>Welcome <%=name%></h1>
<% } else{ %>
<h1>You are not at all welcome, <%=name%></h1>
<% } %>
The "<%" before the last curly brace of "if" is paired with the "else" statement. Hence, our complete ejs file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<% if(!error){ %>
<h1>Welcome <%=name%></h1>
<% } else{ %>
<h1>You are not at all welcome, <%=name%></h1>
<% } %>
</body>
</html>
I find these very useful, especially when you are rendering any element based on the status of a user, for example- if they are logged in or not.
Byeeee!
Anywaysss, thank you for sparing your precious time to read this article. I'm very new to blogging hence, it would be like a blessing if hit that follow button. That would encourage me to write more such articles. Bye bye! Take care!