Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices. Firebase Hosting is production-grade web content hosting for mobile app developers. With a single command, you can rapidly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).
Using the Firebase CLI, you deploy files from local directories on your computer to your Hosting server. Beyond serving static content, you can use Cloud Functions for Firebase or Cloud Run to serve dynamic content and host microservices on your sites. All content is served over an SSL connection from the closest edge server on our global CDN.
Firebase Hosting has lightweight hosting configuration options for you to build sophisticated PWAs. You can easily rewrite URLs for client-side routing, set up custom headers, and even serve localized content.
Firebase Hosting is a fully-managed hosting service for static and dynamic content as well as microservices. The service is backed by SSD storage and a global CDN (content delivery network). Zero-configuration SSL is built into Firebase Hosting, so content is always delivered securely.
Pair Firebase Hosting with Cloud Functions to build microservices using the Express.js framework. This pairing allows you to host your microservices and APIs on Firebase. In addition, you can use a deep integration with Cloud Firestore to build very powerful forms and web apps which can update data in real time.
With Firebase Hosting, you’re automatically given a Firebase sub-domain, but you can choose to serve your content on a custom domain (like example.com or myrealtimeapp.example.com). Firebase Hosting provisions an SSL certificate for each of your domains and serves your content over a global CDN.
Firebase Hosting supports multiple sites in a single Firebase project. Each site hosts its own collection of content, has its own hosting configuration, and can have one or more associated domains. Since the sites are all in the same Firebase project, all the sites can access the other Firebase resources of the project. You can use multiple sites in a Firebase project to keep related sites together (for example your single-page app, blog, and marketing website).
You can link your Firebase project to Cloud Logging to view, search, and filter your web request logs for each of your Hosting sites. These logs are from the CDN that’s automatically provided by Firebase, so every request to your site and the associated request data are logged.
Better understand your site – Learn from where and when you have visits to your site, your site’s response statuses, the latency of end user requests, and more.
Filter your logs with queries – Leverage automatically collected data to filter and plot data associated with each request or your site.
Use logs-based metrics – Create Cloud Monitoring charts and alerting policies from predefined system metrics or user-defined metrics.
Export logs to other Google Cloud tools – Use logs data in other tools (like BigQuery and Data Studio) for more powerful analysis and correlation.
Firebase Hosting partnered with Cloud Build offers a DevOps-ready solution for automating a continuous deployment workflow for your static and dynamic content as well as for your microservices.
After you configure these tools, you can deploy your web app to Firebase Hosting by simply checking in your code to your git repository.
Error pages – Return a neatly fully customized 404 page from your web app.
Rewrites – Customize which endpoints serve what traffic, and even display the same content from multiple URLs.
Localized content – Serve content that’s customized for a user’s language preference and/or country.
Headers – Want to access cookies? Use custom headers!
Caching and CDN behaviour – Control how your web app is cached across the CDN through custom headers.
Restrict access and counter a DDoS attack for your web apps
Using the power of Express.js middleware, you can build custom logic into serving your microservices, APIs, and other HTTP endpoints. For example, with just a few lines of code, you can integrate popular Node.js middleware offerings to build additional security layers, like access management by IP or protection from denial-of-service (DDoS) attacks.
Deploy to Firebase from various web-based IDEs
Firebase Hosting is integrated with various web-based IDEs so that you can deploy to Firebase Hosting directly from within StackBlitz and Glitch, two web-based IDEs. These IDEs automatically detect when you’re creating a Firebase app and allow you to deploy to Firebase Hosting with the click of a button, without ever leaving the IDE!
Build deep integrations with other Firebase services
Firebase Hosting works out-of-the-box with Firebase services, including Cloud Functions, Authentication, Realtime Database, Cloud Firestore, and Cloud Messaging. You can build powerful microservices and web apps using these complementary Firebase services.
It’s production-grade hosting is backed by a global content delivery network (CDN). Hosting serves your content over SSL, by default, and can be used with your own custom domain or on your project’s free subdomains on web.app and firebaseapp.com.
Before you begin
Create react project: npx create-react-app firebase-hosting-demo
Install Firebase Tools
Next, you will need to install the firebase tools that will allow you to deploy your app. You can install the tools by running the following:
npm install firebase-tools -g
Step 1: Creating firebase project
Go to firebase console and sign in with your Google account
then create new project, enter your project name.
Now come back to the command line and go to your project folder
First, we have to login into firebase from the command line. Type in the following command.
It will take you to the sign-in page in the browser, once you’ve successfully logged in it will show you something like this.
on command line
To initialize firebase project, you have to enter the command
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 it will ask you to select firebase project,
Select Use an existing project, which we created in step 1
Then it will ask you enter the main folder in which all your website assets are present.
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.
After you have completed the initialization, you should see 2 new files. firebaserc, firebase.json in the react project. These files are automatically generated and you will to save these files, and commit them in your git repo, as they house your firebase hosting config. You can ignore the .firebase directory for now. The .firebaserc should look similar to the following:
The firebase.json file should look exactly like the following:
Now that everything is set up, you can go ahead and deploy your app! All you need to do now is run on command line: firebase deploy
Congratulations! your website is now live; you can check by going to URL which is provided as Hosting URL in the command line.
Want to Take your business to the next level! GET IN TOUCH
At Rlogical Techsoft Pvt Ltd, hire ReactJS developers for this technology that sets apart your business as well as delivering the most complex and best ReactJS Development Services.
Pranali Gajjar is a .Net Developer at Rlogical Techsoft Pvt. Ltd. She has hands-on experience in C#, NET, MVC, Entity Frame Work, Xamarin, and having expertise in managing multi-use large complex projects. In her free time, she likes to learn about new technologies such as React JS and share her knowledge with others.
600 E Michigan Ave, Kalamazoo, MI 49007, USA
5 Kew Road, TW9 2PR, London
Peter Klein: +44 753 859 8026
Contact Email: email@example.com
301 1-28-21 Hayabuchi, Tsuzuki-ku, Yokohama-shi, Kanagawa 224-0025, Japan
Contact Email: firstname.lastname@example.org
Suit 3, Level 27, 1 Farrer Place Sydney NSW 2000
Contact Email: email@example.com