DEV Community

Andrew Davis
Andrew Davis

Posted on

Has anyone created a Node.js app that renders HTML instead of JSON?

I'm working on a side project that really benefits from an asynchronous web framework, so I decided to try Node.js. From the tutorials I've seen online, it seems that most Node developers are using it for a JSON API that connects to an SPA frontend. I would prefer to do server rendered templates instead. If you've made a site like this before, what templating engine did you use and what did you use for integration tests? I appreciate any tips!

Top comments (16)

Collapse
 
ben profile image
Ben Halpern

It's been a while but I think we used Jade (default for express I think). Looking at EJS.

It seems likely these templating languages are inspired by Rails options. EJS is like ERB and Jade looks a lot like HAML.

My experience with Rails is that it's a pretty good idea to go with stuff that looks more like HTML in the end. Jade (and HAML) are usually cleaner to look at but ultimately it's easier to go with what people will pick up quickly because it's closer to what they know.

Collapse
 
restoreddev profile image
Andrew Davis

That’s good advice, I normally avoid the HAML like templates mostly because I don’t want to take the time to learn another HTML. I’ve been trying out Handlebars, but I’ll take a look at EJS and see how it goes. Do you guys use any Node on the server for Dev.to?

Collapse
 
ben profile image
Ben Halpern

Do you guys use any Node on the server for Dev.to

Nope. We have some Node experience on the team but no Node use. Rails backend with some AWS Lambda in the mix.

Collapse
 
hugo__df profile image
Hugo Di Francesco

Handlebars allows you to have some template sharing (main app template and partials) whereas EJS doesn't.

Collapse
 
itsjzt profile image
Saurabh Sharma

jade and pug are same. :)

Collapse
 
sam_ferree profile image
Sam Ferree

I started making express apps that rendered pug templates.

Loved the lean syntax.

Sorry I don't have a recommendation on a client side testing framework. I imagine most of the major frameworks use some node library that can probably be ripped out and applied to just inspecting your rendered pages.

Collapse
 
pmcgowan profile image
p-mcgowan

I just started using pug templating too. It looks clean (and a bit odd at forst) but server side logic is amazing. You don't even need a framework at that point (for small stuff).

Collapse
 
chrisvasqm profile image
Christian Vasquez

I second this.

I was recently introduced to pug and it's really simple to use : )

Collapse
 
ionutmilica profile image
Ionut Milica

You can also take a look at Nunjucks. It's a Jinja2 like template engine.
It has support for features like: variables, template inheritance, macros, filters and it plays well with async programming.

Collapse
 
restoreddev profile image
Andrew Davis

Looks really good! Thanks!

Collapse
 
jrop profile image
Jonathan Apodaca • Edited

I second pug/jade.

Note that for simple use cases, one can do things like:

app.get('/', (req, res) => res.set('content-type', 'text/html').end(`
  <h1>It works!</h1>
  <p>You can send your HTML string in via ES6 template strings!</p>
  <p>Node version: ${process.versions.node}</p>
`))
Collapse
 
jenc profile image
Jen Chan

For me it's whatever is the easiest for my brain to understand whilst not losing interest or momentum in the project, but I am really wondering why you'd want to render html instead of JSON or send server-rendered templates instead.

I, lazy. Get stuff out on site generator. I wouldnt get to using a JS framework unless the situation calls for it (too many pages, lots of data handling).

Collapse
 
hugo__df profile image
Hugo Di Francesco • Edited

For templating in Node, I've used Handlebars.

Collapse
 
rhymes profile image
rhymes

I laughed at reading this post. We're so futuristic and so meta that nobody renders HTML on the server anymore lest they be reprimanded by those who know better ™ :D

Collapse
 
michaeljota profile image
Michael De Abreu

I think at the end it will always come back with Pug, formerly Jade. It's really easy, but if you would like something more like Html, then EJS I think.

Collapse
 
msameerbm profile image
Mohamed Sameer

Pug 😎