shopify 建立 node APP 【windows版】
阿新 • • 發佈：2021-12-06
shopify 建立 node APP
此處用 win10 做測試
1. 建立 shopify 賬戶
2. 建立 Development Store
3. 安裝 Node
4. 安裝 shopify-cli。
- 首先需要安裝 Ruby+Devkit，本文測試下載的是：Ruby+Devkit 3.0.3-1（x64）（點選直接下載）
(其他版本下載地址：：Ruby+Devkit官方下載) - 安裝完成後，需要更新 gem 包:
gem update # 注意：這期間可能需要多次輸入 y 確認安裝覆蓋更新
- 下載shopify-cli
gem install shopify-cli
- 檢視shopify 版本號，驗證是否下載成功：
shopify version
# 正常會輸出 shopify 版本號
5. 建立新專案
- 新建一個專案資料夾，命令列 cd 到你要所建立的目錄下
- 控制檯登陸shopify:
shopify login
在彈出的網頁中登陸，登陸成功後，關閉網頁，控制檯會自動出現登陸成功的賬號名稱資訊如下：
Logged into partner organization shpify使用者名稱
- 建立 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.
- 建立一個 ngrok 賬號。註冊 ngrok 賬號
- 第一步完成登陸後，獲取一個
auth token。獲取auth token - 驗證 shopify app 的
auth token
shopify app tunnel auth <token>
- cd 到專案 test_pro 中，啟動一個服務
shopify app serve
成功如下；
┏━━ Running server… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃
┃ > [email protected] 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