For enquiries call:

Phone

+1-469-442-0620

April flash sale-mobile

HomeBlogWeb DevelopmentHow to Deploy React Application to Firebase

How to Deploy React Application to Firebase

Published
28th Sep, 2023
Views
view count loader
Read it in
7 Mins
In this article
    How to Deploy React Application to Firebase

    To dedicate time to learning a new framework when the front-end world changes daily, especially when that framework could end up being a dead end, is difficult. React has an advantage over other front-end development frameworks. React is known for its simplicity, native approach, data binding performance, and testability. 

    It's always a hassle for beginners to put their apps in the cloud and see what they've created. When you create something locally, you may want to appeal to the world, even if it's a small app. Hosting such things may require back-end services, hosting providers, domain names, and so on. To simplify, Firebase combines the aspects of deployments, servers, and SDKs, making it a one-stop shop for everything relating to the final release of production-grade software. Firebase is known as the best prototyping tool in the industry. So, if you are building some prototype, this might help you to achieve easy development, scaling up, and help reduce the efforts to research every service. 

    In this article, we will go through the following stages of development. 

    • Create a simple React application with create-React-app. 
    • Log into the Firebase Console and create a new project to deploy React app to firebase hosting. 
    • Steps to deploy firebase React app. 

    But first, let’s learn about firebase hosting. Want the #1 way to build amazing React apps? Check out React certification course

    What is Firebase Hosting?  

    Firebase Hosting provides fast and secure hosting for web apps, static and dynamic content, and microservices

    Firebase Hosting is a production-quality web content hosting for developers. Firebase deploy React app quickly and serve static and dynamic content to a global CDN (content delivery network) in a single command. You can also combine Firebase Hosting with Cloud Functions or Cloud Run to build and host microservices in Firebase. 

    The modern web is secure. There is zero-configuration SSL into Firebase Hosting, so content is always delivered securely. Firebase Hosting supports all types of content for hosting, from CSS and HTML files to Express.js microservices and APIs.

    All files you upload are cached on CDN Edge SSDs around the world and delivered as gzip. It automates the process of selecting the best compression method for your content. Content is delivered quickly, wherever users are.

    View and test your changes at a locally hosted URL and interact with the emulated backend. You can share changes with teammates using temporary preview URLs. Hosting also provides GitHub integration for easy repeat preview content. 

    Get to know more about react card ui component

    Create a Simple React Application With create-React-app  

    The prerequisite for this stage is to have node.js installed on your computer to use npm. First, verify that node.js and npm are both installed. For verification, we use the following commands. 

    We will create a React app using the create-React-app command. The create-React-app is a tool that provides fixed phrases for React applications, so you can easily push React apps. Save you from time-consuming setups and configurations. Now create a React app with your preferred name using the following commands. 

    Running the above command will create a my-app directory on your local machine. You can find all the files you need for your project if you look under the my-app directory. npm create-React-app is a command followed by the name of the app. In my case, it is my-app. After creating the app and using the above commands, you will see something like the below picture in the terminal. 

    To run the code, change the directory to the my-app folder and run the app using the following commands. 

    After running the npm start command, you can see the following output in the browser. 

    I hope that it was easy and fast to create a React application. Now, we will move to the next step, which is the Firebase setup. 

    Know more about react functional components. 

    Log into the Firebase Console and Create a New Project  

    We’re going to set up Firebase now. To begin, browse firebase official website and log in to the Firebase Console for firebase React deploy. You can log in with your Google account and click the Create a new project button next to the name of your project. Then follow the on-screen instructions to finish your project. 

    In the Firebase console, create a project with my-app 

    Create a new project and follow along as shown below to complete the process. 

    After the creation of the project, you can add Firebase to your Android, iOS, and even your web app. Want to learn about more amazing technologies, feel free to browse through the Web Development Complete course

    Steps to Deploy React app by Using Firebase Hosting  

    Step1: Install Firebase Tools 

    Open a terminal or command prompt and navigate to the folder where your project will be created. 

    In your project folder, install Firebase using the following command: 

    npm install firebase 

    Alternatively, you can install Firebase globally using the following command: 

    npm install -g firebase-tools 

    Step2: Login to Firebase 

    You need to log in to Firebase in your terminal. If you are not already logged in, you will be prompted to enter your login details (email and password). Also, double-check that you’re inside the my-app folder React application. 

    firebase login

    You will then be prompted for y / n. Type y to go to your browser and log in to your Gmail account to verify your account. 

    If you log in successfully, you may see a message similar to the following in your browser: 

    Before initializing the Firebase. 

    npm run build 

    This will create a production layer for your app. 

    Step3: Initialize Firebase in Your React app 

    Now we’ll use the following command to set up our Firebase account with our React app: 

    firebase init 

    Choose option Hosting: Configure and deploy Firebase Hosting sites. 

    In the Project setup, choose the option Use an existing project. 

    And then select the Firebase project name that we have created. Our project name is my-app, so we’ll choose that. 

    Step 4: Select firebase location to deploy in hosting setup section.

    Finally, you’ll need to select the location where firebase will look for assets to deploy in the Hosting setup section. Production assets are saved in the build folder by default. Therefore, type build according to this option. Enter y for Configure as a single-page app option. Last but not least, you must decide whether or not to overwrite your existing build/index.html file. Therefore, select N (No) for this option because you need the actual index.html file generated by Reacts when you build your project. 

    After you have completed the initialization, you should see two new files .firebaserc, and firebase.json. These files are automatically generated. These files contain your Firebase hosting configuration, so you'll need to save them to your git repository and commit. You can ignore the .firebase directory for now. 

    Step5: Deploying Your App 

    Finally, the firebase React app deploy can be done using the following command. 

    firebase deploy 

    The firebase hosting setup complete after deploy React step. Firebase then provides a unique URL where the deployed app is located. For example, it might look similar to: 

    https://my-app-1cc17.web.app/ 

    That's all! You might have noticed that your app is hosted securely over HTTPS. This is another big advantage of Firebase hosting, it's super-fast and easy to deploy. If you want to master React skills and become a successful developer check out React certification course KnowledgeHut. Thanks for reading! 

    Looking to master Python? Join our python language course online and unlock the power of this versatile language. Start coding today!

    Conclusion  

    In this guide, we have given you a walkthrough of the steps to set up and deploy your own React Application. Firebase is a mobile and web application development platform that provides services such as real-time database, analytics, storage, and authentication. Firebase also provides a set of client libraries in different programming languages, thus making it easier for developers to integrate these services into their apps. You can deploy your React application on firebase using a few commands from your terminal without any hassles, like on other platforms such as Heroku, vercel, etc. 

    Frequently Asked Questions (FAQs)

    1Can I deploy React app to Firebase?

    Yes, you can deploy a React app to Firebase. 

    2How do I connect my React app to Firebase?

    Follow the above steps to connect your React app to Firebase. 

    3How do I deploy React node app to Firebase?

    You'll need a Node. js environment to write functions, and you'll need the Firebase CLI to deploy functions to the Cloud Functions runtime. 

    4Can we deploy an app on Firebase?

    Yes, you deploy apps on Firebase. 

    Profile

    Mritunjay Gupta

    Author

    I'm an undergraduate student who is passionate about solving real-life problems. I'm fascinated by software development and product management. I love to learn new stuff that interests me and can help me get better at what I do. I love to work with people who are passionate about building solutions.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon