# example-admin-action-and-block-preact **Repository Path**: mirrors_Shopify/example-admin-action-and-block-preact ## Basic Information - **Project Name**: example-admin-action-and-block-preact - **Description**: Contains example code for tutorials at https://shopify.dev/docs/apps/admin/admin-actions-and-blocks - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-04-16 - **Last Updated**: 2026-01-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Admin UI Extensions built with Preact This repository contains example code that is referenced in the [Admin UI Extension tutorials](https://shopify.dev/docs/apps/build/admin/actions-blocks) on shopify.dev. You can use this code as a reference when following those tutorials to build your own Admin UI Extensions with Preact. Visit the [`shopify.dev` documentation](https://shopify.dev/docs/api/shopify-app-remix) for more details on the Remix app package. ## Quick start ### Prerequisites Before you begin, you'll need the following: 1. **Node.js**: [Download and install](https://nodejs.org/en/download/) it if you haven't already. 2. **Shopify Partner Account**: [Create an account](https://partners.shopify.com/signup) if you don't have one. 3. **Test Store**: Set up either a [development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) or a [Shopify Plus sandbox store](https://help.shopify.com/en/partners/dashboard/managing-stores/plus-sandbox-store) for testing your app. ### Setup If you used the CLI to create the template, you can skip this section. Using yarn: ```shell yarn install ``` Using npm: ```shell npm install ``` Using pnpm: ```shell pnpm install ``` ### Local Development Using yarn: ```shell yarn dev ``` Using npm: ```shell npm run dev ``` Using pnpm: ```shell pnpm run dev ``` Press P to open the URL to your app. Once you click install, you can start development. Local development is powered by [the Shopify CLI](https://shopify.dev/docs/apps/tools/cli). It logs into your partners account, connects to an app, provides environment variables, updates remote config, creates a tunnel and provides commands to generate extensions. ### Authenticating and querying data To authenticate and query data you can use the `shopify` const that is exported from `/app/shopify.server.js`: ```js export async function loader({ request }) { const { admin } = await shopify.authenticate.admin(request); const response = await admin.graphql(` { products(first: 25) { nodes { title description } } }`); const { data: { products: { nodes }, }, } = await response.json(); return nodes; } ``` This template comes preconfigured with examples of: 1. Setting up your Shopify app in [/app/shopify.server.ts](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/shopify.server.ts) 2. Querying data using Graphql. Please see: [/app/routes/app.\_index.tsx](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/routes/app._index.tsx). 3. Responding to mandatory webhooks in [/app/routes/webhooks.tsx](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/routes/webhooks.tsx) Please read the [documentation for @shopify/shopify-app-remix](https://www.npmjs.com/package/@shopify/shopify-app-remix#authenticating-admin-requests) to understand what other API's are available. ## Deployment ### Application Storage This template uses [Prisma](https://www.prisma.io/) to store session data, by default using an [SQLite](https://www.sqlite.org/index.html) database. The database is defined as a Prisma schema in `prisma/schema.prisma`. This use of SQLite works in production if your app runs as a single instance. The database that works best for you depends on the data your app needs and how it is queried. You can run your database of choice on a server yourself or host it with a SaaS company. Here’s a short list of databases providers that provide a free tier to get started: | Database | Type | Hosters | | ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | MySQL | SQL | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-mysql), [Planet Scale](https://planetscale.com/), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/mysql) | | PostgreSQL | SQL | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-postgresql), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/postgres) | | Redis | Key-value | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-redis), [Amazon MemoryDB](https://aws.amazon.com/memorydb/) | | MongoDB | NoSQL / Document | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-mongodb), [MongoDB Atlas](https://www.mongodb.com/atlas/database) | To use one of these, you can use a different [datasource provider](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#datasource) in your `schema.prisma` file, or a different [SessionStorage adapter package](https://github.com/Shopify/shopify-api-js/blob/main/packages/shopify-api/docs/guides/session-storage.md). ### Build Remix handles building the app for you, by running the command below with the package manager of your choice: Using npm: ```shell npm run build ``` Using pnpm: ```shell pnpm run build ``` ## Benefits Shopify apps are built on a variety of Shopify tools to create a great merchant experience. The Remix app template comes with the following out-of-the-box functionality: - [OAuth](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#authenticating-admin-requests): Installing the app and granting permissions - [GraphQL Admin API](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#using-the-shopify-admin-graphql-api): Querying or mutating Shopify admin data - [Webhooks](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#authenticating-webhook-requests): Callbacks sent by Shopify when certain events occur - [AppBridge](https://shopify.dev/docs/api/app-bridge): This template uses the next generation of the Shopify App Bridge library which works in unison with previous versions. - [Polaris](https://polaris.shopify.com/): Design system that enables apps to create Shopify-like experiences ## Tech Stack This template uses [Remix](https://remix.run). The following Shopify tools are also included to ease app development: - [Shopify App Remix](https://shopify.dev/docs/api/shopify-app-remix) provides authentication and methods for interacting with Shopify APIs. - [Shopify App Bridge](https://shopify.dev/docs/apps/tools/app-bridge) allows your app to seamlessly integrate your app within Shopify's Admin. - [Webhooks](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#authenticating-webhook-requests): Callbacks sent by Shopify when certain events occur - [Polaris](https://polaris.shopify.com/): Design system that enables apps to create Shopify-like experiences ## Resources - [Remix Docs](https://remix.run/docs/en/v1) - [Shopify App Remix](https://shopify.dev/docs/api/shopify-app-remix) - [Introduction to Shopify apps](https://shopify.dev/docs/apps/getting-started) - [App authentication](https://shopify.dev/docs/apps/auth) - [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) - [App extensions](https://shopify.dev/docs/apps/app-extensions/list) - [Shopify Functions](https://shopify.dev/docs/api/functions) - [Getting started with internationalizing your app](https://shopify.dev/docs/apps/best-practices/internationalization/getting-started)