{"id":17023148,"url":"https://github.com/muchisx/remix-app-demo","last_synced_at":"2026-05-08T09:33:56.644Z","repository":{"id":204818951,"uuid":"712690325","full_name":"muchisx/remix-app-demo","owner":"muchisx","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-07T03:02:26.000Z","size":29,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-22T14:28:51.112Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muchisx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-01T01:39:15.000Z","updated_at":"2023-11-01T01:39:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"c61362a5-774c-4a19-85d8-b9be370466ae","html_url":"https://github.com/muchisx/remix-app-demo","commit_stats":null,"previous_names":["muchisx/remix-app-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/muchisx/remix-app-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchisx%2Fremix-app-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchisx%2Fremix-app-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchisx%2Fremix-app-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchisx%2Fremix-app-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muchisx","download_url":"https://codeload.github.com/muchisx/remix-app-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchisx%2Fremix-app-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32774979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T07:12:25.879Z","updated_at":"2026-05-08T09:33:56.618Z","avatar_url":"https://github.com/muchisx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shopify App Template - Remix\n\nThis is a template for building a [Shopify app](https://shopify.dev/docs/apps/getting-started) using the [Remix](https://remix.run) framework.\n\nRather than cloning this repo, you can use your preferred package manager and the Shopify CLI with [these steps](#installing-the-template).\n\nVisit the [`shopify.dev` documentation](https://shopify.dev/docs/api/shopify-app-remix) for more details on the Remix app package.\n\n## Quick start\n\n### Prerequisites\n\n1. You must [download and install Node.js](https://nodejs.org/en/download/) if you don't already have it.\n2. You must [create a Shopify partner account](https://partners.shopify.com/signup) if you don’t have one.\n3. You must create a store for testing if you don't have one, 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).\n\n### Setup\n\nIf you used the CLI to create the template, you can skip this section.\n\nUsing yarn:\n\n```shell\nyarn install\n```\n\nUsing npm:\n\n```shell\nnpm install\n```\n\nUsing pnpm:\n\n```shell\npnpm install\n```\n\n### Local Development\n\nUsing yarn:\n\n```shell\nyarn dev\n```\n\nUsing npm:\n\n```shell\nnpm run dev\n```\n\nUsing pnpm:\n\n```shell\npnpm run dev\n```\n\nPress P to open the URL to your app. Once you click install, you can start development.\n\nLocal 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.\n\n### Authenticating and querying data\n\nTo authenticate and query data you can use the `shopify` const that is exported from `/app/shopify.server.js`:\n\n```js\nexport async function loader({ request }) {\n  const { admin } = await shopify.authenticate.admin(request);\n\n  const response = await admin.graphql(`\n    {\n      products(first: 25) {\n        nodes {\n          title\n          description\n        }\n      }\n    }`);\n\n  const {\n    data: {\n      products: { nodes },\n    },\n  } = await response.json();\n\n  return json(nodes);\n}\n```\n\nThis template come preconfigured with examples of:\n\n1. Setting up your Shopify app in [/app/shopify.server.js](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/shopify.server.js)\n2. Querying data using Graphql. Please see: [/app/routes/app.\\_index.jsx](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/routes/app._index.jsx).\n3. Responding to mandatory webhooks in [/app/routes/webhooks.jsx](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/routes/webhooks.jsx)\n\nPlease 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.\n\n## Deployment\n\n### Application Storage\n\nThis template uses [Prisma](https://www.prisma.io/) to store session data, by default using an [SQLite](https://www.sqlite.org/index.html) database.\nThe database is defined as a Prisma schema in `prisma/schema.prisma`.\n\nThis use of SQLite works in production if your app runs as a single instance.\nThe database that works best for you depends on the data your app needs and how it is queried.\nYou can run your database of choice on a server yourself or host it with a SaaS company.\nHere’s a short list of databases providers that provide a free tier to get started:\n\n| Database   | Type             | Hosters                                                                                                                                                                                                                               |\n| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| MySQL      | SQL              | [Digital Ocean](https://www.digitalocean.com/try/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) |\n| PostgreSQL | SQL              | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-postgresql), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/postgres)                                   |\n| Redis      | Key-value        | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-redis), [Amazon MemoryDB](https://aws.amazon.com/memorydb/)                                                                                                        |\n| MongoDB    | NoSQL / Document | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-mongodb), [MongoDB Atlas](https://www.mongodb.com/atlas/database)                                                                                                  |\n\nTo 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/tree/main/docs/guides/session-storage.md).\n\n### Build\n\nRemix handles building the app for you, by running the command below with the package manager of your choice:\n\nUsing yarn:\n\n```shell\nyarn build\n```\n\nUsing npm:\n\n```shell\nnpm run build\n```\n\nUsing pnpm:\n\n```shell\npnpm run build\n```\n\n## Hosting\n\nWhen you're ready to set up your app in production, you can follow [our deployment documentation](https://shopify.dev/docs/apps/deployment/web) to host your app on a cloud provider like [Heroku](https://www.heroku.com/) or [Fly.io](https://fly.io/).\n\nWhen you reach the step for [setting up environment variables](https://shopify.dev/docs/apps/deployment/web#set-env-vars), you also need to set the variable `NODE_ENV=production`.\n\n## Gotchas / Troubleshooting\n\n### Database tables don't exist\n\nIf you get this error:\n\n```\nThe table `main.Session` does not exist in the current database.\n```\n\nYou need to create the database for Prisma. Run the `setup` script in `package.json` using your preferred package manager.\n\n### Navigating/redirecting breaks an embedded app\n\nEmbedded Shopify apps must maintain the user session, which can be tricky inside an iFrame. To avoid issues:\n\n1. Use `Link` from `@remix-run/react` or `@shopify/polaris`. Do not use `\u003ca\u003e`.\n2. Use the `redirect` helper returned from `authenticate.admin`. Do not use `redirect` from `@remix-run/node`\n3. Use `useSubmit` or `\u003cForm/\u003e` from `@remix-run/react`. Do not use a lowercase `\u003cform/\u003e`.\n\nThis only applies if you app is embedded, which it will be by default.\n\n### Non Embedded\n\nShopify apps are best when they are embedded into the Shopify Admin. This template is configured that way. If you have a reason to not embed your please make 2 changes:\n\n1. Change the `isEmbeddedApp` prop to false for the `AppProvider` in `/app/routes/app.jsx`\n2. Remove any use of App Bridge APIs (`window.shopify`) from your code\n3. Update the config for shopifyApp in `app/shopify.server.js`. Pass `isEmbeddedApp: false`\n\n### OAuth goes into a loop when I change my app's scopes\n\nIf you change your app's scopes and authentication goes into a loop and fails with a message from Shopify that it tried too many times, you might have forgotten to update your scopes with Shopify.\nTo do that, you can run the `config push` CLI command.\n\nUsing yarn:\n\n```shell\nyarn shopify app config push\n```\n\nUsing npm:\n\n```shell\nnpm run shopify app config push\n```\n\nUsing pnpm:\n\n```shell\npnpm run shopify app config push\n```\n\n### Incorrect GraphQL Hints\n\nBy default the [graphql.vscode-graphql](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) extension for VS Code will assume that GraphQL queries or mutations are for the [Shopify Admin API](https://shopify.dev/docs/api/admin). This is a sensible default, but it may not be true if:\n\n1. You use another Shopify API such as the storefront API.\n2. You use a third party GraphQL API.\n\nin this situation, please update the [.graphqlrc.js](https://github.com/Shopify/shopify-app-template-remix/blob/main/.graphqlrc.js) config.\n\n## Benefits\n\nShopify apps are built on a variety of Shopify tools to create a great merchant experience.\n\n\u003c!-- TODO: Uncomment this after we've updated the docs --\u003e\n\u003c!-- The [create an app](https://shopify.dev/docs/apps/getting-started/create) tutorial in our developer documentation will guide you through creating a Shopify app using this template. --\u003e\n\nThe Remix app template comes with the following out-of-the-box functionality:\n\n- [OAuth](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#authenticating-admin-requests): Installing the app and granting permissions\n- [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\n- [REST Admin API](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#using-the-shopify-admin-rest-api): Resource classes to interact with the API\n- [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\n- [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.\n- [Polaris](https://polaris.shopify.com/): Design system that enables apps to create Shopify-like experiences\n\n## Tech Stack\n\nThis template uses [Remix](https://remix.run). The following Shopify tools are also included to ease app development:\n\n- [Shopify App Remix](https://shopify.dev/docs/api/shopify-app-remix) provides authentication and methods for interacting with Shopify APIs.\n- [Shopify App Bridge](https://shopify.dev/docs/apps/tools/app-bridge) allows your app to seamlessly integrate your app within Shopify's Admin.\n- [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.\n- [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\n- [Polaris](https://polaris.shopify.com/): Design system that enables apps to create Shopify-like experiences\n\n## Resources\n\n- [Remix Docs](https://remix.run/docs/en/v1)\n- [Shopify App Remix](https://shopify.dev/docs/api/shopify-app-remix)\n- [Introduction to Shopify apps](https://shopify.dev/docs/apps/getting-started)\n- [App authentication](https://shopify.dev/docs/apps/auth)\n- [Shopify CLI](https://shopify.dev/docs/apps/tools/cli)\n- [App extensions](https://shopify.dev/docs/apps/app-extensions/list)\n- [Shopify Functions](https://shopify.dev/docs/api/functions)\n- [Getting started with internationalizing your app](https://shopify.dev/docs/apps/best-practices/internationalization/getting-started)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuchisx%2Fremix-app-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuchisx%2Fremix-app-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuchisx%2Fremix-app-demo/lists"}