How deploy React to Firebase Hosting
I am a dedicated and skilled Software Engineer specializing in mobile app development, backend systems, and creating secure APIs. With extensive experience in both SQL and NoSQL databases, I have a proven track record of delivering robust and scalable solutions.
Key Expertise:
Mobile App Development: I make high-quality apps for Android and iOS, ensuring they are easy to use and work well.
Backend Development: Skilled in designing and implementing backend systems using various frameworks and languages to support web and mobile applications.
Secure API Creation: Expertise in creating secure APIs, ensuring data integrity and protection across platforms.
Database Management: Experienced with SQL databases such as MySQL, and NoSQL databases like Firebase, managing data effectively and efficiently.
Technical Skills: Programming Languages: Java, Dart, Python, JavaScript, Kotlin, PHP
Frameworks: Angular, CodeIgniter, Flutter, Flask, Django
Database Systems: MySQL, Firebase
Cloud Platforms: AWS, Google Cloud Console
I love learning new things and taking on new challenges. I am always eager to work on projects that make a difference.
To deploy a React app to Firebase Hosting, follow these steps:
Requirements
Install Firebase CLI: Ensure you have Node.js installed, then install Firebase CLI by running:
npm install -g firebase-tools
Login to Firebase: If you haven’t already, log in to your Firebase account using the CLI:
firebase login
ITS AUTOMATIC TO REDIRECT TO YOUR BROWSER. IF NOT COPY THE LINKFirebase Project: Make sure you have a Firebase project set up. You can create one in the Firebase Console: https://console.firebase.google.com/.
Steps to Deploy React App to Firebase Hosting
1. Create a React App (if not already created)
If you don’t already have a React app, create one using create-react-app:
npx create-react-app react-router
cd react-router
2. Initialize Firebase in Your React Project
In your React app’s root directory, run:
firebase init
When running firebase init, you'll be prompted with a few questions:
Select Firebase Hosting: Use the arrow keys to navigate and space bar to select "Hosting: Configure and deploy Firebase Hosting sites".
Choose a Firebase project: Select the Firebase project you created earlier from the list.
Set up a public directory: Type
buildas the public directory (this is where your React app will be built).
Single-page app: Answer
Yesto "Configure as a single-page app (rewrite all URLs to /index.html)?"
Overwrite existing
index.html: If prompted, chooseNo(Firebase will create its own hosting configurations).
3. Build the React App
Before deploying, you need to build your React app. This will create an optimized production build:
npm run build
This command generates a build folder, which contains your entire application optimized for production.
4. Deploy to Firebase Hosting
Once the build is ready, deploy your app to Firebase Hosting by running:
firebase deploy
5. Firebase Hosting URL
After deploying, you will see a specific URL where your app is hosted, like:
Use the Hosting URL to access your live React application.
Useful Firebase Hosting Commands:
firebase deploy: Deploys your project to Firebase.firebase serve: Serves your app locally on a development server (useful for testing Firebase Hosting setup).
Now your React app should be live on Firebase Hosting! You can access it via the URL provided by Firebase, which will look something like
https://react-router-thirdy.web.app.
Github:
