如何在 netlify 上为 ReactJS 组件库部署演示应用程序？答案

【问题标题】：How to deploy a demo app for a ReactJS component library on netlify?如何在 netlify 上为 ReactJS 组件库部署演示应用程序？
【发布时间】：2021-12-07 20:12:59
【问题描述】：

我正在构建一个 ReactJS 库组件：

GitHub 仓库：https://github.com/appukuttan-shailesh/neo-viewer/tree/react_lib
分支：react_lib

使用此组件的演示应用程序位于演示目录中（位置：js/react/demo）。我正在尝试部署的应用是这个演示应用。

我的组件 (js/react) 的 package.json 的“脚本”设置为：

"scripts": {
    "build": "rollup -c",
    "build-watch": "rollup -c -w",
    "start-demo": "cd demo && npm run start",
    "i-all": "npm i && cd demo && npm i",
    "dev": "npm-run-all --parallel build-watch start-demo"
  }

在本地，我通过以下方式运行我的应用程序： npm run dev

但是当我部署到 netlify 时这不起作用。我也尝试了其他构建命令，例如：
rollup -c
rollup -c && cd demo && npm run start
npm-run-all --parallel build-watch start-demo

我过去曾设法在 netlify 上部署其他应用程序（但它们都是由 yarn build 构建的更简单的应用程序），但这个具有不同的结构，我不知道如何进行。

我认为我需要以不同方式处理此部署，因为它使用汇总？从 Netlify 支持，我的理解是：

你不能在 Netlify 上运行服务器。

和

您需要的是构建生产版本的命令 - 将输出所需文件并且命令将退出的命令。发生这种情况后，Netlify 将部署您的网站。

我想我需要为演示应用程序生成一个“dist”或“build”目录，然后可以将其部署在 netify 上。我该怎么做？

【问题讨论】：

这里有很多东西要解开。这是一个具有大量文件链接依赖项的单存储库，并且缺少带有配置的真正单存储库结构。我首先从 yarn 工作区开始，然后运行 yarn workspace <lib> 命令进行构建。没有时间修复所有这些来向您展示它需要如何设置。最后，只需运行您在本地运行的命令将构建放入演示文件夹，然后部署该构建文件夹。

标签： reactjs web-deployment netlify

【解决方案1】：

在 netlify 团队 (see here) 的帮助下终于解决了这个问题！

总结

最佳建议：

要进行调试，我建议从您自己的 repo 的新克隆重新开始，并注意您需要执行的步骤以使其在本地工作。您需要确保您提供给 Netlify 的说明执行相同的步骤。

这在本地对我有用

git clone --single-branch --branch react_lib https://github.com/appukuttan-shailesh/neo-viewer

cd neo-viewer/js/react

npm update && npm run build-lib && npm run i-all && npm run build-demo

serve-s demo/build

仅供参考，我在基础“package.json”中的“脚本”设置如下：

"scripts": {
    "build-lib": "rollup -c",
    "build-lib-watch": "rollup -c -w",
    "build-demo": "npm run build-lib && cd demo && react-scripts build",
    "start-demo": "cd demo && npm run start",
    "i-all": "npm i && cd demo && npm i",
    "dev": "npm-run-all --parallel build-lib-watch start-demo"
  }

所以现在我将 netlify 上的“构建”命令设置为：

npm update && npm run build-lib && npm run i-all && npm run build-demo

一切正常！ :-)

【讨论】：