{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/deploying-react-app-to-firebase/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"86b697c0-5c6d-5354-a352-a0f6e7e611c0","excerpt":"In this tutorial iam gonna explain you how you can deploy you react application to firebase Step 1: Create a Firebase Project Go to https://firebase.google.com…","html":"<p>In this tutorial iam gonna explain you how you can deploy you react application to firebase</p>\n<h4>Step 1: Create a Firebase Project</h4>\n<ul>\n<li>\n<p>Go to <a href=\"https://firebase.google.com\">https://firebase.google.com</a> and click on Get Started</p>\n</li>\n<li>\n<p>Proceed to click on Create a project.</p>\n</li>\n<li>\n<p>Enter a project name and check yes if you wish to add analytics to your project.</p>\n</li>\n<li>\n<p>Wait for the project to be created.</p>\n</li>\n</ul>\n<h4>Step 2: Create react app or move to next step if you have already created one</h4>\n<pre><code class=\"language-js\">npx create-react-app firebase-app\n</code></pre>\n<h4>Step 3: Deploying to firebase</h4>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React-application-to-firebase-1.png\" alt=\"hosting-firebase\"></p>\n<ul>\n<li>\n<p><strong><em>Run below command this will install firebase tool globally</em></strong></p>\n<pre><code class=\"language-js\">npm install -g firebase-tools\n</code></pre>\n</li>\n<li>\n<p><strong><em>Once firebase tool installed, Go to your react project folder path and run below command</em></strong></p>\n<pre><code class=\"language-js\">//this is the command to authenticate firebase cli with firebase you can skip if you have already authenticated\nfirebase login\n\nfirebase init\n</code></pre>\n</li>\n<li>\n<p><strong><em>After running above command you will see some options to select select the option as described below in screen shot</em></strong></p>\n</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React-application-to-firebase-2.png\" alt=\"firebase-deploy\"></p>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React-application-to-firebase-3.png\" alt=\"firebase-deploy1\"></p>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React-application-to-firebase-4.png\" alt=\"firebase-deploy2\"></p>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React-application-to-firebase-5.png\" alt=\"firebase-deploy3\"></p>\n<ul>\n<li><strong><em>Once above step completed run command</em></strong></li>\n</ul>\n<pre><code class=\"language-js\">npm run build\n</code></pre>\n<pre><code class=\"language-js\">firebase deploy\n</code></pre>","fields":{"slug":"/deploying-react-app-to-firebase/"},"frontmatter":{"title":"Deploying react application to firebase","date":"June 30, 2022","description":"In this article i will explain you how you can deploy your react application to firebase","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/react-to-firebase.jpeg"}},"previous":{"fields":{"slug":"/deploying-nextjs-app-on-vercel/"},"frontmatter":{"title":"Deploying Next JS App on vercel","date":"June 15, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/nextjs-and-vercel.jpeg"}},"next":{"fields":{"slug":"/different-types-in-typescript-and-how-to use-it/"},"frontmatter":{"title":"Different Typescript types and how to use it","date":"July 10, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/typescript-types-and-usage.jpeg"}}},"pageContext":{"id":"86b697c0-5c6d-5354-a352-a0f6e7e611c0","previousPostId":"471c9b58-1a68-52ce-aa8c-171a232aef92","nextPostId":"3208aec9-c67c-5dd5-9859-9ec75308591f"}},
    "staticQueryHashes": ["3860684146"]}