Tao
所有文章 标签 分类 系列 关于 联系
Tao

Shopify应用开发环境搭建与配置实战教程

Mttao avatarMttao  收录于  类别 Shopfiy
     约 2104 字  预计阅读 5 分钟 

本文将从环境配置、工具安装到应用部署来介绍shopify app项目的开发环境搭建，同时结合最新开发框架，帮助你快速构建高效的本地开发环境。

  • 访问Shopify Partner Signup，注册免费账户。
  • Partner账户提供开发工具、测试商店和资源支持，是开发的第一步。
  • 研究显示，账户创建后可立即访问开发商店功能，方便测试。
  • 登录Shopify Partner仪表板，导航至“商店” > “开发商店”。
  • 点击“创建开发商店”，输入商店名称和登录信息。
  • 如果账户创建于2023年4月28日后，系统自动生成快速启动开发商店，包含Advanced Shopify计划的大部分功能。
  • 开发商店用于测试应用，限制为安装免费和合作伙伴友好型应用，可使用Bogus Test网关测试订单。
  • Node.js和npm：下载Node.js，确保安装LTS版本，用于JavaScript开发。
  • Git：安装Git，用于版本控制，方便团队协作和代码跟踪。
  • 文本编辑器：推荐使用VS Code，支持插件和调试功能。
  • 研究表明，这些工具是Shopify App开发的基础，确保本地环境与Shopify平台兼容。
  • 使用CLI安装Shopify CLI，运行

bash

npm install -g @shopify/cli@latest

验证安装

bash

shopify version
3.77.1

bash

shopify app init

bash

To run this command, log in to Shopify.
User verification code: MJCS-QQRL
👉 Press any key to open the login page on your browser

根据提示在命令终端按下任何按键，打开浏览器进入shopify 认证，下次再创建项目就不需要认证。 认证成功后的提示如下：

bash

✔ Logged in.
?  Get started building your app:

>  Build a Remix app (recommended)
   Build an extension-only app

   Press ↑↓ arrows to select, enter to confirm.

选中Remix,根据提示选择javascript还是typescript,然后选择新建一个项目。输入项目名称shop-demo1

bash

✔  Build a Remix app (recommended)

?  For your Remix template, which language do you want?
✔  TypeScript

?  Create this project as a new app on Shopify?
✔  Yes, create it as a new app

?  App name:
✔  shop-demo1

╭─ info ───────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  Initializing project with `npm`                                             │
│  Use the `--package-manager` flag to select a different package manager.     │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Installing dependencies with npm ...

等待项目初始化完成。创建成功提示如下：

bash

╭─ success ────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  shop-demo1 is ready for you to build!                                       │
│                                                                              │
│  Next steps                                                                  │
│    • Run `cd shop-demo1`                                                     │
│    • For extensions, run `shopify app generate extension`                    │
│    • To see your app, run `shopify app dev`                                  │
│                                                                              │
│  Reference                                                                   │
│    • Shopify docs [1]                                                        │
│    • For an overview of commands, run `shopify app --help`                   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
[1] https://shopify.dev
  • 切换到项目目录，运行：

    bash

    shopify app dev

根据提示输入y

bash

? Have Shopify automatically update your app's URL in order to create a preview
  experience?

   ┃  Current app URL
   ┃  • https://example.com/
   ┃
   ┃  Current redirect URLs
   ┃  • https://example.com/api/auth

>  (y) Yes, automatically update
   (n) No, never

等待项目运行

bash

────────────────────────────────────────────────────────────────────────────────

› Press d │ toggle development store preview: ✔ on
› Press g │ open GraphiQL (Admin API) in your browser
› Press p │ preview in your browser
› Press q │ quit

Preview URL: https://shop1-demo.myshopify.com/admin/oauth/redirect_from_cli?clie
nt_id=ssss
GraphiQL URL: http://localhost:3457/graphiql

在浏览器中打开 https://shop1-demo.myshopify.com/admin/oauth/redirect_from_cli?clie_id=ssss 进入app 安装引导页面

  • 使用文本编辑器或IDE（如VS Code）修改代码，支持热重载，保存后自动更新。
  • CLI输出详细日志，方便排查问题，可结合Node.js调试工具（如console.log）进行深入调试。
  • 在项目目录初始化Git：

    bash

    git init
git add .
git commit -m "Initial commit"
  • 版本控制帮助跟踪代码变化，方便团队协作，研究显示这是大型项目的最佳实践。
  • Shopify APIs：使用Admin API和Storefront API，添加功能如处理产品和订单。
  • 框架：推荐使用React，结合Next.js或Hydrogen，优化前端开发效率。
  • 设计系统：参考Shopify’s Polaris Design System，确保UI一致性。
  • 官方文档：访问Shopify开发者文档https://shopify.dev/，获取详细技术信息。
  • 社区支持：加入Shopify开发者社区https://community.shopify.com/c/developers，与其他开发者交流经验。

通过以上步骤，你可以成功搭建Shopify App的开发环境，开始构建和测试应用。

更新于 2025-04-09
 Remix, Shopfiy
 | 主页