基于Shopify Remix的应用搭建开发

type

status

date

slug

summary

读完本文你将学到

Shopify Partner账号注册与开发环境准备

创建Shopify App Remix模板项目

简单食用Remix - 页面渲染逻辑

简单食用Remix - 新增一个页面

项目规范引入 - Eslint + Prettier + Stylelint + Commitlint

请求封装和接口管理

Shopify用户隐私数据接口开发（上线必须）

开发环境与线上环境的切换

常规上线流程

准备工作

Shopify partner账号

在开始之前你需要一个开发者账号点此注册

注册时候这里选择构建App，选第四个定制App也行，都一样，然后填写完整你的partner信息（个人开发的话随便填就行）

创建开发商店

注册完成后，Shopify会提示已经自动创建了一个quickstart开发商店

你也可以点击Add Store创建一个。这里我们选择在稳定版本上、带上测试数据创建开发商店。

确认后，在这个页面稍等一下，Shopify后台会帮我们自动完善测试数据。

准备好后，即可点击左侧预览按钮查看你的开发商店前台。

开发环境准备

本节信息源自官方文档： shopify.dev/docs/api/sh…

账号跟开发商店准备好后，即可着手准备开发。

环境要求

Node.js: 18.20+, 20.10 or higher

Git: 2.28.0 or higher

安装 Shopify-cli

本文使用pnpm作为依赖管理工具，也推荐您使用pnpm

项目创建和启动

本节信息源自官方文档：shopify.dev/docs/apps/b…

使用 Shopify CLI 创建1个新的项目。

在存放Shopify项目的目录下打开管理员终端，注意要管理员，否则会出现某些依赖无权限和无法创建 Cloudflare隧道的问题。

执行 shopify app init初始化命令。

按照提示和下图输入内容，注意名称内不能含有shopify。

等待安装依赖，这个过程耗时大概5-10分钟。（这个时候你可以~~摸摸鱼~~去学习下 Remix 的基本概念和用法。）

安装完成后我们根据提示cd 进项目目录，执行pnpm run dev 启动本地开发服务。这个命令会干以下几件事：

引导绑定你的Shopify partner账号和对应Partner organization
在组织中创建或者指定已有应用，并将本地代码连接到该应用
创建 Prisma SQLite 数据库用于存放session等数据
自动使用 Cloudflare 创建一个内网穿透，让应用能够使用 HTTPS URL 访问，这个URL配置在这个页面。（嵌入式应用核心原理还是通过Iframe加载进Shopify商店后台，通过Shopify App Bridge等进行数据互通）如果出现报错，可尝试重新pnpm i一下（这个过程视网络环境也会需要一些时间。~~这个时候你可以摸摸鱼~~）

启动成功后如下图所示，我们可以通过按P自动跳转到商店后台进行安装。

至此，我们就完成了App的创建和开发环境的启动，可以愉快地开发了。

简单食用Remix

本节假设你不大会Remix，第一次上手，否则请跳过本章。

Remix是什么

Remix 是由 React Router 的创建者开发的全栈Web框架，专注于提升应用性能和开发体验，强调服务器渲染、快速数据加载和响应式设计。如果你没用过Next，Remix入门全栈也挺好。

主要功能

这里列几个简单特性：

路由： 使用文件系统来定义路由。每个文件对应一个 URL，同时支持嵌套和动态路由。

加载数据： 通过 Loader 方法在服务器端加载和准备数据，避免客户端多余的 API 请求。数据加载函数可以在组件渲染之前运行，确保页面在初始渲染时已经准备好所有数据。

表单提交： 提供简便的 Form 处理机制，通过 Action 方法，可以快速处理表单提交和数据操作。

示例

打开刚刚创建的Shopify App项目，关注到app/routes 目录下，创建一个app.dice.tsx文件

上节提过，Remix支持嵌套路由，在文件名中以.分隔父子路由，创建后我们将以下示例代码复制进去。

然后在app.tsx文件中将dice路由补充进去

启动开发服务，进入Shopify 后台预览界面，可以看到左侧新增了摇骰子菜单，点击进去如下图。

观察本地服务端控制台和浏览器控制台：

可以发现加载路由时候会先执行async的Loader函数，等待完成后页面组件才开始渲染。更多信息可以查看代码注释，可以自己玩玩，建议参照Remix官网的上手文档跟着走一遍，这里是把Remix的核心特性做个简单示例。

开发规范引入

每个项目都必须要规范，即便项目的整个开发生命周期都是你一个人，也必须要。规范包括代码逻辑正确且完整且风格统一（Eslint）、代码书写风格统一（Prettier）、样式代码风格统一（Stylelint）、Git提交风格统一（Commitlint），借助Husky做统一检查。

具体实施可查看我的另一篇基于Vue3做规范的文章《从0到1实践，企业级前端开发底层规范搭建》，大同小异，这里提示几点：

如果是按我的流程走到这的，可以先删除目录下的.git文件夹，再自行git init到你的仓库

安装依赖的时候，pnpm会提示当前处于工作区根目录（workspace），问我们是否确定要安装。解决办法是在根目录的.npmrc文件中加一行ignore-workspace-root-check=true即可。

本节完成后可以push下代码。

请求封装

请求封装是每个项目都要做的事情，不然一方面会产生很多冗余代码，另外很可能会对某些异常场景处理不到。按照我之前封装的思路：

先看一下我封装后的调接口的方式：

是不是很优雅，符合直觉地处理响应流，又能够对错误按需定制化响应。这里还是基于Axios去封装请求，原因是Axios可以兼容Nodejs和浏览器端几乎无差别使用，只是Remix中封装Axios会比非全栈项目多一点点麻烦。下面我们开始：

安装Axios

继续前，我们创建好几个目录，并配置别名方便import

/app/api: 用于存放接口

/app/config: 用于存放项目的部分配置项和拦截器

/app/plugins: 用于存放项目插件示例，如axios、封装好的api等等

/app/types: 用于各种类型定义

tsconfig.json写入别名：

vite.config.ts写入别名：

创建/app/plugins/axios.ts文件用于创建axios实例

创建/app/config/index.ts文件

创建/app/config/interceptors/axios.ts文件存放请求响应拦截器

API封装

Remix作为一个全栈框架，服务端（NodeJs环境）访问接口时，不像浏览器端访问'/api/info'时候会自动补全当前的hostname，服务端会认为这不是一个合法接口而直接报错，所以我们需要获取访问服务端的url然后补全。依这个思路我们创建/app/plugins/api.ts文件：

创建/app/types/api.ts文件，把API请求参数设置好

OK，这样就封装好了，下面我们找些例子试验下。

我们可以通过模板快速创建一个本地的Remix常规项目，然后在那个项目中创建/app/routes/api.info/route.tsx文件，写入以下代码就能作为一个第三方接口了：

然后pnpm run dev，拿到地址端口后挂在一边，回到我们的Shopify项目，在vite.config.ts加入代理配置：

创建/app/routes/api.local.info/route.tsx文件，作为本地接口

现在声明几个接口看看，创建·/app/api/example.ts

注意，如果声明的接口是本地项目的，需要传入isLocal: true

创建/app/routes/app.request-example.tsx

在/app/routes/app.tsx中，写入菜单

启动服务看看

没问题，浏览器跟服务器端调用接口和接收响应的方式都是一致的，这下可以愉快的跟后台 ~~（也可能是自己）~~ 对接了！

Shopify用户隐私数据接口开发

这个配置位于Shopify App配置页，如果我们的App是public的，即上架应用商店，允许所有商店安装的，如果不照做的话就不能通过审核。

研究后发现，最简单的，只要实现三个POST接口(用户数据访问、用户数据擦除、商店数据擦除)，每个接口能对请求头中的X-Shopify-Hmac-SHA256签名与自己的SHOPIFY_API_SECRET进行HMAC计算编码后的哈希值进行验证，如果验证失败返回401，验证成功正常返回success即可。

我们快速创建3个文件：/app/routes/api.customer.info/route.tsx、/app/routes/api.customer.erasure/route.tsx、/app/routes/api.shop.erasure/route.tsx，里边都写上以下代码即可：

在上线后，提交审核前，回到配置页，把我们的线上域名+上对应的路由填入对应的表单中即没问题了。

开发环境与线上环境的切换

本节知识点源于Shopify cli官方文档：shopify.dev/docs/api/sh…

开发测试差不多后，我们就要准备线上环境了额，Shopify App跟常规项目不一样的，这是以不同App作为不同环境的，意味着我们开发后需要将代码绑定到线上App，提测时绑到测试专用App。不过还好Shopify cli提供了指令帮我们快速创建和切换。

shopify app config link: 创建或者绑定某个App，此操作会在项目根目录创建对应的.toml文件，存放App的各项配置，包括ID、权限范围、授权接口、webhooks等等。

shopify app config use: 指定运行cli命令时的默认App，如我们指定dev app，则pnpm run dev时候就会在这个dev app上运行，不会影响线上App。

我们首先执行pnpm shopify app config link或者pnpm run config:link，可以创建一个新的App用于生产环境，如已经在Partner那边创建过了就可以选择No, connect it to an existing app

我们现在创建一个App-Prod看看

可以发现已经自动帮我们创建了一个新的App和对应的toml文件，并默认在这个App上运行，我们run dev看看

这个时候会让我们重新选择开发商店，并问我们要不哟自动更新url，这里选yes就好，毕竟还没上线

然后按p去预览，重新走一下安装流程

可以发现之前项目在新的App好好运行着，太妙了！

然后我们执行pnpm run config:use，切回开发App

这里我们选择下边那个，因为一开始创建项目的时候默认是没有后缀的。

这样就完成了新的App的创建和切换。

注意：我们永远不要在生产App上进行开发，只在权限需要变更需要deploy的时候才切过去执行下命令然后马上切回来！

常规上线流程

常规的，我们需要找一台服务器，把代码通过各种方式拷贝进去，执行打包和启动命令即可

然后简单配置下Nginx，域名映射好，然后把域名填进生产App的配置内即可完善线上部署

假如你的App是做出来给所有商店使用的，那就在Distribution页选择Public，否则选择Custom

注意：Custom只能给某一个商店或组织使用

选择好后，把Listing优化下，头像Icon上传下就可以提交审核了！