-
Familiarity with express and its routing functions.
-
Understands basic HTML
-
Understands callback functions in Node
BEFORE ANYTHING, RUN npm install while in the project's working directory.
-
In app.js, on line 15, inside the callback for app.get(), write
response.render('index');. -
Start the server by running
node --harmony app.jsin the console while in the project's working directory. -
Open the browser to http://localhost:3000. You should see "Welcome to an EJS tutorial" on the page and "EJS Tutorial" as the title of the page.
-
Open views/index.ejs. It looks just like HTML so far, but let's change something. Inside the
<title>tags, on line 4, replace "EJS Tutorial" with<%= title %>. The entire line should be<title><%= title %></title>. -
Go back to the line we added in step (1) (in app.js) and change it to
response.render('index', { title: 'Hello World' }); -
Restart the server by pressing "Ctrl-C" and then run
node --harmony app.jsagain. -
Open the browser to the page (like in step (3)) and reload. You should notice that the title of the page is now "Hello World"
-
How it works: When you call
response.render('index', { title: 'Hello World' });it replaces<%= title %>in index.ejs with "Hello World" and then sends the page to the client as an HTML file. -
Try it again, open index.ejs and add
<%= body %>inside the<body>tags just like what you did with the title tags. -
Go back to the line we added in step (1) (in app.js) and change it to
response.render('index', { title: 'Hello World', body: 'This is the body' }); -
Restart the server and reload the page in your browser. You should see "This is the body" on the page.