React App With Firebase Deployment (Manual And CI)

Introduction

Hope you all are doing well. Today we are going to learn about how to create react application and host the same into firebase on Chromebook.

Pre-requisite

Linux Environment in Chromebook
Node JS
Git
Firebase account
Visual Studio Code

Please note

I am using the Node version v19.1.0 and npm version 8.19.3

If you are getting any version issues, then please use the below command to upgrade.

npm cache clean -f 
sudo npm install -g n
sudo n latest

If you are getting any permission issues, then follow the below command to fix it

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH ### Add this to the end of the file ~/.profile
source ~/.profile

Step

Commit the code in Git for future usage
Create a project in firebase and configuration
First Create a simple demo react application
Finally, Deploy the demo in firebase

Commit the code in Git for future usage

Create a repository in the GitHub portal
please ignore node modules while committing.

Create a project in firebase

Create a project in the firebase console as react-demo-base

Create a Simple demo react application on your local machine, to do this please follow the commands,

npx create-react-app reactapp

Once the project is successfully created, you will get the below message, then navigate to the exact project folder path.

React App With Firebase Deployment

npx start

Make sure your application works in a local environment, the application will launch at http://localhost:3000/

Configure Firebase hosting

To host your react application in firebase now we need to initialize it with the following command

npm install -g firebase-tools

Now initialization is done, it's ready to deploy your project to firebase, now we need to connect our project to firebase with the following snippet, This snippet allows you to login into your firebase portal. If its already accessible provide it will show your mail id, otherwise you have to enter credentials, similar to GitHub access.

firebase login

Now we are initializing to deploy our project

firebase init

React App With Firebase Deployment

You will be prompted to respond to the above questions
- Choose to host: Configure files for Firebase hosting and (optionally) set up GitHub Action deploys.
- Use an existing project: Select the Firebase project you created earlier (reactapp-demo-fbase).
- Enter build as the public directory.
- Configure as a single-page app: Yes.
- Set up automatic builds and deploys with GitHub:No (If you gave the option as Yes, then whenever you do the check-in, CI will trigger and deployment kick start automatically)
Once all the setup is done, it will generate a couple of files those need to be checked in.
- firebase.json => hosting configuration file
- firebaserc => project information to connect firebase to deploy.

Finally, Deploy the demo in firebase

Now make sure everything is aligned with us. All are ok to go. please use the below command to do a manual deployment. Also please make sure

firebase deploy

I hope this article gives an idea about how to connect and host into firebase manually and with CI integration.