- [Narrator] In this video, I will show you
to use the API function app.engine,
to create the template engine.
I'm still using my hello world sample for that.
You don't necessarily have
to code along with me.
Just watch what I'm doing.
Express comes with a variety
of supported template engines.
But let's assume for a moment
that we want to create our own.
Let's say, one that renders mark down to HTML,
how would we implement that?
As Express is built for extensibility,
adding this is actually quite easy.
So I'm here in my index js file
and now I'll write on top
after application was instantiated,
I will add app.engine
and this takes as first argument
the name of the engine
and it should be md for marked down
and then I create an async function
the signature for app.engine tells us
that this function gets a file path
an options object
and a callback function.
So we now obviously have to open this file.
For that, I bring in, const fs equals require fs.
Because we need read file from it
and I also want
to create a promisify version
of read file and for
that I had const util equals require util.
And a bit further down,
I now add const fsreadfile equals
util promisify fs.readfile.
This will rep the read file function
of no chase to return a promise.
So that we can then use async await with it.
Now let's head into line ten.
We'll first add a try catch block
because we need to try catch
as we're using await later
and if something goes wrong,
we will return an error on the callback.
And in the try block
and I'll add const content
equals
await fsreadfile
and the filepath.
Now we have the content of the file.
Usually in template ansions you also have some concept
of placeholders that are replaced with variables.
So let's build something like that real quick.
So const rendered
equals content
and content is a buffer
so we call to string on it.
And there we will very simply just replace
a headline.
So we will use curly brackets for placeholders
and we will get the past in
variables where the options object
and I'm looking for options
headline here.
In the end we want to return
to marked down converted to HTML and for that
we need a module that can transform marked down to HTML
and I'm using marked for that.
So I'm installing npm install district save marked
and it bring it in.
Const marked equals require,
marked.
And now I just have to return that.
Return, callback,
null, marked
and the rendered
template string.
This should give us an HTML then.
Now we have to tell Express
to use this engine for template rendering,
so I add app.set
and here I'm setting the property views
and the view path should be in views.
And I'm also setting the template engine app.set,
view engine and this should be md.
Now let's change the handle function.
So I'm doing here res send.
Now I'm using res render
and I want to render index
and the headline should be,
hello world.
And now all that is left is
to create this template.
So I'm creating a folder views.
And in here index md file,
and in this index md file,
I will now use this template placeholder, call it headline.
Let's make a list.
And use a little bit
of formatting in there in there, like for bold
or for italics.
And that should be it,
let's start this little application index js
and I'm heading into my browser.
And we get a rendered HTML.
If we look into the page source,
we see proper HTML.
It's just missing the body HTML head parts
and we also see
that our template placeholder was replaced
with hello world.
This is of course a very simple example
of how to create a template engine
but this is basically how it's done.