Skip to content

9.0.0: Bye Webpack, hi Vite!

Choose a tag to compare

View all tags
@bensmithett bensmithett released this 17 Jul 08:05
· 79 commits to main since this release
v9.0.0
7df21d3

Changes

This is a major rewrite. Sorry. But the good news is migrating the pages, components & layouts from your Tropical <8.0.1 site to 9.0.0 should be straightforward. It's just everything around your content that has changed.

(If you find this isn't true, please open an issue and I'll update the upgrade instructions as necessary.)

  • Vite replaces all the stuff we were previously cobbling together with Webpack, Babel, Serve, and quite a bit of custom code. The custom code that does exist (for the dev server & prerendering) is mostly copied straight from Vite's SSR Guide.
  • MDX support now comes from vite-plugin-mdx. It still supports the rehype or remark plugins we were using before.

Upgrade instructions

The easiest approach will be to start with a new Tropical 9.0.0 site, then copy across your existing pages, components, layouts and client-side JS. (Of course when this is all done, you can commit it all to your existing git repo.)

See #27 for the commit-by-commit process I took to update this repo.

Here are the main tweaks you'll need to make:

  • Your content now lives in src rather than app
  • Pages:
    • File extensions are now either .mdx or .jsx. .js won't work for files that contain JSX, and .md won't work for MDX files.
    • meta.collection has been replaced with the meta.tags array. A JSON feed /posts.json is generated for pages containing the post tag.
  • Layouts:
  • JSON Feed:
    • The default feed has changed from /feed.json to /posts.json. Rename src/feeds/posts.jsx if you don't want to lost all your subscribers!
  • Client side JS:
    • client.js is now src/entry-client.jsx. You can still put whatever you want in here.
    • If you were using the old hydrationHelpers, that functionality now lives in a standalone package tropical-islands.
      • Instead of asIsland, use <Island>. It accomplishes the same thing, but you don't need to export extra components now.
  • Production static site build:
    • The new output directory is dist/static
Assets 2
Loading