DEV Community

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

Posted on • Edited 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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay