{"id":7140,"date":"2020-09-21T11:35:34","date_gmt":"2020-09-21T11:35:34","guid":{"rendered":"https:\/\/www.rlogical.com\/?p=7140"},"modified":"2025-03-31T18:47:53","modified_gmt":"2025-03-31T13:17:53","slug":"firebase-hosting-of-react-project","status":"publish","type":"post","link":"https:\/\/www.rlogical.com\/blog\/firebase-hosting-of-react-project\/","title":{"rendered":"Firebase Hosting of React Project"},"content":{"rendered":"

Introduction of Firebase Hosting<\/span>
\n<\/strong><\/h2>\n

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<\/strong><\/a>. With a single command, you can rapidly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).<\/p>\n

Firebase Hosting is built for the modern web developer. Websites and apps are more powerful than ever with the rise of front-end JavaScript frameworks like Angular and static generator tools like Jekyll. Whether you are deploying a simple app landing page or a complex Progressive Web App (PWA)<\/strong>, Hosting gives you the infrastructure, features, and tooling tailored to deploying and managing websites and apps.<\/p>\n

Using the\u00a0Firebase CLI<\/a>, 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\u00a0serve dynamic content and host microservices<\/a>\u00a0on your sites. All content is served over an SSL connection from the closest edge server on our global CDN.<\/p>\n

Firebase Hosting has lightweight\u00a0hosting configuration options<\/a>\u00a0for you to build sophisticated PWAs. You can easily rewrite URLs for client-side routing, set up custom headers, and even serve localized content.<\/p>\n

 <\/p>\n

What is Firebase Hosting?<\/strong><\/span><\/h2>\n

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.<\/p>\n

 <\/p>\n

What can you host?<\/strong><\/span><\/h2>\n

Build then host your microservices, API, and forms<\/strong><\/span><\/h3>\n

Pair Firebase Hosting with\u00a0Cloud Functions<\/a>\u00a0to 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\u00a0Cloud Firestore<\/a>\u00a0to build very powerful forms and web apps which can update data in real time.<\/p>\n

 <\/p>\n

Host your single-page web apps, marketing websites, and static and dynamic assets<\/strong><\/span><\/h3>\n

Advantage from Firebase Hosting’s unique optimization for serving single-page web apps and static websites. Delivery of static assets (HTML, CSS, JavaScript, fonts, etc.) is powered by our SSD backend storage and a global CDN with edge locations across all major locations in the world. You can even cache your dynamic content<\/a>\u00a0on the global CDN. All sites hosted by Firebase also get a free SSL certificate, so your content is always delivered securely.<\/p>\n

 <\/p>\n

\n

Must Read: How does Firebase Dynamic Links Work for Android?<\/a><\/h2>\n
\n

 <\/p>\n

Add a custom domain (or a subdomain)<\/strong><\/span><\/h3>\n

With Firebase Hosting, you’re automatically given a Firebase sub-domain, but you can choose to serve your content on a\u00a0custom domain<\/a>\u00a0(like\u00a0example.com\u00a0or\u00a0myrealtimeapp.example.com). Firebase Hosting provisions an SSL certificate for each of your domains and serves your content over a global CDN.<\/p>\n

 <\/p>\n

Keep all your sites in one place<\/strong><\/span><\/h3>\n

Firebase Hosting supports\u00a0multiple sites in a single Firebase project<\/a>. 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. <\/strong>You can use multiple sites in a Firebase project to keep related sites together (for example your single-page app, blog, and marketing website).<\/p>\n

 <\/p>\n

View, search, and filter your site’s web request logs<\/strong><\/span><\/h3>\n

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.<\/strong><\/p>\n

 <\/p>\n

Here are some things you do with Cloud Logging logs:<\/span><\/h3>\n

Better understand your site<\/strong><\/span>\u00a0– Learn from where and when you have visits to your site, your site’s response statuses, the latency of end user requests, and more.<\/p>\n

Filter your logs with queries<\/strong>\u00a0<\/span>– Leverage automatically collected data to filter and plot data associated with each request or your site.<\/p>\n

Use logs-based metrics<\/strong><\/span>\u00a0– Create Cloud Monitoring charts and alerting policies from predefined system metrics or user-defined metrics.<\/p>\n

Export logs to other Google Cloud tools<\/strong><\/span>\u00a0– Use logs data in other tools (like BigQuery and Data Studio) for more powerful analysis and correlation.<\/p>\n

 <\/p>\n

Automate continuous deployment with Cloud Build<\/strong><\/span><\/h3>\n

Firebase Hosting partnered with\u00a0Cloud Build<\/a>\u00a0offers a DevOps-ready solution for automating a continuous deployment workflow for your static and dynamic content as well as for your microservices.<\/p>\n

After you configure these tools, you can deploy your web app to Firebase Hosting by simply checking in your code to your git repository.<\/p>\n

Customize everything!<\/strong><\/em><\/span><\/p>\n

Error pages<\/strong><\/a>\u00a0<\/strong>– Return a neatly fully customized 404 page from your web app.<\/p>\n

Rewrites<\/strong><\/a>\u00a0<\/strong>– Customize which endpoints serve what traffic, and even display the same content from multiple URLs.<\/p>\n

Localized content<\/strong><\/a>\u00a0– Serve content that’s customized for a user’s language preference and\/or country.<\/p>\n

Headers<\/strong><\/a>\u00a0<\/strong>– Want to access cookies? Use custom headers!<\/p>\n

Caching and CDN behaviour<\/strong><\/a>\u00a0<\/strong>– Control how your web app is cached across the CDN through custom headers.<\/p>\n

 <\/p>\n

Restrict access and counter a DDoS attack for your web apps<\/strong><\/span><\/p>\n

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.<\/p>\n

 <\/p>\n

Deploy to Firebase from various web-based IDEs<\/strong><\/span><\/p>\n

Firebase Hosting is integrated with various web-based IDEs so that you can deploy to Firebase Hosting directly from within\u00a0StackBlitz<\/a>\u00a0and\u00a0Glitch<\/a>, 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!<\/p>\n

 <\/p>\n

Build deep integrations with other Firebase services<\/strong><\/span><\/p>\n

Firebase Hosting works out-of-the-box with Firebase services, including\u00a0Cloud Functions<\/a>,\u00a0Authentication<\/a>,\u00a0Realtime Database<\/a>,\u00a0Cloud Firestore<\/a>, and\u00a0Cloud Messaging<\/a>. You can build powerful microservices and web apps using these complementary Firebase services.<\/p>\n

Firebase Hosting gives you a fast, secure, and reliable way to host your app’s static assets (HTML, CSS, JavaScript, media files, etc.) as well as to\u00a0serve dynamic content and host microservices<\/a>.<\/p>\n

 <\/p>\n

\n

Also Read: Top 6 Libraries That Makes Life Easy for Android & IOS Developers<\/a><\/h2>\n
\n

 <\/p>\n

Get started with Firebase Hosting<\/strong><\/span><\/h2>\n

Firebase Hosting gives you a fast, secure, and reliable way to host your app’s static assets (HTML, CSS, JavaScript, media files, etc.) as well as to\u00a0serve dynamic content and host microservices<\/a>.<\/p>\n

It\u2019s 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\u00a0custom domain<\/a>\u00a0or on your project’s free subdomains on\u00a0web.app\u00a0and\u00a0firebaseapp.com.<\/p>\n

 <\/p>\n

Before you begin<\/strong><\/p>\n

Create react project: npx create-react-app firebase-hosting-demo<\/u><\/span><\/p>\n

Install Firebase Tools<\/strong><\/p>\n

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:<\/p>\n

npm install firebase-tools -g<\/u><\/span><\/p>\n

 <\/p>\n

Login to Firebase<\/strong><\/span><\/h3>\n

Step 1: Creating firebase project<\/strong><\/span><\/p>\n

Go to\u00a0firebase<\/a>\u00a0console and sign in with your Google account<\/p>\n

\"Creating<\/p>\n

then create new project, enter your project name.<\/p>\n

\"Create<\/p>\n

 <\/p>\n

Step 2: Firebase Login<\/strong><\/span><\/h3>\n

Now come back to the command line and go to your project folder<\/p>\n

cd firebase-demo<\/u><\/span><\/p>\n

First, we have to login into firebase from the command line. Type in the following command.<\/p>\n

firebase login<\/u><\/span><\/p>\n

It will take you to the sign-in page in the browser, once you\u2019ve successfully logged in it will show you something like this.<\/p>\n

\"Firebase<\/p>\n

on browser<\/p>\n

\"command<\/p>\n

on command line<\/p>\n

 <\/p>\n

Step 3: Initializing project<\/strong><\/span><\/h3>\n

To initialize firebase project, you have to enter the command<\/p>\n

firebase init<\/u><\/span><\/p>\n

You will then be prompted with a series of questions and configuration options that I will walk through with you<\/p>\n

Select\u00a0Hosting: Configure and deploy Firebase Hosting sites.<\/strong><\/span><\/p>\n

\"Configure<\/p>\n

Then it will ask you to select firebase project,<\/p>\n

Select\u00a0Use an existing project<\/strong><\/span>, which we created in\u00a0step 1<\/p>\n

\"Use<\/p>\n

 <\/p>\n

Then it will ask you enter the main folder in which all your website assets are present.<\/p>\n

\"enter<\/p>\n

You will now need to specify the folder where Firebase will look for assets to deploy. By default, Create React App will generate a\u00a0build\u00a0folder that will contain the production assets. Unless you changed the default configuration, you\u2019ll want to enter\u00a0build<\/u>\u00a0for this option.<\/p>\n

You will also be asked whether or not Firebase should configure as a single-page app. You\u2019ll want to enter\u00a0Y<\/u>\u00a0(Yes) for this option.<\/p>\n

The last option is whether or not Firebase should overwrite your existing\u00a0build\/index.html. If you haven\u2019t created a build for your app yet, then you won\u2019t see this option. You\u2019ll want to enter\u00a0N<\/u>\u00a0(No) for this option, though.<\/p>\n

 <\/p>\n

Auto-Generated Configuration Files<\/strong><\/span><\/h3>\n

After you have completed the initialization, you should see 2 new files.\u00a0firebaserc,\u00a0firebase.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\u00a0.firebase<\/u>\u00a0directory for now. The\u00a0.firebaserc<\/u>\u00a0should look similar to the following:<\/p>\n\n\n\n\n\n\n\n
{<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\u00a0 “projects”: {<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0 “default”: “firebase-hosting-demo”<\/td>\n<\/tr>\n
<\/td>\n\u00a0 }<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The\u00a0firebase.json\u00a0file<\/span> should look exactly like the following:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
{<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\u00a0 “hosting”: {<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0 “public”: “build”,<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0 “ignore”: [<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0 “firebase.json”,<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0 “**\/.*”,<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0 “**\/node_modules\/**”<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0 ],<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0 “rewrites”: [<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0 {<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 “source”: “**”,<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 “destination”: “\/index.html”<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/td>\n<\/tr>\n
<\/td>\n\u00a0\u00a0\u00a0 ]<\/td>\n<\/tr>\n
<\/td>\n\u00a0 }<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/h3>\n

Deploying Your App<\/strong><\/span><\/h3>\n

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<\/u><\/span><\/p>\n

\"firebase<\/p>\n

Congratulations!<\/em> your website is now live; you can check by going to URL which is provided as Hosting URL<\/u><\/span> in the command line.<\/p>\n

Want to Take your business to the next level! GET IN TOUCH<\/a>
\n<\/span><\/em><\/strong><\/span><\/p>\n

At Rlogical Techsoft Pvt Ltd, hire ReactJS developers<\/strong> <\/a>for this technology that sets apart your business as well as delivering the most complex and best ReactJS Development Services<\/strong>.<\/span><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction of Firebase Hosting 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 […]<\/p>\n","protected":false},"author":4,"featured_media":13674,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[38],"tags":[84,85,83,312,311],"class_list":["post-7140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app-development","tag-android","tag-android-app-development","tag-firebase","tag-firebase-hosting","tag-react-js"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts\/7140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/comments?post=7140"}],"version-history":[{"count":2,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts\/7140\/revisions"}],"predecessor-version":[{"id":13686,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts\/7140\/revisions\/13686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/media\/13674"}],"wp:attachment":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/media?parent=7140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/categories?post=7140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/tags?post=7140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}