无法让使用 Shopify CLI 创建的 React 应用程序在本地运行答案

【问题标题】：Can't get react app created with Shopify CLI to run locally无法让使用 Shopify CLI 创建的 React 应用程序在本地运行
【发布时间】：2022-08-24 11:19:13
【问题描述】：

作为参考，这里是应用程序的文件结构：

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 start 在本地运行它的方法。如果我使用 \"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 位于同一目录中。

我试图不弹出应用程序，但我觉得这可能是我必须选择的选项。我只是觉得 Shopify 公司应该将应用程序制作到可以在本地运行的地方，也许我错过了一些东西。请帮助并提前感谢您！

标签： node.js reactjs babeljs jsx shopify

【解决方案1】：

经过多次故障排除后，我终于能够从新的 Shopify CLI 中创建应用程序以在 Heroku 服务器上运行（这是让它在本地运行的最初意图）。如果其他人遇到同样的问题，我将发布该过程。

我没有按照 Heroku.md 文件中的说明创建 Docker 容器，而是基于 Heroku 文档制作了一个 Heroku 应用程序。步骤如下：

第 1 步：创建 Heroku 应用程序 cd 进入 app/project 文件夹（这将是模板的 web 文件夹）混帐初始化 heroku git:remote -a myheroku-app-name

混帐添加。 git commit -am “初始化应用程序” git push heroku 大师

注意：确保您只推送 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。不要在配置变量中输入 PORT 值。

当然，除了在 Heroku 中设置环境变量（即 HOST、SCOPES、SHOPIFY_API_KEY、SHOPIFY_API_SERET）之外，还有这些。您可能还需要 npm i cross-env 和 dotenv。

【讨论】：