Day 24 – Working with EJS (Part 1) - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-29 08:07:09

Hope you’ve installed the ejs. We’re going to learn some more things about it.

To start with the ejs first we need to set our app to use it. We can simply add this using `app.set('view engine', 'ejs')`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9cd5xswxjdip8n1hn1yg.png)

This `app.set('view engine', 'ejs')` will look into views folder on the same path. So we need to create views folder for writing those frontend templates.

We are starting the profile page. So we’ll create a `profile.ejs` file inside the views folder.

Just create a basic html inside of `profile.ejs` file.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/teopvp9szgqcuk7zojgc.png)

We’ll use `res.render` method to render the file.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1h6w3tqjxejr6nufwmmg.png)

It’s already know where to look. So we’ve render the files, but we didn’t pass our data to the html. How to do that ?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ryqn7ylrxvj3tz5koht1.png)

We can send a object in render method while rendering the template and use that object to get the value of username.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a91gv33n68vp43p9pt60.png)

Now we can easily access the value using `<%= person %>` in the profile.ejs file

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/779bb0abtcoiwjfokoxb.png)

See the result in frontend

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/h1ndfk3j3u6cr7euecl2.png)

###Can you do this now?

You can see the graphical version here
{% instagram B6n8IhvgnsI %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day24-nodejsin30days/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !


###__You can read the old posts from this series (below)__

{% post nerdjfpb/day-1-learning-node-js-in-30-days-mini-series-55e7 %}

{% post nerdjfpb/day-2-learning-node-js-in-30-days-mini-series-5023 %}

{% post nerdjfpb/day-3-learning-node-js-in-30-days-mini-series-24i4 %}

{% post nerdjfpb/day-4-learning-node-js-in-30-days-mini-series-1koc %}

{% post nerdjfpb/day-5-learning-node-js-in-30-days-mini-series-21jm %}

{% post nerdjfpb/day-6-learning-node-js-in-30-days-mini-series-758 %}

{% post nerdjfpb/day-7-learning-node-js-in-30-days-mini-series-3023 %}

{% post nerdjfpb/day-8-var-vs-let-vs-const-learning-node-js-in-30-days-mini-series-1i72 %}

{% post nerdjfpb/day-9-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2dfe %}

{% post nerdjfpb/day-10-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2802 %}

{% post nerdjfpb/day-11-creating-and-deleting-folders-learning-node-js-in-30-days-mini-series-3a2d %}

{% post nerdjfpb/day-12-creating-own-server-learning-node-js-in-30-days-mini-series-3ef %}

{% post nerdjfpb/day-13-buffer-stream-learning-node-js-in-30-days-mini-series-5c5d %}

{% post nerdjfpb/day-14-serving-html-pages-learning-node-js-in-30-days-mini-series-2hl3 %}

{% post nerdjfpb/day-15-sending-json-to-client-learning-node-js-in-30-days-mini-series-21pc %}

{% post nerdjfpb/day-16-routing-basic-learning-node-js-in-30-days-mini-series-5hk6 %}

{% post nerdjfpb/day-17-npm-node-package-manager-learning-node-js-in-30-days-mini-series-1nek %}

{% post nerdjfpb/day-18-why-express-js-learning-node-js-in-30-days-mini-series-b5a %}

{% post nerdjfpb/day-19-nodemon-learning-node-js-in-30-days-mini-series-m39 %}

{% post nerdjfpb/day-20-express-js-introduction-learning-node-js-in-30-days-mini-series-2pg5 %}

{% post nerdjfpb/day-21-http-methods-learning-node-js-in-30-days-mini-series-hci %}

{% post nerdjfpb/day-22-route-parameters-learning-node-js-in-30-days-mini-series-4knk %}

{% post nerdjfpb/day-23-template-engines-learning-node-js-in-30-days-mini-series-4f7d %}