Babel.js 无法让使用Shopify CLI创建的react应用程序在本地运行

kninwzqo 于 2022-12-08 发布在 Babel

关注(0)|答案(1)|浏览(148)

以下是应用程序的文件结构，以供参考：

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应用程序进行比较）。
如果我使用react-scripts，它需要一个公共文件夹。我将“frontend”文件夹更改为“public”，并更改了应用程序中所有使用“frontend”作为文件夹名称的示例。我使用的react-scripts命令是：
cd web && react-scripts启动
我得到一个不同的错误：找不到所需文件。名称：index.js搜索范围：C：\用户\用户名\Documents\dev\我的应用程序\web\源代码
这意味着现在我需要一个包含index.js的src文件，但是，文件结构中的index.js与index.html位于同一目录中。
我试着不弹出应用程序，但我觉得这可能是我必须要去的选择。我只是觉得，该公司应该使应用程序，它可以在本地运行，也许我错过了一些东西。请帮助和感谢你提前！

babeljs

来源：https://stackoverflow.com/questions/73341339/cant-get-react-app-created-with-shopify-cli-to-run-locally

1条答案

按热度按时间

lf5gs5x21#

经过大量的故障排除，我终于能够让应用程序从新的购物CLI创建运行在Heroku服务器上（这是最初的意图，让它运行在本地）。
我没有按照www.example.com文件中的说明创建Docker容器Heroku.md，而是根据Heroku文档创建了一个Heroku应用程序。
步骤1：创建Heroku应用程序cd到app/project文件夹（这将是模板的web文件夹）git init heroku git：remote -a myheroku-app-name
git add . git commit -am“初始化应用程序”git推送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在我的package.json中配置PORT我删除了

"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。

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js 无法让使用Shopify CLI创建的react应用程序在本地运行

1条答案

相关问题

热门标签

最新问答