Share your repls and programming experiences

← Back to all posts
EJS Example
h
Vandesm14 (2167)

If you guys needed an example of how EJS works and how awesome it is, here you go: https://repl.it/@Vandesm14/EJS-Example

EJS is a server-side rendering library which allows the server to insert data into pages before it sends it off to he client. It works by using special tags documented in the EJS docs. This engine allows you to execute javascript and pass values to the file.

Value insertion

<p>Welcome, <%= user.name %>
let user = { name: "John", points: "1362" };
res.render('public/welcome.ejs', { user });

Executing JS

<% for (let i in posts) { %>
<p class="post"><%= posts[i].title %></p>
<% } %>
let posts = [ { title: "updates v1" }, { title: "updates v2" } ];
res.render('public/welcome.ejs', { posts });

EJS Docs: https://ejs.co/
Express Docs: https://expressjs.com/en/api.html

Commentshotnewtop
MatthewDoan1 (301)

Can you use EJS on the front-end? For example, if I want to open a modal with certain parameters, could I use EJS?

Vandesm14 (2167)

@MatthewDoan1 You can replace the modal values onload, but not while the page is loaded:

<div class="modal">...<p><%= Signup to our newsletter? %></p>...</div>
MatthewDoan1 (301)

Too bad repl.it doesn't have color and formatting support for ejs...

Vandesm14 (2167)

@MatthewDoan1 Yeah. You can bypass this by creating an HTML file, then renaming it to .ejs while viewing the file. It will keep html coloring while actually being an ejs file. This works for the session only and once you refresh or close the page, the glitch will be reset.

MatthewDoan1 (301)

@Vandesm14 Could you programmatically change the name of the document in the index.js file?

Vandesm14 (2167)

@MatthewDoan1 Like the title of the page or the route (/home)?

MatthewDoan1 (301)

@Vandesm14 No, like changing index.html to index.js