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.
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:
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.
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:
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
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.
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.
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.
All new Gadget apps have a frontend folder where your project’s React and CSS files live. Dependencies are installed automatically. Once yarn 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.