Firebase, Node.js and React on MacOS

Teguh Arief

Nov 02, 2022

Share article to

Learn the installation of Firebase, Node.js, npm, and React on macOS.

In this tutorial we are going to learn the installation of Firebase, Node.js, npm, and React on macOS.

Firebase is not only hosting a custom backend with Node.js, but also all the parts you need for a fullstack project, like databases, file hosting, authentication & much more on Google Cloud Platform.

React is a library which helps developers to develop highly efficient data-driven SPA apps. It is based on functional programming, relies on the concept of immutability and encourages component-based architecture based on the Single reusability principle.

Node.js is a JavaScript-based environment which you can use to create web-servers and networked applications. You can also use it to perform helpful tasks on your computer such as concatenating and minifying JavaScript files and compiling Sass files into CSS.

npm is a “package manager” that makes installing Node “packages” fast and easy. A package, also called a module, is just a code library that extends Node by adding useful features. For example, the “request” module simplifies the process of making HTTP requests so you can easily get web resources from other sites.

Create a React App

Download Node.js for macOS on

Check availability and version Node.js.

node -v

Check availability and version npm.

npm -v

Open Visual Studio Code and start with.

npm start

Then open http://localhost:3000 on browser.

Deploy React on Firebase

Add Firebase to your web app on Console.

Install Firebase tools that will allow you to deploy your React app.

npm install firebase-tools -g

Login to Firebase.

firebase login

Set a project default.

firebase use

Firebase init.

firebase init

And selected.

  1. ❯◯ Hosting: Configure and deploy Firebase Hosting sites

  2. What do you want to use as your public directory? public

  3. Configure as a single-page app (rewrite all urls to /index.html)? Yes

  4. Set up automatic builds and deploys with GitHub? Yes

  5. File public/index.html already exists. Overwrite? No

  6. For which GitHub repository would you like to set up a GitHub workflow? (forma t: user/repository)

  7. Set up the workflow to run a build script before every deploy? Yes

  8. What script should be run before every deploy? npm ci && npm run build

  9. Set up automatic deployment to your site's live channel when a PR is merged? Yes

  10. What is the name of the GitHub branch associated with your site's live channel? main

Build your app for production.

npm run build

Deploy React app.

firebase deploy

This article Firebase, Node.js and React on MacOS has been updated from various original sources.

Related Posts