Getting Fancy with Hello Express

Steph Monette - Apr 28 '20 - - Dev Community

At Glitch when you start a Node project, our default template is a Hello Express 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 added on top of our Hello Express app.

What templating engines can I use?

Mustache

Mustache 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.

Handlebars

Handlebars 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.

ejs

ejs stands for "embedded JavaScript" and it's just that! It allows you to use JavaScript inside your templates for logic.

pug

Pug (also known as Jade) is another popular templating system. It's syntax is super simple and is completely tag-less!

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. Here's a simple Sass app that's bolted onto Hello Express.

Hello Express and these starter apps are the perfect blank canvas your code masterpiece. Remix one of these apps and tweet 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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .