Getting Fancy with Hello Express
Tags: javascript, node
Published: 2020-04-28 17:02:24

---
title: Getting Fancy with Hello Express
published: true
description: Adding templating, sass and more to your Express + Node.js site 
tags: javascript, node
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4jlfhq033d45q36u5s7u.jpg
---

At [Glitch](https://glitch.com?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) when you start a Node project, our default template is a [Hello Express](https://dev.to/glitch/getting-started-with-node-express-on-glitch-1b0m) remix. It gives you a basic scaffold, with routing to HTML pages. But as your app gets bigger and more complex, this simple server might not be powerful enough for what you're trying to build. You might realize that you need to do things like:

- update the content of your page from a data source
- create reusable components like a shared navigation or footer 
- display large sets of data, without copy-pasting the same code block over and over

If that's the case, you need to add a templating engine to you app. We've collected a set of apps that are popular [template tools](https://glitch.com/@guides/guide-to-templating?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) added on top of our Hello Express app.

## What templating engines can I use? 
### Mustache
[Mustache](https://glitch.com/@guides/guide-to-mustache?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) is one of my personal favorites. It's a pretty straightforward language, with limited functionality so it's perfect for making an app more extensible.
{% glitch crystal-mustache file=views/index.html %}

### Handlebars
[Handlebars](https://glitch.com/@guides/guide-to-mustache?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) is a superset of Mustache, so the syntax looks almost identical. It adds more functionality, and it's painless to switch between the two engines if you need.
{% glitch misty-handlebars file=views/home.hbs %}

### ejs
[ejs](https://glitch.com/~ejs-starter-app?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) stands for "embedded JavaScript" and it's just that! It allows you to use JavaScript inside your templates for logic.
{% glitch ejs-starter-app file=views/index.ejs %}

### pug
[Pug](https://glitch.com/~pug-starter-app?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) (also known as Jade) is another popular templating system. It's syntax is super simple and is completely tag-less! 
{% glitch pug-starter-app file=views/index.pug %}

Choose the template system that seems most appealing to you, then remix it!

## What next?
Is your markup looking good with your new template system? It might be time to think about improving your CSS workflow by adding a preprocessor like [Sass](https://glitch.com/@guides/guide-to-sass?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev). Here's a simple Sass app that's bolted onto Hello Express.

{% glitch sassy-starter-app app %}

Hello Express and these starter apps are the perfect blank canvas your code masterpiece. Remix one of these apps and [tweet](https://twitter.com/glitch) us what you made. We can't wait to see what you build! ✨

_[Give your Glitch apps superpowers - keep them awake, lift rate limits, and get more memory and disk space.](https://glitch.com/pricing?utm_medium=weblink&utm_source=dev.to&utm_campaign=handbook&utm_content=dev)_