March 2024 release: Vite, `env push`, GitHub deploy comments

Today, we’re releasing a bunch of new Hydrogen and Oxygen features, all part of our continuing quest to make your developer experience faster and more flexible. Some of these new features are still unstable, but we want to get them into your hands early so you can provide feedback.

We’re also moving Hydrogen to a monthly release cadence, starting today. That means we aim to drop new features and fixes in the first week of each month. We’ll still do patches as necessary, but the goal of going monthly is to make releases more consistent and predictable, so that it’s easier for the community to stay on top of all our updates. Be sure to star Hydrogen on GitHub to stay tuned on the latest.

Here’s what we’ve got for you in the March 2024 Hydrogen release:

Experimental Vite support

Remix, Hydrogen’s underlying framework, recently stabilized its support for Vite, the popular development server and app bundler. Today, Hydrogen is also adding Vite to our stack.

Vite comes with many benefits, but there are two we’re particularly excited about. First, hot module reloading (HMR) is much faster when running the dev server — Remix found increases of up to 10x— so local development feels incredibly snappy. Second, it gives all Hydrogen developers access to the incredible ecosystem of Vite plugins, making Hydrogen more extensible and customizable.

One important thing to note about adopting Vite is that we’re still wrapping mini-oxygen, the JavaScript runtime that mirrors the production Oxygen service. Because this configuration relies on Vite APIs that are still experimental, we’re releasing this as an unstable feature for now. If you run into any issues, please file a bug report!

Switching to Vite requires a number of changes to your Hydrogen app codebase, but we’ve made it easier to adopt by running a single command: npx shopify hydrogen setup vite. Try it today!

env push__unstable

Oxygen has always supported multiple deployment environments with configurable environment variables. This is great for staging, testing, feature development, and security. But environment variables can be a chore to manage: you had to add or update them manually, through the Shopify admin, and you could only edit one at a time.

Today, we’re making environment variables much faster and simpler to manage through the Hydrogen CLI — no admin required. When working in a linked Hydrogen app, run npx shopify hydrogen env push__unstable to automatically and securely upload environment variables from your local .env file to Oxygen. You can select the environment you want to update, and the CLI will display a diff of the changes it’s about to make when confirming. (Just remember: this is a powerful command — with the ability to overwrite even your production variables. Be sure you know how to do a rollback if needed!)

Along with the existing and commands, you now have the ability to manage Oxygen environment variables without ever leaving your terminal. env push__unstable is available today, and we hope to stabilize this feature soon. Try it out and be sure to file an issue if you run into any problems.

Deploy comments on GitHub

Continuous deployment from GitHub is the most popular way for developers to deploy their Hydrogen apps (but not the only way!). Oxygen’s push-to-deploy feature automatically creates new preview deployments every time you make a change to your codebase, but until recently, you had to go to the Shopify admin to find the URL of your latest preview deployment.

Now, Shopify’s GitHub bot can automatically comment on your pull requests with the complete details of your deployment, including the preview link, and links to the build and runtime logs. These links get refreshed with every push, so you’ll always have the most up-to-date deployment details available, right in your GitHub context.

You can activate this feature now in your Hydrogen storefront settings. You can also configure whether to make deployment links shareable, so anyone can view deployments without needing to log in to your Shopify store. This is just one more way we’re trying to make Hydrogen a seamless part of your development workflow.

Latest example apps

We’ve also been busy working on Hydrogen examples, which showcase popular design patterns for Hydrogen apps. These are the latest:

• The Metaobjects example shows off a practical example of the power and flexibility of Shopify metaobjects for managing and rendering custom structured data in your Hydrogen app.
• A new infinite scroll example demonstrates how to use Hydrogen’s built-in Pagination component to automatically load more content on scroll events.

Be sure to follow along as we add more examples. Don’t see what you’re looking for? You can request it, or learn how to contribute.

Finally, the Hydrogen demo store has recently been split out into its own standalone repo. We decided to do this because we think it’s important to get the real-world experience of building with Hydrogen, without the subtle privileges and shortcuts that come with being part of the Hydrogen monorepo. Star the demo store repo if you want to follow along as we continue building!

Updates, optimizations, and fixes

As of today, Hydrogen has upgraded to Remix 2.8. In addition to Vite support, this gives you access to new layout exports, which can reduce code duplication by providing a single layout for root components, error boundaries, and hydration fallbacks. Check the Remix changelog for the complete list of updates and fixes .

In addition, today’s Hydrogen release includes a range of optimizations, bug fixes, and quality-of-life tweaks. Here’s a brief selection of some notable updates:

• The deploy command introduced in January has a few new options that give you more control and flexibility when customizing your CI/CD workflows:
  • You can now specify a custom build command with the --build-command flag.
  • You can also pass a custom environment variables file with the --env-file flag. in the specified file will override the defaults for that deployment.
• An easier way to redirect from Online Store with the Hydrogen redirect theme
• We’ve improved GraphQL error reporting from the Customer Account API, which now matches the Storefront API behavior. Errors now include a link to the query in your development server’s built-in GraphiQL explorer.
• Fixed an issue with generated locale routes that were returning HTTP 200 status response codes for some URLs that should have been 404s. If your Hydrogen app uses URL path–based localization, check that you have a pathless ($locale).jsx route to handle 404 logic correctly.

That’s it for the March 2024 Hydrogen release. See you in April!