無法讓使用 Shopify CLI 創建的反應應用程序在本地運行

Question

作為參考，這里是應用程序的文件結構：

project
│   README.md
│   shopify.app.toml
|   Dockerfile
|   heroku.yml
|   package.json
|   package-lock.json 
│
└───web
│   │   index.js
│   │   vite.config.js
│   │   package.json
│   │   package-lock.json
│   │   shopify.web.toml
│   │
│   └───frontend (changed to public as a test)
│       │   App.jsx
│       │   index.html
│       │   index.jsx
│       │   package.json
│       │   package-lock.json
│       │   shopify.web.toml
│       │   vite.config.js
│       └─── components
│       └─── pages
|            | index.jsx (home page)
│       └─── public
│       └─── static
│       └─── styles
│       └─── assets
│   
|   └─── helpers
|   └─── middleware

我正在嘗試讓我的 Shopify 應用程序在 Heroku 上運行。 我使用了他們的 CLI，它為您提供了預定義的文件結構並包含用於函數等的特定文件。我一直在使用他們的腳本“shopify app dev”來運行該應用程序，但您無法在 Heroku 中運行 CLI 命令。 因此，我需要一種通過 npm 啟動在本地運行它的方法。 如果我使用“node./web/frontend/App.jsx”指向 App.jsx 文件，則會收到錯誤消息：

未知文件擴展名“.jsx”

我安裝了 Babel，但沒有添加任何配置（我正在與使用 npx create-react-app my-app 創建的常規反應應用程序進行比較）。

如果我使用 react-scripts，它需要一個公用文件夾。 我將“frontend”文件夾更改為“public”，並更改了應用程序中使用“frontend”作為文件夾名稱的所有實例。 我用來使用 react-scripts 的命令是：

cd web && react-scripts start

其中我得到一個不同的錯誤：找不到所需的文件。 名稱：index.js 搜索位置：C:\Users\username\Documents\dev\my-app\web\src

這意味着現在我需要一個包含 index.js 的 src 文件，但是，文件結構的 index.js 與 index.html 位於同一目錄中。

我試圖不彈出應用程序，但我覺得這可能是我必須使用 go 的選項。 我只是覺得 Shopify 公司應該讓應用程序可以在本地運行，也許我錯過了一些東西。 請幫助並提前感謝您！

Answer 1

經過多次故障排除后，我終於能夠從新的 Shopify CLI 創建應用程序，以在 Heroku 服務器上運行（這是讓它在本地運行的最初意圖）。 如果其他人遇到同樣的問題，我將發布該過程。

我沒有按照 Heroku.md 文件中的說明創建 Docker 容器，而是基於 Heroku 文檔創建了一個 Heroku 應用程序。 步驟如下：

Step 1: Create the Heroku App cd into the app/project folder (this would be the web folder for the template) git init heroku git:remote -a myheroku-app-name

git 添加。 git commit -am "initialize app" git push heroku master

注意：確保您只推送 web 文件夾，而不是整個應用程序。

注意：我第一次解決這個問題沒有用，因為我已經在 Heroku 中為 Docker 映像創建了一個容器。 這僅適用於 Heroku 應用程序，而不是容器。

第 2 步：在 web 目錄中設置 package.json 腳本

"start":"npm run serve",
"heroku-postbuild": "cd frontend && npm install && npm run build",
"serve": "cross-env NODE_ENV=production node -r dotenv/config index.js"

第 3 步：更新變量（如果適用） 我的應用程序將這些變量設置如下：

const DEV_INDEX_PATH = ${process.cwd()}/public/;
const PROD__INDEX_PATH = ${process.cwd()}/public/dist/;

實際值需要是：

const DEV_INDEX_PATH = ${process.cwd()}/frontend/;
const PROD_INDEX_PATH = ${process.cwd()}/frontend/dist/;

第 4 步：允許 Heroku 配置 PORT 在我的 package.json 我刪除

"engines": {
"node": ">=16.13.0"
}

出現此錯誤后，來自 web 目錄和前端目錄： https://github.com/keystonejs/keystone-classic/issues/3994

您還需要更改 PORT 變量

app.listen(PORT)

至

app.listen(process.env.PORT)

因為 Heroku 動態創建端口。 不要在配置變量中輸入 PORT 值。

當然，這都是除了在 Heroku 中設置你的環境變量，即 HOST、SCOPES、SHOPIFY_API_KEY、SHOPIFY_API_SERET。 您可能還需要 npm i cross-env 和 dotenv。