article Saturday 27 April 2024
Deploy a React app using Firebase Hosting
Author
Eric Wallen
Step 1
Make sure your app is running locally by going into the apps directory and running npm start from your terminal.
Step 2
Go to console.firebase.google.com and create a project
Step 3
Install the Firebase CLI tools by running the command below in your terminal
Step 4
Login to firebase running firebase login from your terminal.
Your terminal will now look like this.
Your browser will popup with a user login window so you can choose the account. You must use the same account that you used when you set your project up in step 2
Step 5
Initialize Firebase in your project by running the command below in your terminal
When you see the firebase services menu choose "Hosting" with the arrow keys (up/down) and space bar to select. Hit enter
Step 6
Select your project by using the arrow keys and then hit enter
Step 7
When it asks what you want the public directory to be answer ./
When it asks if you want to configure as a single page app answer Y
Firebase Initialization is complete will be the next message you should see.
Step 8
Add a deploy name and value to the package.json of your react app.
"deploy": "npm run build && firebase deploy",Step 9
You are now ready to deploy. Run the command below in your terminal.
Follow the Hosting URL to go to your fully deployed and live site in the browser.
Troubleshooting
Problem: Firebase init > project not showing in list
Get your project id from settings
Make the CLI recognize and use your project by running the command below in your terminal