{"id":187,"date":"2020-08-15T08:38:57","date_gmt":"2020-08-15T14:08:57","guid":{"rendered":"https:\/\/www.qapaper.com\/blog\/?p=187"},"modified":"2021-09-16T14:21:15","modified_gmt":"2021-09-16T19:51:15","slug":"firebase-hosting-how-to-deploy-react-app-on-firebase","status":"publish","type":"post","link":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/","title":{"rendered":"Firebase Hosting | How to deploy react app on firebase"},"content":{"rendered":"\n<p>Firebase is Google\u2019s mobile application development platform that helps you build, improve, and grow your app in addition to that Firebase Hosting provides you to host your application on their server by only typing some commands. If you are interested in how to deploy react app to<mark> firebase <\/mark>you are at the right place, in this article, I am going to tell you to step by step process to free <mark>firebase<\/mark> hosting.<\/p>\n\n\n\n<p>Learn <a href=\"https:\/\/inclinedscorpio.com\/?p=2184\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"broken_link\">Top 5 Best Technologies and Skills To Learn in India (July 2020)<\/a><\/p>\n\n\n\n<h2>Let&#8217;s deploy react app on firebase<\/h2>\n\n\n\n<p>Let&#8217;s start firebase free hosting steps:<\/p>\n\n\n\n<ul><li>Login into firebase <a href=\"https:\/\/firebase.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><\/li><li>After that click on <em>Go to console<\/em> button situated at the top left corner <\/li><li>The page displayed will be like this<\/li><li>Click on add project<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting2-1024x576.png\" alt=\"\" class=\"wp-image-192\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting2-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting2-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting2-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting2.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-1 Firebase console<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting3-1024x576.png\" alt=\"Firebase free hosting\" class=\"wp-image-193\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting3-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting3-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting3-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting3.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-2<\/figcaption><\/figure>\n\n\n\n<ul><li>Give the project a good name <\/li><li>Check whether it is available or not<\/li><li>Click on save<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting4-1024x576.png\" alt=\"Firebase free hosting\" class=\"wp-image-194\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting4-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting4-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting4-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting4.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-3<\/figcaption><\/figure>\n\n\n\n<p>Click on create project<\/p>\n\n\n\n<p>Now your new project is added in firebase console now you need to follow some steps to install firebase CLI in your system<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting6-1024x576.png\" alt=\"Firebase free hosting\" class=\"wp-image-197\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting6-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting6-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting6-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting6.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-4<\/figcaption><\/figure>\n\n\n\n<p>The command is <strong><em>npm i -g firebase-tools<\/em><\/strong> remember you need <em><strong><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">NodeJs<\/a><\/strong><\/em> installed in your system in order to run this command<\/p>\n\n\n\n<p>Now go to your project root folder in vs code or any editor and open terminal in vs code the shortcut is<strong> ctrl + ~<\/strong>  after that run the command <strong><em>firebase init<\/em><\/strong>. It will allow firebase to initialize into your project root directory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting8-1024x576.png\" alt=\"Firebase free hosting\" class=\"wp-image-198\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting8-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting8-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting8-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting8.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-5 Hitting firebase init <\/figcaption><\/figure>\n\n\n\n<p>Now it will show you many options out of which you have to choose <em><strong>Hosting: Configure and deploy firebase hosting<\/strong><\/em> by using the spacebar and press enter then it will ask you to create a new firebase project or to use an existing one, select the existing one as we already added a project in firebase console <strong>see in Fig-3<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting9-1024x576.png\" alt=\"firebase web hosting\" class=\"wp-image-199\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting9-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting9-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting9-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting9.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-6<\/figcaption><\/figure>\n\n\n\n<p>Now select the project which we created latest in the firebase console<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting10-1024x576.png\" alt=\"firebase web hosting\" class=\"wp-image-200\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting10-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting10-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting10-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting10.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-7<\/figcaption><\/figure>\n\n\n\n<p>Now comes the tricky part, it will ask you in which folder your project exists default one is <em>public<\/em>. now type here <strong>build<\/strong>, but why build? because while building the react project, it creates a `<em>build<\/em>` directory with a production&nbsp;<em>build<\/em>&nbsp;of your app.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting11-1024x576.png\" alt=\"firebase web hosting\" class=\"wp-image-201\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting11-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting11-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting11-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting11.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-8<\/figcaption><\/figure>\n\n\n\n<p>Now it will ask you whether your app is a single page application or not as we are deploying react app which is indeed a single-page app so, we are going to type <strong>yes<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting13-1024x576.png\" alt=\"firebase web hosting\" class=\"wp-image-203\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting13-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting13-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting13-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting13.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-9<\/figcaption><\/figure>\n\n\n\n<p>As you can see in <em><strong>Fig-9 <\/strong><\/em>above a build folder is created. Now run command<strong> npm run build<\/strong> which will overwrite a `<em>build<\/em>` directory with a production&nbsp;<em>build<\/em>&nbsp;of your app. and then finally run <strong><em>firebase deploy<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting14-1024x576.png\" alt=\"how to deploy react app on firebase\" class=\"wp-image-204\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting14-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting14-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting14-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting14.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-10<\/figcaption><\/figure>\n\n\n\n<p>Hurray! our app has been deployed <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting15-1024x576.png\" alt=\"how to deploy react app on firebase\" class=\"wp-image-206\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting15-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting15-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting15-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting15.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Fig-11<\/figcaption><\/figure>\n\n\n\n<p>congratulation!  your app is deployed on the firebase hosting server with the link highlighted. Now run the URL in the browser or <em><strong>ctrl+click<\/strong><\/em> on the highlighted link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting16-1024x576.png\" alt=\"deploy react app to firebase\" class=\"wp-image-205\" srcset=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting16-1024x576.png 1024w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting16-300x169.png 300w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting16-768x432.png 768w, https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebaseHosting16.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2>Let&#8217;s deploy normal web application in firebase<\/h2>\n\n\n\n<ul><li>The procedure is same till <strong>Fig-7<\/strong><\/li><li>After Fig-7 when it asks the name for your public directory just type the name in which your all project files exist <\/li><li>Press enter then it will ask you whether to overwrite your existing index.html always type <strong>no<\/strong> here, as we have an index.html file in our project <\/li><li>In the next step run <strong><em>firebase deploy<\/em><\/strong><\/li><li>The message will display that your app is being deployed following the URL of your target firebase hosting.<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Firebase is Google\u2019s mobile application development platform that helps you build, improve, and grow your app in addition to that Firebase Hosting provides you to host your application on their server by only typing some commands. If you are interested in how to deploy react app to firebase you are at the right place, in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":208,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[81],"tags":[83,85,84],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Firebase Hosting | How to deploy react app on firebase - Science &amp; Tech<\/title>\n<meta name=\"description\" content=\"Firebase Hosting provides you to host your application on their server by only typing some commands. Go through this article to master in firebase hosting.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Firebase Hosting | How to deploy react app on firebase - Science &amp; Tech\" \/>\n<meta property=\"og:description\" content=\"Firebase Hosting provides you to host your application on their server by only typing some commands. Go through this article to master in firebase hosting.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"QAPAPER\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-15T14:08:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-16T19:51:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebase-and-react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/\"},\"author\":{\"name\":\"Admin\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/#\/schema\/person\/b85dfc53f91c7dfabe0cc1e0f6646f7d\"},\"headline\":\"Firebase Hosting | How to deploy react app on firebase\",\"datePublished\":\"2020-08-15T14:08:57+00:00\",\"dateModified\":\"2021-09-16T19:51:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/\"},\"wordCount\":571,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.qapaper.com\/blog\/#organization\"},\"keywords\":[\"deploy react app to firebase\",\"firebase hosting\",\"how to deploy react app on firebase\"],\"articleSection\":[\"Science &amp; Tech\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/\",\"url\":\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/\",\"name\":\"Firebase Hosting | How to deploy react app on firebase - Science &amp; Tech\",\"isPartOf\":{\"@id\":\"https:\/\/www.qapaper.com\/blog\/#website\"},\"datePublished\":\"2020-08-15T14:08:57+00:00\",\"dateModified\":\"2021-09-16T19:51:15+00:00\",\"description\":\"Firebase Hosting provides you to host your application on their server by only typing some commands. Go through this article to master in firebase hosting.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.qapaper.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Firebase Hosting | How to deploy react app on firebase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/#website\",\"url\":\"https:\/\/www.qapaper.com\/blog\/\",\"name\":\"QAPAPER\",\"description\":\"-Be Informative\",\"publisher\":{\"@id\":\"https:\/\/www.qapaper.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.qapaper.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/#organization\",\"name\":\"Qapaper\",\"url\":\"https:\/\/www.qapaper.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2019\/02\/logo7.png\",\"contentUrl\":\"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2019\/02\/logo7.png\",\"width\":512,\"height\":516,\"caption\":\"Qapaper\"},\"image\":{\"@id\":\"https:\/\/www.qapaper.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/#\/schema\/person\/b85dfc53f91c7dfabe0cc1e0f6646f7d\",\"name\":\"Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.qapaper.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0155b8098b7e828174cab345004a0fcf?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0155b8098b7e828174cab345004a0fcf?s=96&d=identicon&r=g\",\"caption\":\"Admin\"},\"description\":\"If you don't build your own dreams, someone will hire you to build theirs\",\"url\":\"https:\/\/www.qapaper.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Firebase Hosting | How to deploy react app on firebase - Science &amp; Tech","description":"Firebase Hosting provides you to host your application on their server by only typing some commands. Go through this article to master in firebase hosting.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/","og_locale":"en_US","og_type":"article","og_title":"Firebase Hosting | How to deploy react app on firebase - Science &amp; Tech","og_description":"Firebase Hosting provides you to host your application on their server by only typing some commands. Go through this article to master in firebase hosting.","og_url":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/","og_site_name":"QAPAPER","article_published_time":"2020-08-15T14:08:57+00:00","article_modified_time":"2021-09-16T19:51:15+00:00","og_image":[{"width":800,"height":426,"url":"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2020\/08\/firebase-and-react.png","type":"image\/png"}],"author":"Admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#article","isPartOf":{"@id":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/"},"author":{"name":"Admin","@id":"https:\/\/www.qapaper.com\/blog\/#\/schema\/person\/b85dfc53f91c7dfabe0cc1e0f6646f7d"},"headline":"Firebase Hosting | How to deploy react app on firebase","datePublished":"2020-08-15T14:08:57+00:00","dateModified":"2021-09-16T19:51:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/"},"wordCount":571,"commentCount":0,"publisher":{"@id":"https:\/\/www.qapaper.com\/blog\/#organization"},"keywords":["deploy react app to firebase","firebase hosting","how to deploy react app on firebase"],"articleSection":["Science &amp; Tech"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/","url":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/","name":"Firebase Hosting | How to deploy react app on firebase - Science &amp; Tech","isPartOf":{"@id":"https:\/\/www.qapaper.com\/blog\/#website"},"datePublished":"2020-08-15T14:08:57+00:00","dateModified":"2021-09-16T19:51:15+00:00","description":"Firebase Hosting provides you to host your application on their server by only typing some commands. Go through this article to master in firebase hosting.","breadcrumb":{"@id":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.qapaper.com\/blog\/firebase-hosting-how-to-deploy-react-app-on-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.qapaper.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Firebase Hosting | How to deploy react app on firebase"}]},{"@type":"WebSite","@id":"https:\/\/www.qapaper.com\/blog\/#website","url":"https:\/\/www.qapaper.com\/blog\/","name":"QAPAPER","description":"-Be Informative","publisher":{"@id":"https:\/\/www.qapaper.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.qapaper.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.qapaper.com\/blog\/#organization","name":"Qapaper","url":"https:\/\/www.qapaper.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.qapaper.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2019\/02\/logo7.png","contentUrl":"https:\/\/www.qapaper.com\/blog\/wp-content\/uploads\/2019\/02\/logo7.png","width":512,"height":516,"caption":"Qapaper"},"image":{"@id":"https:\/\/www.qapaper.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.qapaper.com\/blog\/#\/schema\/person\/b85dfc53f91c7dfabe0cc1e0f6646f7d","name":"Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.qapaper.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0155b8098b7e828174cab345004a0fcf?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0155b8098b7e828174cab345004a0fcf?s=96&d=identicon&r=g","caption":"Admin"},"description":"If you don't build your own dreams, someone will hire you to build theirs","url":"https:\/\/www.qapaper.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/posts\/187"}],"collection":[{"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":6,"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/posts\/187\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/posts\/187\/revisions\/328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/media\/208"}],"wp:attachment":[{"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/media?parent=187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/categories?post=187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qapaper.com\/blog\/wp-json\/wp\/v2\/tags?post=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}