This content originally appeared on DEV Community and was authored by Rithik Samanthula
Previously I wrote a blog about my portfolio. If you haven't checked it out yet, check it out here:
In the ending of the post, I mentioned that I deployed my React Application to Firebase.
Want to know how to do this as well?
Well today, I am going to be showing you the same.
Getting Started
In this tutorial, I will be demonstrating how you can deploy your React app using Firebase Hosting. I will assume that you already have a Firebase project set up. If you do not, you can create one using the Firebase Console.
You will also need to ensure have a React app created. For this, I will use Create React App. You can create a new React app by running the following:
npx create-react-app firebase-hosting-demo
1. Installing the Firebase CLI Tools
You will need the Firebase CLI Tools in order to deploy your app to the internet.
You can do this by using the command:
npm install firebase-tools -g
(Don't forget to add the -g flag or else it will not be enabled globally and will set the scope to only this project)
2. Login to Firebase
Login to Firebase console by using:
firebase login
Then, proceed with your google account to login to the Firebase console.
3. Initialize Firebase
The next step is to Initialize Firebase with your project using:
firebase init
You will then be prompted with a series of questions and configuration options that I will walk through with you.
Select Hosting: Configure and deploy Firebase Hosting sites.
Then, create a project on the Firebase Console
Then, back in the CLI:
Select Use an existing project
Then, select your firebase project that you created.
You will now need to specify the folder where Firebase will look for assets to deploy. By default, Create React App will generate a build folder that will contain the production assets. Unless you changed the default configuration, you’ll want to enter build for this option.
You will also be asked whether or not Firebase should configure as a single-page app. You’ll want to enter y (Yes) for this option.
The last option is whether or not Firebase should overwrite your existing build/index.html. If you haven’t created a build for your app yet, then you won’t see this option. You’ll want to enter N (No) for this option, though.
Auto Generated Configuration files
After you have completed the initialization, you should see 2 new files .firebaserc, firebase.json. These files are automatically generated and you will want to save these files, and commit them in your git repo, as they live in your firebase hosting config. You can ignore the .firebase directory for now.
The .firebaserc should look similar to the following:
{
"projects": {
"default": "firebase-hosting-demo"
}
}
The firebase.json should look similar to this:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
4. Deploying your App
Now that everything is set up, you can go ahead and deploy your app! All you need to do now is run:
firebase deploy
Firebase will then give you a unique URL where your deployed app is located. For example, it might look similar to:
https://yourprojectid.firebaseapp.com
or
And thats pretty much it!
Thank You for reading my blog and remember...
Keep Coding Y'All ???
This content originally appeared on DEV Community and was authored by Rithik Samanthula
Rithik Samanthula | Sciencx (2021-04-17T12:36:38+00:00) How to Host Your React.JS Application to Firebase. Retrieved from https://www.scien.cx/2021/04/17/how-to-host-your-react-js-application-to-firebase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.