🏝 Tropical

A flexible, component-first static site generator.

Use modern tools to build fast, mostly-just-HTML websites with islands of rich client-side behaviour.

What you get

  • Build React components in Storybook
  • Fela for atomic CSS-in-JS
  • Webpack for module bundling & asset revving
  • Babel for JSX and ES2030
  • Serve for a simple dev server
  • React Helmet for <head> management
  • Independent client and prerender entrypoints:
    • Prerender (aka server-render aka snapshot): Build HTML files and other static assets
    • Client: Progressively enhance prerendered HTML. Mix and match React components (universal or client-only) with vanilla JS and other libraries
  • Everything you need for a blog:

Tropical is just a template repo. Not feeling these defaults? Change them!

What you don't get

  • hot module reloading 🙅‍♀️ (except in Storybook, which is the only place you really need it)
  • code splitting 🙅‍♀️
  • lazy loading 🙅‍♀️
  • "instant" client side route transitions 🙅‍♀️ (Ryan is right)
  • Progressive Web App™ 🙅‍♀️
  • universal/isomorphic JS 🙅‍♀️ (not the automatic full-page kind you're used to anyway)
  • graphql 🙅‍♀️
  • workers 🙅‍♀️
  • types 🙅‍♀️
  • "blazing fast" or "zero config" 🙅‍♀️

Why?

Those things are great for some projects. Tropical just has different priorities.

🚀 Great performance can be simple.

Complex performance optimisations can be useful for some sites and benchmarks, but have their own tradeoffs. Usually the basics are good enough.

♻️ Rethink universal JS.

Prerendering and rehydration are valuable, but mostly-content websites usually don't need to re-load and re-render the entire page on the client.

⚛️ Components are best developed in isolation.

Build components in a dedicated component development environment and drastically simplify your main app's dev server.

🧬 Write meaningful, expressive styles & ship atomic classes.

All the benefits of atomic CSS. No new DSL to learn.

🛠 Prefer a flexible starting point over out-of-the-box functionality.

Avoid a configurable black box framework or plugin system. Keep it simple enough to understand and hack directly.

Architecture decisions

Read more detailed rationale for Tropical' architecture in the architecture decision records.

Get started

Read the docs or get the template repo on GitHub

Who built this?

Hi there! I'm Ben, I've been building websites for a while now. I've worked on industrial-strength static site tooling at Envato & have experienced enough 💩🐌 internet connections around the world to have opinions about web performance.