response.render
function to produce an HTML string with the given template and data to return to the client.views
folder and store our EJS templates in it.response.render
to render an HTML response to the client, render
will tell EJS which EJS template to use and pass relevant data to inject into that template.recipe/0
and recipe/1
. Once loaded in the client, those recipe pages can then be manipulated by DOM JS code, where clicking on elements on the pages further updates the UI.index.js
, set EJS as the Express template engine to generate HTML responses. Insert the following line below where we initialise app
and above any routes.response.render
with the following 2 params.views
folder.fruit.ejs
is a sample EJS template for this example. EJS templates look like HTML files, except with "templating syntax" to inject JS variables into the HTML. In this example, we inject the properties of the data
object in index.js
to fruit.ejs
. Templating concepts and syntax are similar across most web application frameworks, including Ruby on Rails, Python Django, and Java Spring.styles.css
file, we need to enable Express' built-in file server and configure it to serve files from the folder where our CSS is. The following expression enables Express to serve files from a local folder called public
. Read more about static files here and express.static
here.public
. Move all CSS files to this folder.app.use(express.static(...))
) to our index.js
file above our routes to enable the file server.public
folder. The URL path can be a relative path relative to the public
folder.fruit.ejs
. There are few exceptions to this convention..prettierignore
file at the root of the folder open in VSCode to ignore files with a .ejs
file extension..prettierignore
file at the root of the folder open in VSCode with the following contents. For example, if my rocket
folder is open in VSCode with many subfolders such as ice
, prce
, poce
, projects
, I will add .prettierignore
to the rocket
folder and not any of its subfolders. More info on Prettier Ignore here.*.ejs
line in .prettierignore
for Prettier to format the HTML in our EJS templates.h1
element to fruit.ejs
and fill it with another attribute in the data
object./fruits/:name
. Inject the path param value in the response HTML by adding the param to the data
object, then referencing it in the EJS template.