DEV Community

Cover image for Gadget goes full-stack: Introducing hosted React frontends
Gadget
Gadget

Posted on • Updated on • Originally published at gadget.dev

Gadget goes full-stack: Introducing hosted React frontends

TL;DR. Build Shopify apps ready to pass the Shopify App Store review process in minutes with Gadget's new fully hosted frontend feature. Gadget has officially gone full-stack.

From backends to full-stack apps

Historically, Gadget has helped developers build scalable backends and painlessly connect them to ecommerce platforms like 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.

We'd love for you to 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.

Top comments (0)