使用 node.js 和 react.js 客户端启动一个 firebase 功能项目

Posted

技术标签:

【中文标题】使用 node.js 和 react.js 客户端启动一个 firebase 功能项目【英文标题】:Start a firebase function project with node.js and react.js client 【发布时间】:2018-11-17 15:33:19 【问题描述】:

我正在使用firebase functionsnode.jsexpress.js 在firebase 上开发一个应用程序,并在打字稿中进行开发。我想使用react.js 作为客户端框架。我设置node + express + firebase 使用:

firebase init hosting
firebase init functions

但是,鉴于当前项目设置,没有明显的方法可以使用create-react-app ... 设置react 前端框架。特别是,create-react-app 似乎创建了自己的 node_module 和index.js。我发现了这个:https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0

这有点临时。特别是,它正在使用yarn 启动一个开发服务器,但我使用的是firebase serve ...,并希望保持这种状态。这些不同的框架真的可以一起玩吗? #webDev

【问题讨论】:

【参考方案1】:

您绝对可以同时使用 React 和 Firebase,但是合并由初学者工具包为每个工具生成的复杂模板可能比它的价值更麻烦。

您可能需要选择哪个生成的模板为您提供最大的价值(无论是来自firebase init hosting 还是create-react-app),然后从未选择的项目中逐个站起来。

如果您真的想使用firebase serve,您将失去热重载和create-react-app 提供的其他开发时间优势,因为firebase serve 内部使用superstatic (repo),这是一个开发服务器托管静态文件。

您可以通过npm install --save react react-dom 进行这样的设置来使用 React,然后像往常一样使用 React,但是您很可能需要在源代码和 firebase serve 服务的静态文件之间建立一个工具链(鉴于您使用typescript 标签,我假设您至少需要将 .ts 转换为 .js),然后如果您只想使用 firebase-serve,则需要自行设置。

在我看来,您通过create-react-app 获得的开发工具链将为您的特定情况提供比坚持使用firebase serve 更直接的价值。有什么特别的原因让您对firebase serve 产生了浓厚的兴趣吗?

(只要您的托管配置指向 npm run build 输出构建文件的目录,当您想要部署到 Firebase 托管时,不使用 firebase serve 绝不会导致运行 firebase deploy --only hosting 的问题。)

【讨论】:

node.js 是如何融入这张图片的?我的图片是这样的:codeburst.io/…。虽然该示例使用 mongodb

以上是关于使用 node.js 和 react.js 客户端启动一个 firebase 功能项目的主要内容,如果未能解决你的问题,请参考以下文章

如何在 node.js 中导入 font-awesome 以在 react.js 中使用?

如何在同一个存储库中使用 React.js 和 Node.js

React-Router vs Node.js

在Node.js上搭建React.js开发环境

基于 React.js 和 Node.js 的SSR实现方案

React.js同构实践