How to Deploy React App On Firebase

Deploy React App On Firebase

Google Firebase Provides many services for free for limited size of data as like database till 2gb and others like hosting and many but some them must require some bucks So, We are going to use the one of the service of google firebase called Hosting and we will deploy our app on it free of cost. 

Before hosting app you must have created your react app not in the build version but at least must have done with creation and have ready to host / deploy your web app of react.

 1. Creation of React App 

Note : to run this command when you are at desired place and in your command line directory also

Command : npx create-react-app Your_App's_Folder_Name 

Above Command Will Create the react app for you with desired folder name that you want to have , but if you don't want to create any folder and you have already created you just want to create the app then replace the "Your_App's_Folder_Name" with "." 

Your command will look like this to run this given below command you must be inside the project folder and also in your Commmand line of your diretory

Command : npx create-react-app . 

both of these command will run while your are in the respected directory 

 2. Firebase Tools Installation 

Open Your Project directory in command line Or In Your VS Code and Type the command to install the firebase-tools and hit enter

Command : npx install -g firebase-tools

Now if you Visit Your App Folder Your will See the firebase files in it  .

 

3. Firebase Login 

After completion of installation of firebase-tools into your project now we are going to login into our firebase by running this command inside our command line  "firebase login" and hit enter
   

Command : firebase login 

It will ask you allow the Firebase CLI for error reporting information you should "Y" and hit enter to process it open up a web page where you are asked to allow the login CLI and after allowing it to your account you will get a success message

  

4.Firebase Initiation 

After Successfully Logging in We are going to initialize Our Firebase by running this command in cmd (Command Line) 

 Command : firebase init

You will be asked some of Questions to proceed to firebase initiation  

1.     it will Ask to proceed ?

 You have to type "Y" and hit enter

2.    Now it Open the Project Setup :

 it Will Ask You to create new or existing  :  

You have to use the up and down arrows and spacebar for selection and hit enter

select "use existing project" 

Now Use same selection method of selection  (spacebar and arrows ) for selecting your desired project and hit enter

3. Hosting Selection

Now we are done with the project selection 

Now Select the "Hosting" by using same method ( spacebar to selection and for scrolling use arrows) 

4. Public Directory Selection 

    Type "build" and hit enter  as your public directory 

5.    Single Page app : 

    Type "Y" and hit enter

6. GitHub auto hosting : 

Type "N" for not and you want to have the Auto hosting form GitHub than type "Y" for now just type "N" for understanding move forward 

Now Initialization process of your of app is completed 

5. Creation of Optimized Build of React app

Now go to project and run app build command

Command :  npm run build

this command create the optimize build for your production to ready to host / deploy

6. Deployment of App

Finally We are ready to deploy Our App Now , before that visit your app folder you will have build folder and inside all the necessary files are there and ready to be hosted / deployed. 

For deployment of you app just run this command inside command line "firebase deploy"

Command : firebase deploy

After Successfully Deployment of Your app Now can have the Project console link and Your Hosting link for copying that press "crtl + space bar" now paste it in browser to visit that app 

My link : Visit My Portfolio

Before Closing all Tabs Make Sure to logout from firebase . 

7. Logging Out From Firebase Console 

Type "firebase logout" and hit enter you will be logged out now fell free close all tabs

Command : firebase logout

#reactappdeploy #reactapp #firebasedeployment #createreactapp  #react #Firebase #firebase #webdevelopment #Web #Development