TLDR: You can now build your Shopify and web apps using Remix in Gadget.

‍

Starting today, you can build your Gadget apps with Remix, in both server-side rendering (SSR) and single-page application (SPA) mode. Use the framework you already know and love on top of Gadget’s full-stack hosted infrastructure, and take advantage of Remix features like file-based routing. 

Remix brings an opinionated approach to CRUD operations and routing, making it a natural fit to work with Gadget's auto-generated CRUD API. Now, Gadget’s API client is available in Remix <inline-code>action<inline-code> and <inline-code>loader<inline-code> functions, so you can build full-stack Shopify apps using a familiar framework.

Gadget’s existing React frontend gives developers complete control over data fetching and routing, but it also often means they spend their time building from scratch. Now, with Remix, you get file-based routing out of the box. Your app's folder structure automatically defines your routes, saving you time and eliminating even more boilerplate code.

‍

A major upgrade for a familiar framework

By integrating Remix into the Gadget platform, we're extending all the benefits of our serverless infrastructure to a framework that’s used every day by developers around the world. You can now take advantage of an automatic connection to your Gadget API, eliminating the need to manually connect Remix to the rest of your app stack.

Whether you’re building with SSR or SPA, you get all of the advantages of building with Gadget, baked into the familiarity of Remix. You get serverless, fully hosted development and production environments in just a few clicks, and Vite bundling with no additional setup because we've done the hard work for you.

When you create a new Gadget app, you have the option to start your Shopify project with Remix in SPA (single-page application) mode. SPA mode gives developers Remix’s file-based routing and allows you to use Gadget’s autocomponents in your frontend to build complex Polaris components like tables and forms in seconds, fully connected to your backend. Gadget handles all of the tedious configuration, so you can focus on building your app's unique features.

‍

Developers building web apps can take advantage of Remix’s server-side rendering (SSR) with Gadget. SSR can improve performance by reducing the number of round-trip requests that need to be made between client and server. Rendering on the server allows devs to take advantage of code splitting and reduces bundle size, speeding up page loads. SEO can also be improved when SSR is used because the default page load can be properly indexed by web crawlers.

Here is an example of using Remix <inline-code>loader<inline-code> and <inline-code>action<inline-code> functions with the Gadget API:

‍

To start building with Remix in Gadget, you can select the Remix starter template when you create a new Shopify app or web app project. We currently support Remix version 2.11.0, and any updates to minor or patch versions will be handled automatically when you run yarn and update dependencies.

After you’ve finished building your app, deploying Remix to production has never been easier. Because you are building on the same infrastructure used for production apps, you can deploy to production in a single click (or with a single CLI command) from any development environment. Your Remix app will be bundled, minified, and served by Gadget, delivering a high-performance experience for all of your users.

With Remix and Gadget, Shopify app developers can build robust, scalable Shopify apps faster than ever before.

Gadget framework version 1.2.0

Framework version 1.2.0 uses Vite 5 to serve your apps. It also introduces a <inline-code>gadget()<inline-code> Vite plugin that injects configuration depending on whether React Router or Remix is used and updates the build scripts that bundle applications. The default <inline-code>build<inline-code> script in <inline-code>package.json<inline-code> has also been updated to support these changes.

If you have any questions or need help getting started, read our documentation and join our developer community on Discord. We can't wait to see what you'll build!