TL;DR: Build full-stack Shopify apps with Gadget’s new hosted React frontends.

‍

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.

From backends to full-stack apps

Historically, Gadget has helped developers build scalable backends and painlessly connect them to ecommerce platforms like Shopify. 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, whether they’re for merchants or shoppers, have a need for a frontend UI as well. In the past, any app developer looking to build a full-stack Shopify app would leverage Gadget to quickly spin up a backend that scaled automatically, but had to figure out the frontend on their own. That often involved finding a frontend hosting framework and provider, and learning how to then connect that chosen provider to Gadget. And Shopify has a lot of specific requirements for frontends, like session token authentication, content security policies, and following the Polaris style guide. Configuring all of that on the average React host could take days, or weeks for the uninitiated, dramatically increasing the time and cost to build great apps.

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

Gadget frontends come fully set up with:

• Shopify session token handling - Don’t worry about managing session tokens, Gadget frontends handle everything out of the box 
• Shopify’s security policy header - Prevent clickjacking! The <inline-code>Content-Security-Policy: frame-ancestors<inline-code> header required for public apps is automatically injected into your app’s responses
• Pre-configured Gadget API client - Get instant access to your latest backend API as you make changes to it, with automatic updates and syncs
• Shopify Polaris - Build native-feeling app frontends using the <inline-code>@shopify/polaris<inline-code> component library, and use Shopify App Bridge packages for interfacing with the admin
• Hot module reloading - Update your app’s frontend logic, components, and styles, and see the changes instantly
• Serverless hosting and one-click deploys - Deploy your full-stack app with a single click on the same infrastructure you used for development
• Production-grade CDN asset hosting - Serve your built frontend in production with maximum performance from Gadget’s built-in, worldwide CDN
• Support for npm packages - Update your <inline-code>package.json<inline-code> and run <inline-code>yarn install<inline-code> to use your favorite frontend tools, like Tailwind CSS, MUI, Chakra UI, Emotion, and more

‍

The fastest way to build Shopify extensions
It’s easy to develop Shopify app extensions when building frontends in Gadget, because of all the boilerplate that goes into building new apps. Read how to get started building Shopify extensions with Gadget.

‍

Getting started with Gadget frontends

Whether you’re looking to build a custom or public app, it only takes 2 minutes to spin up a hosted backend, frontend, and database, and start building your app. 

To get started:

1. Create a new Gadget app
2. Plug your Shopify API keys into Gadget and set up the Gadget URLs in your partner dashboard 
3. Install your app on a development store
4. Start building your embedded frontend

As soon as you set up a Shopify Partners Dashboard connection, Gadget automatically creates a React starter app that handles authentication, session tokens, and AppBridge setup. It even generates and configures the connection to your backend API client for you. You can see the pre-formatted template app the moment it’s installed on a development store, so you can jump into building your embedded frontend.

You can get a jump start on building frontends with our product tagger tutorial and build a full-stack app in just 20 minutes.

‍

Hosted frontends has allowed us to keep everything in one place. The hot-reloading has made development a breeze and knowing that it's configured already for what we need we don't have to worry about deploying our frontend to another service and keep that in-sync.
- Simon Barnes, Technical Director and Partner @ Alleyoop

‍

Fully hosted, with one-click deploys

Gadget’s frontend hosting takes care of the usual boilerplate setup by giving you a lightning-quick development environment on production-grade infrastructure. There’s no digging through JSON and YAML config files to build production containers, or deploying to separate hosting solutions. Out of the box, you get a working, hosted React project, powered by Vite, to quickly build beautiful apps. All your frontend project assets are automatically minified and optimized by Gadget when deployed to production, giving your end users a performant experience.

For you full-stack folks, managing the deployment process and containerization across multiple projects and environments is a thing of the past. With Gadget’s one-click deploys, you can push a new version of your database schema, backend logic, and frontend app all at once. With no extra development effort, your app lands in the hands of users in seconds, not minutes or hours.

Hot module reloading on a live URL

Code quickly with instant updates that don’t require reloading the page. Hot module reloading (HMR) is built into Gadget’s frontends, allowing you to instantly view and test your changes on your app’s development URL.

Building your app frontends with Gadget doesn’t require you to change your development process. HMR works seamlessly with FileSync. Build frontends in your favorite local editor and write code using your favorite lint rules, editor extensions, and hotkeys.

With Gadget, HMR even works for development apps embedded in the Shopify admin.

The power of Vite

Gadget uses Vite, a next-generation JS dev server, as a foundation to power 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 <inline-code>vite.config.js<inline-code> 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

Try it yourself

All new Gadget apps have a frontend folder where your project’s React and CSS files live. Dependencies are installed automatically. Once <inline-code>yarn<inline-code> is finished running, your frontend is ready to be customized.

If you have questions or just want to chat, join our developer Discord to connect with Gadget employees and the Gadget community.

‍