shopify 创建 node APP 【windows版】

shopify 创建 node APP

此处用 win10 做测试

1. 创建 shopify 账户

2. 创建 Development Store

3. 安装 Node

1. 方法一： 推荐 nvm 安装 node。nvm 下载地址
2. 方法二： 官方下载最新版。 node官网。

4. 安装 shopify-cli。

1. 首先需要安装 Ruby+Devkit，本文测试下载的是：Ruby+Devkit 3.0.3-1（x64）（点击直接下载）
   (其他版本下载地址：：Ruby+Devkit官方下载)
2. 安装完成后，需要更新 gem 包:

  gem update 
  # 注意：这期间可能需要多次输入 y 确认安装覆盖更新

3. 下载shopify-cli

gem install shopify-cli

4. 查看shopify 版本号，验证是否下载成功：

shopify version
# 正常会输出 shopify 版本号

5. 创建新项目

1. 新建一个项目文件夹，命令行 cd 到你要所创建的目录下
2. 控制台登陆shopify:

shopify login

在弹出的网页中登陆，登陆成功后，关闭网页，控制台会自动出现登陆成功的账号名称信息如下：

Logged into partner organization shpify用户名

3. 创建 node 项目：

shopify app create node

此过程输入 App 名称，选择 APP 类型。

? App name
> test_pro
? What type of app are you building? (Navigate up with 'k' and down with 'j', press Enter to select, filter with 'f')
> 1. Public: An app built for a wide merchant audience. 
  2. Custom: An app custom built for a single client.

回车后会进入项目下载、依赖包下载阶段,下载成功如下所示：

Partner organization 柯宝宝耶 (2231732)
Using development store kebaoye520.myshopify.com
√ node v16.0.0
√ npm 7.10.0
┏━━ Cloning https://github.com/Shopify/shopify-app-node.git into test_pro… ━━━━━
┃                                                                           100%
┗━━ √ Cloned into test_pro ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (2.96s) ━━━
┏━━ Installing dependencies with npm… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ √ Dependencies installed
┗━━ Dependencies installed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (23.45s) ━━━
√ .env saved to project root
√ test_pro was created in the organization's Partner Dashboard https://partners.shopify.com/2231732/apps/6181573
* Change directories to your new project folder test_pro and run shopify app serve to start a local server
* Then, visit https://partners.shopify.com/2231732/apps/6181573/test to install test_pro on your Dev Store

如果下载不成功，有可能是github链接失败，多尝试几次或者使用代理

6. 在本地跑服务，shopify-cli 默认使用的是 ngrok.

1. 创建一个 ngrok 账号。注册 ngrok 账号
2. 第一步完成登陆后，获取一个 auth token。获取 auth token
3. 验证 shopify app 的 auth token

shopify app tunnel auth <token>

4. cd 到项目 test_pro 中，启动一个服务

shopify app serve

成功如下；

┏━━ Running server… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ 
┃ > shopify-app-node@1.0.0 dev
┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js
┃ 
┃ [nodemon] 2.0.15
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching path(s): server\index.js 
┃ [nodemon] watching extensions: js,mjs,json  
┃ [nodemon] starting `node ./server/index.js` 
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ 
┃ Why you should do it regularly:
┃ https://github.com/browserslist/browserslist#browsers-data-updating
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ Loaded env from G:\shopify\ww\.env
┃ (node:15284) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at G:\shopify\ww\node_modules\next\node_modules\postcss\package.json.┃ Update this package.json to use a subpath pattern like "./*".
┃ (Use `node --trace-deprecation ...` to show where the warning was created)
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ 
┃ Why you should do it regularly:
┃ https://github.com/browserslist/browserslist#browsers-data-updating
┃ event - compiled successfully
┃ > Ready on http://localhost:8081