FIREBASE & REACT: Setting Up React APP with Firebase
Tags: react, firebase, serverless, authentication
Published: 2022-02-24 17:48:59

<p>In this article, we will learn how to create a new Reactjs app and integrate Firebase in our React application.</p>
<h1 id="1-what-is-firebase">1. What is Firebase</h1>
<blockquote>
<p>Firebase is Google’s mobile application development platform that helps you build, improve, and grow your app.</p>
</blockquote>
<p>Firebase is a toolset to “build, improve, and grow your app”, and the tools it gives you cover a large portion of the services that developers would normally have to build themselves, but don’t really want to build, because they’d rather be focusing on the app experience itself. This includes things like analytics, authentication, databases, configuration, file storage, push messaging, and the list goes on. The services are hosted in the cloud and scale with little to no effort on the part of the developer.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1632393207997/g8sRSLz_U.png" alt="image.png" /></p>
<p>now that we have a little gist of Firebase let's set up our application now.</p>
<h1 id="2-setting-up-react-application">2. Setting Up React application.</h1>
<p>In this tutorial, we will be using Create-react-app. If you are new to React, here is an article about how to set up the React Application in your local.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://blog.theashishmaurya.me/setting-up-react-app-and-writing-your-first-hello-world">https://blog.theashishmaurya.me/setting-up-react-app-and-writing-your-first-hello-world</a></div>
<p>once you have followed the above article for setting up the React-App we will now move to our next part where we set up the Firebase for our application.</p>
<h1 id="3-setting-up-the-firebase-for-web-application">3. Setting up the firebase for Web Application</h1>
<p>Once the above process is done now let's set up the Firebase for our App.</p>
<ul>
<li>Go to <a target="_blank" href="https://firebase.google.com">Firebase.google.com</a></li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1632392584335/0Rfvd4i2z.png" alt="image.png" /></p>
<p>Click on get started and add a project to it.</p>
<ul>
<li>Once done give it any name and then just create the project. Once the project is created you will be getting something like the below.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1632394156447/oQ_FD2a7w.png" alt="image.png" /></p>
<p>Click on the <code>&lt;/&gt;</code> icon that will initiate a web app in the firebase.</p>
<ul>
<li>Name whatever name you wanna give to your web app once done, Save it.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1632394458972/esCH4y8CCT.png" alt="image.png" /></p>
<ul>
<li>After that, you will be given your config keys for the web app make sure to not expose the keys. </li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1632394765339/0vauZI4vV.png" alt="image.png" /></p>
<p>once done you are done with the firebase console setting let's install the firebase package in our local.</p>
<h1 id="4-setting-up-firebase-with-react-application">4. Setting up Firebase with React Application.</h1>
<p>Now we are done with the firebase side now all we need to set up everything in our local Application.</p>
<ul>
<li>Open the terminal and install the firebase package.</li>
</ul>
<pre><code><span class="hljs-built_in">npm</span> install firebase
</code></pre><ul>
<li>Once Installed,open the React app folder and add a new file `.env.local to it.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1632395178384/w-m8caPrg.png" alt="image.png" /></p>
<ul>
<li>Now we will configure the <code>.env.local</code> file, where we put all our environment variables.</li>
</ul>
<pre><code><span class="hljs-attr">REACT_APP_FIREBASE_API_KEY</span> = <span class="hljs-string">"YOUR-UNIQUE-CREDENTIALS"</span>
<span class="hljs-attr">REACT_APP_FIREBASE_AUTH_DOMAIN</span> = <span class="hljs-string">"YOUR-PROJECT-NAME.firebaseapp.com"</span>
<span class="hljs-attr">REACT_APP_FIREBASE_PROJECT_ID</span> = <span class="hljs-string">"YOUR-PROJECT-FIREBASE-PROJECT-ID"</span>
<span class="hljs-attr">REACT_APP_FIREBASE_STORAGE_BUCKET</span> = <span class="hljs-string">"YOUR-PROJECT-NAME.appspot.com"</span>
<span class="hljs-attr">REACT_APP_FIREBASE_MESSAGING_SENDER_ID</span> = <span class="hljs-string">"YOUR-PROJECT-SENDER-ID"</span>
<span class="hljs-attr">REACT_APP_FIREBASE_APP_ID</span> = <span class="hljs-string">"YOUR-PROJECT-APP-ID"</span>
<span class="hljs-attr">REACT_APP_MEASUREMENT_ID</span> = <span class="hljs-string">"YOUR-MEASUREMENT-ID"</span>
</code></pre><p>Save the file and restart the server. </p>
<ul>
<li>After saving the <code>.evn.local</code> file we need to initiate the firebase in our application
for that, we will create a new folder name <code>firebase</code> and then also create a new file and name it <code>firebase.js</code></li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1632395913535/AmEgQwpBK.png" alt="image.png" /></p>
<ul>
<li>Once done copy the following code inside the file.</li>
</ul>
<pre><code><span class="hljs-keyword">import</span> { initializeApp } <span class="hljs-keyword">from</span> <span class="hljs-string">"firebase/app"</span>;


<span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> Add SDKs for Firebase products that you want to use</span>
<span class="hljs-comment">// https://firebase.google.com/docs/web/setup#available-libraries</span>

<span class="hljs-comment">// Your web app's Firebase configuration</span>
<span class="hljs-comment">// For Firebase JS SDK v7.20.0 and later, measurementId is optional</span>
<span class="hljs-keyword">const</span> clientCredentials = {
  <span class="hljs-attr">apiKey</span>: process.env.REACT_APP_FIREBASE_API_KEY,
  <span class="hljs-attr">authDomain</span>: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  <span class="hljs-attr">projectId</span>: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  <span class="hljs-attr">storageBucket</span>: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  <span class="hljs-attr">messagingSenderId</span>: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  <span class="hljs-attr">appId</span>: process.env.REACT_APP_FIREBASE_APP_ID,
  <span class="hljs-attr">measurementId</span>: process.env.REACT_APP_MEASUREMENT_ID,
};

<span class="hljs-comment">// Initialize Firebase</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> app = initializeApp(clientCredentials);

<span class="hljs-comment">//</span>
</code></pre><ul>
<li>Now you are all set, firebase has been initiated in your app now you can use different firebase services in your app.</li>
</ul>
<p>All you need is to import them from firebase.</p>
<h1 id="summary">Summary</h1>
<p>we learned to create a new React application using create-react-app and also how to initiate firebase in our React application. We also learned how not to expose the firebase environment keys by using <code>.evn</code> files.</p>
<p>In the next article, we will learn about creating an Authentication application using firebase auth and react's popular framework NEXTJS.</p>
<p>If you liked my work considering the following and liking this article, it keeps me motivated and in case you want to connect to me feel free to email me at ashish.1999vns@gmail.com or connecting me on Twitter.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://twitter.com/theysaymaurya/status/1438924150588915716?s=20">https://twitter.com/theysaymaurya/status/1438924150588915716?s=20</a></div>
<p>also if you wanna support me please consider buying me coffee.</p>
</br><p style="color:#808080;">This blog is posted using <a target="_blank" href="https://blogtiple.com">Blogtiple</a></p>