This post was originally published on webinuse.com

I’ve been a web developer for quite some time. More than a decade (I am getting old, I know 😅). So far, my projects were usually predefined in terms of the stack. I worked a lot for the government and you know those guys. They, usually, use mature stuff. The stuff that has been long on the market.

For example, I’ve built CMS for Federal Journalist Association, but they explicitly wanted it with PHP, MySQL, HTML, CSS, and Vanilla JS. I’ve tried to tell them that there are more exciting things, but they were stubborn.

Up until this point, my experience with Google Cloud (Firebase) was minimal. I used Firestore for some small stuff, and I used auth for a few projects, but nothing serious.

Lately, my company got a project for banking software. They’ll use it for better track of pre-loan documents (this is obviously not the full story, but there is this little thing called NDA 😁). We’ve talked about the stack and we decided that it will be React, NodeJS, along with GC products.

Since I had experience with MERN, I was not worried. I decided to dive into GCP. A little disclaimer: I have zero experience with other cloud providers like AWS and Azure. So some of my views may be biased a bit. Also, since I developed this using NodeJS and ReactJS I will stick to these two technologies, and I’ll I’m going to say is from this POV.

Starting out

Starting with GCP is super easy. All you have to do is head over to Firebase Console and create a project. After you do that you have a few options to choose from.

This is where I encountered my first problem. I had no idea that you can use Firebase SDK and Firebase Admin SDK. The first one is for front-end tech, like ReactJS. The latter one is for back-end tech, like NodeJS.

Front-end

If you decide to use Firebase just on front-end which is awesome for building serverless apps all you have to do is go to your project’s root and run

npm install firebase

After that, you open your .env file and save all the required keys. Don’t forget to add REACT_APP_ before your variable names.

Here is an example of the keys:

    REACT_APP_API_KEY="AIzaSEsfdoiweRfsadljffaiower234ER",
    REACT_APP_AUTH_DOMAIN="your-app.firebaseapp.com",
    REACT_APP_PROJECT_ID="your-project-id",
    REACT_APP_STORAGE_BUCKET="your-app.appspot.com",
    REACT_APP_MESSAGING_SENDER_ID="1234567",
    REACT_APP_APP_ID="1:23432:web:234423ab234243cd21323"

You’ll get all those keys as soon as you create your project. But don’t worry you can find them later under Project Settings.

I would also recommend installing React Firebase Hooks from NPM. A library that makes it 100x easier to use Firebase with React.

Back-end

Using Firebase on the back end is almost the same. The only difference is that you install Firebase with:

npm install firebase-admin

It does have some slightly different API and you should really take care of that, otherwise, you would end up like me solving bugs for hours only to realize that you used the wrong API.

One piece of advice is when searching Google for solutions always use %QUERY% firebase admin. This way, you will mostly end up with the right solutions.

Other things

Obviously, the easiest way to start with either of those is to open Firebase YouTube Channel and take a look at some intro videos. After that, you should just read the docs. Most of the problems that you’ll face can be solved by simply reading documentation. At least in the beginning. For everything else there is StackOverflow 🤣.

Now, let’s take a look at some of the benefits of GCP and why should you use it.

Authentication

One of the main reasons I wanted to use GCP is authentication. It’s really simple and easy to use. You set up the type of auth you want to use, in the console, and then with just a few simple lines of code, you have authentication.

As I’ve mentioned earlier you get a lot of help from React Firebase Hooks. There are also some great tutorials online with ready-to-use code snippets.

You can log in, log out, register, authenticate, and delete users from the front end. You can also set up additional authentication, if needed, via the back end. It’s really easy because Google uses JWT and it has all APIs for your to use, out of the box.

Database

There are two types of databases that you can use (there are more but these two are more than enough for most projects).

Realtime database and Firestore database. To learn more about the Realtime database you can visit this link. If you also want to learn more about Firestore, you can do so here.

Both of them are very easy to use. If you ever used MongoDB with Mongoose, that’s almost it. Even easier in my humble opinion.

You can use DB either with ReactJS, to create serverless applications, or with NodeJS for more robust and customized solutions.

Storage

Another great thing about GCP is storage. Upload is simply 🤯. All you have to do is provide a path to your file and that’s it. Everything else is done by Google. How cool is that?

You can upload, delete, modify, basically do anything with those files just providing your Storage path.

I really like that part.

Hosting

Now, there are two different types of hosting with Google. I am saying this primarily for those who are coming from old-school languages like PHP.

Before we used to have some hosting, usually with cPanel or Plesk and we would put all our code there.

Now you use hosting to host your front-end stuff. It’s quite easy to use.

All you have to do is install Firebase CLI. After that, you log in to your desired account and initialize hosting with firebase init hosting then just a few little steps and that’s it.

If you want to run your code locally, instead of npm start (for React) you can use firebase serve --only hosting.

IMHO, this is better because you immediately can fix some bugs, before pushing to your server. Once you are ready to push just type in your console firebase deploy –only hosting and in a couple of seconds you should see your code up and running.

Functions

Functions are also hosting, but for your back-end. It works in the same way as your front end hosting except for one small detail.

The first thing is to install Firebase CLI, if you haven’t already, then you just type npm install -g firebase-tools in the folder where your project is.

In order for your code to work on Cloud Functions you have to wrap your app in a functions wrapper. I had a bit of a problem with this, but this video really saved my day.

Summary

There are many other things you can do with Firebase and GCP, but IMHO this is all one beginner needs to know to build a fully functional app.

After this, you can dive into different databases, computing engines, etc.

I am really hooked up to GCP and I think I will hardly ever decide to change it. I know that a lot of people are saying that AWS is better, and cheaper, but I don’t care. I like GCP and it fully suits my coding style.

If you have any questions you can write them in the comments or you can reach me on Twitter.