Start a firebase function project with node.js and react.js client

Question

I am developing an application with node.js and express.js hosted on firebase using firebase functions, and development in typescript. I would like to use react.js as client side framework. I set up node + express + firebase using:

firebase init hosting
firebase init functions

However, there is no obvious way to set up react front end framework using create-react-app ... given the current project setup. In particular, create-react-app seem to create its own node_module and index.js. I found this: https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0

It is a bit ad-hoc. In particular, it is launching a dev server using yarn, but I am using firebase serve ..., and would like to keep it that way. Do these different frameworks play together at all? #webDev

casieber · Accepted Answer · 2018-06-07 17:20:19Z

2

You can definitely use React and Firebase together, but merging the complex templates generated by starter kits for each may be more trouble than it's worth.

You will likely need to pick which generated template gives you the most value (whether it be from firebase init hosting or create-react-app) and then work on standing up items from the non-chosen ones piece by piece.

If you really want to use firebase serve you will be losing hot-reload and other development time benefits that create-react-app provides, as firebase serve internally uses superstatic (repo) which is a dev server for hosting static files.

You can use React with such a setup by npm install --save react react-dom and then using React as normal, but it's very likely that you will want a toolchain between your source and the static files that firebase serve serves (given your use of the typescript tag, I'm assuming you at least need to transpile .ts to .js), and you will then need to set that up on your own if you simply want to use firebase-serve.

In my opinion, the dev toolchain that you get through create-react-app will provide more immediate value for your specific situation than wanting to stick with firebase serve. Is there any specific reason you feel glued to firebase serve?

(Not using firebase serve in no way causes issues running firebase deploy --only hosting later when you want to deploy to firebase hosting, as long as your hosting config points to the directory where npm run build outputs your built files.)

answered Jun 7, 2018 at 17:20

casieber

7,6122 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xiaolingxiao Over a year ago

how does node.js fit into this picture? I'm picture something like this: codeburst.io/…. although the example uses mongodb

Collectives™ on Stack Overflow

Start a firebase function project with node.js and react.js client

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related