SuperAPI AI 工具集

shopify-remix-template

编程与开发

查看项目

更新于 10-16 04:32

技能介绍

用途:该技能为使用官方 Shopify Remix App Template 构建 Shopify 内嵌应用提供开发指南。这是多数新 Shopify 内嵌应用的推荐起点;资料提到 React Router 是未来方向,但 Remix 仍被广泛使用和支持。

创建方式:执行 git clone https://github.com/Shopify/shopify-app-template-remix.git。

项目结构:app/routes 为基于文件系统的路由,包含 app._index.tsx(主面板页)、app.tsx(已认证应用的根布局)、webhooks.tsx(Webhook 处理);shopify.server.ts 初始化 Shopify API 客户端、认证和会话存储(Redis);db.server.ts 为数据库连接(Mongoose);models 存放 Mongoose 模型(如 Session.ts、Shop.ts);root.tsx 为整个应用的根组件;shopify.app.toml 为主配置文件。

认证与会话:通过 @shopify/shopify-app-remix 自动处理认证。shopify.server.ts 导出 authenticate 对象,供 loader 和 action 使用,并使用 RedisSessionStorage 存储会话(需要 REDIS_URL)。在 loader 中调用 authenticate.admin(request) 可获得 admin 与 session,用于发起 GraphQL 请求。

Webhook:在 app/routes/webhooks.tsx(或独立路由文件)处理;在 shopify.server.ts 中定义的 Webhook 会被自动注册,新增时先在 shopify.server.ts 配置,再在该路由的 action 中处理对应主题。

数据库:使用 Mongoose/MongoDB 持久化数据,db.server.ts 提供单例连接 connectDb,需 MONGODB_URI;模型示例见 Shop(shop、accessToken、isInstalled 字段)。在 loader 中先调用 connectDb 再使用模型。

界面:模板预配置 Polaris 设计系统,页面用 <Page> 包裹,配合 <Layout>、<Card> 等组件;App Bridge 在 app.tsx 中自动初始化。导航项可在 app.tsx 的 ui-nav-menu 中添加 Link。

部署:可托管于 Vercel、Fly.io、Heroku 或 Cloudflare;生产环境需持久化数据库(如 Postgres);需设置 SHOPIFY_API_KEY、SHOPIFY_API_SECRET、SCOPES、SHOPIFY_APP_URL 等环境变量。

限制:资料未提供收费、价格、性能或效果信息,均暂未提供。