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.
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!
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)
1. Can I deploy React app to Firebase?
Yes, you can deploy a React app to Firebase.
2. How do I connect my React app to Firebase?
Follow the above steps to connect your React app to Firebase.
3. How 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.
4. Can we deploy an app on Firebase?
Yes, you deploy apps on Firebase.
Discussion about this post