Remix Shopify App
在安装了 必要的包之后 可以使用下面的命令 初始化 shopify app:
shopify app init
成功后，根目录下有这几个关键目录
app
extensions
prisma
其中 prisma 是默认使用的数据库使用的目录，这里暂不提。
app 目录中会出现默认的应用，而且使用 prisma + sqlite 数据库
因为刚初始化，此时 extension 目录是空的，可以使用 shopify app generate extension
注意 app / extension 的关系：
-
Shopify App（尤其是基于 Remix 的新架构）是一个独立的全栈 Web 应用，通过 Shopify 的 OAuth 接入商店，用于提供后台逻辑和商家管理界面。可理解为：“运行在你服务器上的应用程序，与 Shopify API 交互。”
-
Extension 是 Shopify 平台提供的特定功能模块，可被Shopify App 安装后注册。
它不是独立运行的 Web 服务，而是“托管在 Shopify 自身环境中”的前端或配置片段。
两者的关系是：App 是主程序，Extension 是挂件
也就是说：
- 你必须先有一个 App（Remix），它作为宿主；（即 你要先 app init）
- 然后通过该 App 注册并部署多个扩展（Extension）；
- 最后这些扩展在 Shopify 平台上“生效”，而 App 自身负责配置、管理与数据支撑。(如果只是扩展 那么无需额外的服务器部署运行，只需要将代码推到shopify)
目录中的关键位置：
app/routes 这里就是定义路由页面的核心部分 每个 .tsx 或 .jsx 文件都代表一个路由页面 prisma 数据库ORM
app.jsx 导出整个APP,内部包含所有的页面。这里可以定义左侧每个 Link
app._index.jsx 主页面对应了 app.jsx 中定义的 /app 路由
app.additional.jsx 额外增添的页面，路由就是 /app/additional 也可以自定义其他的，只要在app.jsx 中注册即可。
app.jsx 导出了所有的页面 这些会在 shopify 后台的左侧显示出一个菜单。
auth.login 目录 处理登录
route 之外，app目录下还有几个关键文件:
entry.server.jsx Remix 在服务端渲染（SSR）时的入口文件
root.jsx 应用的根组件
db.server.js 封装数据库操作的服务层，服务端使用。这里导出了 prisma 对象，要是不用prisma 使用其他的也应该从这里导出
routes.js 一般用于集中式管理路由路径，防止硬编码重复
shopify.sercer.js Shopify OAuth、Session、API 通信逻辑集中管理。
从 Remix 历史中可以理解 remix 的特点。
从 react 说起， 如果学习过 react , 就会知道它解决了UI和状态分离的问题，在 jQuery 时代, 数据更新需要手动更新DOM , 当应用变得复杂之后，代码就会变得非常混乱了。因此 react 就提出了 UI 是状态的函数 的理念**，** 说简单点 就是把数据和UI 的代码想办法写在了一起，更方便。后来，前端开始构建单页应用 SPA（前后段彻底分离，前端控制路由和渲染，用户体验更流畅（不用整页渲染））SPA 需要路由系统，于是出现了 **React Router，**其作者就是后来 Remix 的两位创始人：Michael Jackson 与 Ryan Florence 。
但是问题也很明显：
- 首屏慢：需要加载大量 JS 才能渲染内容
- SEO 差：搜索引擎无法抓取动态内容
- 数据获取复杂：useEffect + fetch 成为常见但笨重的写法
- 表单处理麻烦：必须手写 fetch/axios 提交逻辑
- 前后端割裂：同一个页面逻辑要写两遍（前端 fetch、后端 API）
2020年 两位作者决定重写整个思路，创造了 Remix 。 其核心思想是
让路由成为应用的中心，UI、数据、行为都与之绑定。
| 核心理念 | 解释 |
|---|---|
| 路由即架构 | 每个页面文件都定义了 UI + 数据加载(loader) + 提交(action) |
| 表单回归浏览器语义 | <form> 不再是前端 fetch，而是直接触发 action |
| 并行数据加载 | 嵌套路由可并行执行 loader，提高性能 |
| 渐进增强 | 没有 JS 时也能正常运行 |
| SSR/CSR 融合 | 服务器端先渲染数据，客户端自动接手（hydration） |
现在尝试 创建后台管理app, 处理shopify本不支持的实体，通过prisma连接数据库。不再通过额外的后端接口。
app 可以嵌入在后台，会有一个页面
前端页面官方推荐使用 Polaris ，能够和 Shopify 后台的风格保持一致。