A Fast deploying Realtime Firebase + React-based blog

#react #firebase #webdev #javascript

The Problem

TLDR;

Hey guys,

Being a full-stack developer is a tedious task, won't you agree?

For every web-app I make, I have got to manage the frontend as well as the backend.

I mean come on, this much work? The mobile app guys don't have to deal with two different
projects at a time,

let alone two different technologies. Lucky folks.

But what do they say, with great power comes great responsibility. Many times we are just confused even on things like what tech stack to use.

I was also tangled in questions like this when I started my search for a more efficient and sustainable development method.

That's when I was reminded of Firebase by Sonu Sharma, of course, why did I not think of it.

I went through the documentation and learned the basics, got my hands on a few practice projects before I got confident about it.

So here I am with a solution to all of our problems, Over the last few weeks, I have been investing quite a few hours in it.

The Solution

Comes in the TFM-BLOG,

It removes the overhead of server handling and APIs from you.
Configuring it is pretty easy and straight forward too.

Almost no programming experience is required. Everything is handled by the developers already. Just plug and play.

TFM-BLOG aims to be a simple, minimalistic, yet powerful blogging platform.

Estimated deployment time - 10 Minutes

Features

Firebase Authentication.
Serverless.
Markdown based.
Firestore for database.
Cloudinary for CDN (Optional).
Realtime updates.
Minimal sleek UI.

The Steps

Visit The Github repo to use the template.
Customize your repository
Clone the newly created repo to your local machine
Run npm install on the newly created directory to install the npm dependencies. (This step needs npm installed on your system, please refer to this link)
look for a file .env.sample in the created directory and make two duplicates of it namely, .env.development and .env.production.
Now head on to the firebase console, (hope you are signed in) and create a new project.
Insert the project name, and click on continue, click continue new on the following screen as well.
Select analytics account if opted for google analytics on the previous screen and click continue.
It will take a few seconds to set up all the things necessary, click on Continue when ready.
Once you are at firebase dashboard of the newly created project, click on authentication tab in sidebar (can change with newer firebase UI updates) and then click on Set up sign-in methods
On the next screen, click on pencil icon next to the Email, and then click on save after enabling the relative checkboxes.
Switch to the Users tab, click on add, fill in the credentials and click on add user to save the user.
Make a note of the new user's uid as we will need it to fetch the list of blog posts by us.
Now time to get the configuration to connect firebase to our blog, click on the cog icon in the sidebar and head on to settings
Click on the code icon (its the icon for web-app) and it will redirect you to a page where you will add a new web app to firebase.
Fill in the form, add a nickname, check the also set up firebase hosting (this is crucial), click on register app, click on next, we don't need the scripts right now, also click next until the setup is complete.

I will guide you through the remaining steps, so you don't have to worry about missing anything.
Now this step includes integrating firebase in the that we created previously back in step 3. Go to the repo directory, open up bash or cmd and run the following command, it installs firebase-tools globally, so you don't have to run it next time you are creating an app following this tutorial -
```
    npm install -g firebase-tools
```
Once done, run the following and follow steps to log in to firebase, most probably it would be web-based authentication -
```
    firebase login
```
After the login is successful, run the following command -
```
    firebase init
```
Type y when asked to confirm
When asked Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
use up/down arrow to navigate, space to select Hosting
On the next prompt select 'Use an existing project', it will then prompt you with all the available project, select your desired (in our case it is 'my-awesome-tfm-blog (my-awesome-tfm-blog)')
Now it will prompt what directory to use as public, it is the build directory of your react app by default, so input build and press enter.
Now it asks whether our app is SPA, which it most definitely is, so press 'y' and followed by enter.
Firebase is now initialized in our project. Time to configure the APP_KEYS and other credentials.
Remember we made two files '.env.development' and '.env.development' in step 5? The development file is used in the development environment and production in production as the name suggests, we will now populate data in these files, mostly you will use the same credentials in both.
Head over to console once again you will still be on the settings page, if not, click on cog icon in the sidebar and then go to project settings.
Scroll down to the bottom, your app will now be listed there.
Under the section 'Firebase SDK snippet', click on the radio that says config and you will snippet of JS code -
Switch back to local and open .env.development in any text editor, what you will see is an env file with various variables that have blank value prepended with 'REACT_APP'
Fill all the values from the firebase console to relevant variable in the env file, the string can be surrounded in double-quotes, also do not add a comma at the end.
After filling most of the values you might notice that REACT_APP_NAME and REACT_APP_DEFAULT_USER_ID are two value you cannot find relevant data for,

Let's fill them up too...

REACT_APP_NAME will take the value that you want to be displayed on the navbar of your blog.

REACT_APP_DEFAULT_USER_ID will take the uid value of the user that we created in step 3, to get the uid, go to the console, select authentication and then users tab, from there just copy the uid and insert it in the app. Make sure your both env files look like this -
Time to build and deploy the app. Run the following command on the terminal to build the project
```
    npm run build --prod
```
Run the following command to deploy the project
```
    firebase deploy
```
Both of these commands will result in the following output, stating that the deployment is successful! Cheers!
Before heading over to the URL provided as the output of the last step, for me it is https://my-awesome-tfm-blog.firebaseapp.com, let us complete the last task.
Let us set up the realtime database 'firestore' provided by firebase. Head to the console, select 'database' from the sidebar and click on create database button.
It will prompt you to set up, rules, for the sake of simplicity, let us choose test mode, for now, we will learn more about rules in another tutorial.
On the next screen select any of the locations you prefer and finish the setup. Firestore is now configured.
Now we can head over to the URL that we got in step 33 after deploying the app. For me, it was https://my-awesome-tfm-blog.firebaseapp.com, we can see the deployed app now, but it feels empty.
To know how to create a blog post and about other features of the blog head over to TFM-BLOG Getting Started