Build Shopify apps that will pass the Shopify App Store review out of the box (Gadget has gone full-stack!)

We've been building something really cool over at Gadget.dev, and I wanted to share it with y'all.

TL;DR Spin up a fully hosted Shopify app stack in a minute, ready to pass the Shopify App Store review out of the box. No need to set up infrastructure, configurations, authenticating API clients, etc. Just dip straight into code.

From backends to full-stack apps

Historically, Gadget has helped developers build scalable backends and painlessly connect them to Shopify.

It was a great start, and we’ve seen developers launch ambitious projects without needing to worry about the considerable amount of work involved in building and managing ecommerce apps, but we’ve always known it was an incomplete solution.

Most apps have a need for a frontend as well! In the past, developers often set up a Shopify app in Gadget in minutes, and then spent far more time configuring a frontend hosting framework on a different provider and connecting it to their backend.

Now, Gadget manages all of that boilerplate work. Each Gadget app comes with a React-powered, Shopify-compliant frontend right out of the gate, fully set up with:

• Shopify session token handling - Don’t worry about managing session tokens.
  Shopify’s security policy header - Prevent clickjacking! The Content-Security-Policy: frame-ancestors header required for public apps is automatically injected into your app’s responses
• Hot module reloading - Update your app’s frontend logic, components, and styles, and see the changes instantly
• Pre-configured Gadget API client - Get instant access to your backend API as you make changes to it, with automatic updates and syncs
• Shopify Polaris - Use Shopify’s component library to build your embedded app frontends, automatically
• Serverless hosting and one-click deploys - Deploy your full-stack app with a single click on the same infrastructure you used for development
• Support for npm packages - Use your favorite frontend tools, like MUI, Chakra UI, Emotion, and Tailwind CSS

Don’t waste time wiring up your own frontend infrastructure, authenticating API clients, or sorting out how to adhere to Shopify’s latest UI requirements. Simply connect your Gadget app to Shopify, and instantly receive a fully set up, embedded React frontend that’s powered by your Gadget project.

The power of Vite

We're using Vite as a foundation to power Gadget's frontends. This means you get all the power of Vite on top of Gadget’s hosted infrastructure and pre-built production optimizations.

Customize your builds or add plugins, such as the Vite MDX plugin, with the vite.config.js file found in every Gadget project root. Host static assets, like images and fonts, anywhere in your frontend folder and take advantage of built-in disk-caching (and cache-busting) in production environments. Integrate CSS preprocessors or WebAssembly and web workers into your project. Deploy to production with assets that are automatically minimized and served using a high-performance CDN for maximum reliability.

Give it a try

If you want to learn more about how to build full stack apps with one single stack, read our frontend announcement blog post.

Gadget's backend and frontend hosting takes care of the usual boilerplate setup by giving you a lightning-quick development environment on production-grade infrastructure. Build anything, in minutes. Try it for free at Gadget.dev.