Firebase, Node.js and React on MacOS

In this tutorial, we'll guide you through the essential steps for installing and configuring Firebase, Node.js, npm, and React on macOS. This setup will empower you to develop and deploy powerful full-stack applications.

Firebase offers more than just hosting; it's a comprehensive platform on Google Cloud Platform that provides all the necessary components for a full-stack project. This includes robust databases, flexible file hosting, secure authentication, and much more, seamlessly integrating with custom backends built with Node.js.

React is a leading JavaScript library designed for building highly efficient, data-driven Single Page Applications (SPAs). It champions functional programming principles, embraces immutability, and promotes a component-based architecture focused on reusability.

Node.js is a versatile JavaScript runtime environment that extends JavaScript's capabilities beyond the browser. You can leverage Node.js to create scalable web servers and networked applications, as well as perform various local development tasks like concatenating and minifying JavaScript files, or compiling Sass into CSS.

npm (Node Package Manager) is an indispensable tool that simplifies the process of installing and managing Node.js "packages" or modules. These packages are essentially code libraries that extend Node.js's functionality, making it easy to integrate useful features—for instance, the "request" module streamlines HTTP requests for fetching web resources from other sites.

Create a React App on macOS

To begin, download and install Node.js for macOS from the official website: https://nodejs.org/en/.

After installation, verify the availability and version of Node.js and npm using your terminal:

node -v

Confirm your npm version:

npm -v

Now, open Visual Studio Code (or your preferred IDE) and create a new React app. Navigate to your project directory in the terminal and start the development server:

npm start

Your React app should now be running and accessible in your browser at http://localhost:3000.

Deploy React App on Firebase

To deploy your React application, you'll integrate it with Firebase Hosting. Start by adding a new web app to your Firebase project via the Firebase Console: https://console.firebase.google.com/.

Next, install the Firebase CLI tools globally. These tools are essential for interacting with Firebase services, including deploying your React app:

npm install firebase-tools -g

Authenticate your Firebase CLI with your Google account:

firebase login

Set your Firebase project as the default for your current directory. Replace <your-firebase-project-id> with your actual project ID:

firebase use <your-firebase-project-id>

Initialize your Firebase project in your React app's root directory. This command will guide you through configuring Firebase services for your project:

firebase init

During the `firebase init` process, select and configure the following options:

1. Choose "Hosting: Configure and deploy Firebase Hosting sites" by navigating with the spacebar and pressing Enter.
2. When prompted, specify your public directory. For a standard React app, this is typically build (after running `npm run build`). If you're following a different setup, adjust accordingly.
3. Configure as a single-page app (rewrite all urls to /index.html)? Select Yes.
4. Set up automatic builds and deploys with GitHub? Select Yes if you want to integrate with GitHub Actions for CI/CD.
5. If `public/index.html` already exists, you'll be asked to overwrite it. Choose No to preserve your existing file.
6. For GitHub integration, specify your repository in the format: user/repository.
7. Set up the workflow to run a build script before every deploy? Select Yes.
8. What script should be run before every deploy? Enter: npm ci && npm run build.
9. Set up automatic deployment to your site's live channel when a PR is merged? Select Yes.
10. What is the name of the GitHub branch associated with your site's live channel? Enter: main.

Before deploying, you need to build your React app for production. This command creates an optimized `build` folder:

npm run build

Finally, deploy your built React app to Firebase Hosting:

firebase deploy

This article on Firebase, Node.js, and React on macOS has been updated and compiled from various original sources to provide a comprehensive guide.