The following post was written by Glitch engineer, Keith Kurson. In it, he discusses the tech stack and opinions behind our new lineup of Glitch starter apps. Enjoy, and let us know what you think + create!

We just launched generated static sites! 🎉 This has been an in-flight feature for a long time, and something I’m really excited to finally see out in the world. There are a lot of moving pieces, but the most important thing to take away is this: generated static sites allow you to run a development process and, when you’re done editing, Glitch will run your npm run build script and upload that optimized build to the glitch.me domain every project gets free.

The new starter projects were created for remixing. This bumps up our two templates (hello-express and hello-webpage) to four (website, node, react, eleventy) with opinionated and minimal versions of each. Thinking through the technology choices for each starter and choosing the packages that we were endorsing was an exciting challenge, and we were able to build on the incredible work the open-source community has been doing since we last created new starters. Let’s walk through the new starters and what powers them to give you a better idea of how they’ll help you get started building your idea in seconds.

Node.js

Our previous Node.js starter, hello-express, was in daily use but starting to fall behind modern Node best practices. Looking at the landscape of Node web servers, there was a clear choice: Fastify. The speed gives us the ability to serve more pages, faster, from the glitch containers. It’s also great how easily extensible Fastify is. Having validation built-in didn’t hurt. We are really excited about what Fastify will allow us to build going forward and how to leverage it for Glitch users; plus, we can build Glitch-specific plugins to interface with our asset management, fully-powered terminal, etc., in the future. There isn’t a lot of boilerplate needed to instantly create an API, so we were able to keep both the opinionated and minimal versions of the Node.js starter fairly straightforward.

Above: Fastify benchmark comparison

React + Generated Static Sites

We’ve had trouble in the past getting the React development process to be performant on Glitch servers, so solving the speed problem was the #1 priority. Fortunately, our team didn’t have to do much of the work here and instead could rely on Vite to do the heavy lifting. It starts immediately, supports TypeScript and JSX, and has hot module reload enabled by default. That significantly reduced the surface area we needed to build ourselves to support a lightning-fast React workflow.

One way Vite achieves these incredible speeds is by bundling all of your dependencies (in ~glitch-hello-react they are: React, Wouter and react-helmet-async) with ESBuild. ESBuild is an extremely fast JavaScript bundler written in Go. Most likely you aren’t changing your dependencies nearly as much as your code, so it can do that once and only build again when you add a new dependency or upgrade the version.

From esbuild.github.io

When you close the editor and stop working on your site, it runs the Vite build process in the background which creates an optimized bundle with Rollup. That means you can take advantage of the wild world of Rollup plugins. We serve this fast production bundle at your free glitch.me domain until you start working in the editor again.

Eleventy + Generated Static Sites

Static site generators are all the rage today, and for good reason. Eleventy cares about speed, ease of use, and—most importantly—the experience of someone browsing your site. When you run the Eleventy build script, it takes all of your files and creates a bundle that can be loaded by those still using AOL dialup. (Please let us know if you are still using AOL dialup!)

Above: Eleventy Lighthouse scores

The Eleventy starters list is a scoreboard with Lighthouse scores, pushing Eleventy builders to make a performant site that anyone on any connection can view. As website bundles get more and more bloated, Eleventy pushes for as little JavaScript as possible, and uses it only where you need it.

Our ~glitch-hello-eleventy starter has support for blog posts in Markdown, beautiful styling, and instructions for adding more complexity if you need it. The minimal template was built by the Eleventy team.

Along with support for Eleventy, we’re supporting all of the Eleventy projects that others have built. Want a high-performance blog with image optimizations and analytics? Check out eleventy-high-performance-blog. Something a little more designed, that uses Tailwind CSS and a JS framework (Alpine.js)? Try 11ta.

Everything else 🎉

These are just our starters using the new generated static site functionality. You can apply the same concepts to a Vue site, or Svelte! Any code you can run in the build script that outputs to a build folder can take advantage of this new functionality. Just add this configuration to your package.json:

"glitch": {
  "projectType": "generated_static"
},

That will tell Glitch to treat your project as a generated static site so you have a development environment when you want it, and a production site on your glitch.me domain when you’re done.

So, why not remix one of these starters and create a new project right now?