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.
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
- 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.