Photo by Brooke Lark on Unsplash

Let’s Create a Firebase Project. Environment Setup — [3/9] E-commerce Development Series

Throughout my tutorial series, you will learn how to make an e-commerce application from scratch with Next.js SSR (Server-Side Rendering), Stripe API, and Firebase. Let’s start your project, code, test, and deploy.

This article is a series of E-commerce Development. If you are only interested in the payment integration, please go to this link and there choose a step that you want to jump to.

This article aims to help you create a development environment in Firebase. For this tutorial, there are three services of Firebase that we will use; Firestore, Hosting, and Cloud Fucntions.

○ Firestore is a database that stores data that can be written and read.
Hosting is a fully-managed hosting service for static and dynamic content.
○ Cloud Functions is a serverless execution environment for building and connecting cloud services.

In the previous article, Set up a Project with Next.js, you now have your own Next.js project. First, we will create a new project and set it up using those services.

Create New Project

First, go to Firebase Console and select an item to create a new project. You can name your Firebase project in your preferred way. I named it the same as the Next.js project — “e-commerce-app”. It is going to be your project ID, which cannot be modified after you create your project.

If your project name is already taken, Firebase will automatically create a unique project id. Here, in the image below, you will see your project name with random prefix text added at the end. That’s your project ID.

And importantly, unless you set it to a custom domain that you own, your default website URL is automatically prepared for you. For example, in my case, it is https://e-commerce-app-6b41a.web.app where my website lives.

And then, in the next step, you will be given a choice whether you add Google Analytics or not. For this tutorial, the explanation is not covered but if you want to try, you can enable it.

Great, your Firebase project is now ready! Let’s move on.

Connect Firebase with Website

Now you have a new Firebase project for your Next.js website, but in order to use Firebase from your website, your website needs to be connected to the Firebase project. We will learn how to do it in this section.

First, open the overview page. Then, find a gear icon at being top in the left section.

Click to select “Project settings”.

Find an item called “General” Tab among multiple tabs.

Then scroll down. You will see the “Your apps” section below. Click the HTML tag icon (</>) that is to create a website app in your Firebase project.

Fill all required information to create the app. You can name your website app in your preferred way. I used e-commerce-app the same as my Firebase project.

And then now you need to install firebase npm module. Copy the attached code snippet that connects your website with your Firebase project.

While you are executing the script below which takes time,

npm install firebase

Copy/paste the snippet, replacing them with yours.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "your key",
authDomain: "your domain",
projectId: "your id",
storageBucket: "your bucket",
messagingSenderId: "your id",
appId: "your id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Put that into the index file of the app folder in your Next.js project. Just for now. *We will modify the code a lot later in this tutorial.

After the execution finishes, you should see the firebase in the package.json file at the root of the Next.js project.

Next, in the next step, you will see “Install Firebase CLI”.

Firebase-tools is a library that let you test, manage, and deploy your website to Firebase Project from the command line.

We already did this part in the previous post, but if you haven’t installed it yet, you can follow my article or execute the command. Depending on your node version, the installation can fail. If so, please visit my previous article.

And in the next step, you will see three commands. In your terminal, please paste the command and hit Enter one by one.

But you are asked to select options when you hit firebase init

Here, select Firestore , Functions , and Hosting and hit Enter. Please note that there are two options for Hosting Select “Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys”. For this tutorial, we do not need Github Actions.

And in the next step, select Use an existing project because we already manually created our Firebase project. You should see the project name when you select Use an existing project. In my case, e-commerce-app appeared.

After this step, you will be asked to select various options for your project. Keep hitting “Enter” to select default options. But, for this tutorial, we use Typescript so make sure you select it in one of the steps.

After it’s complete, you should see many new files in your project.

Then, deploy your website to your Firebase project!

firebase deploy

Awesome!

But there is the last setup step. To actually use firebase services such as Firestore, Hosting, and Functions from your website, they should be enabled in the Firebase Console. In the sections below, I will explain them one by one.

Enable Firestore

Click “Create database”.

And in the modal that’s presented, select “Start in test mode”, which allows anyone to access your database.

For this tutorial, we are not going to store privacy-sensitive information so it should be okay. But if you plan to create a production application after this tutorial, make sure you make your own custom security rules and protect data.

Next, select a location. It is important to reduce latency and increase availability, store your data close to the users and services that need it.

This should be one that is the closest to your location. I chose asia-northeast1, which is Tokyo. You can find more details about the location. Then, enable it.

Now, you are ready to use your database.

Enable Hosting

In the left section, click Hosting and Get started.

These domains are automatically prepared by Firebase. If you want to use a custom domain, you can add your custom domain.

When you click on one of the domains, your website should open.

But you have not deployed your website to Hosting, you get an error page shown below. If so, please deploy your project to Firebase.

This is just a static website that is hosted in Firebase, not a server-side rendered website. To create a server-side rendered website, we need Cloud Functions.

Enable Cloud Functions

Next, let’s enable Cloud Functions. First, upgrade your plan to use Cloud Functions. Every transaction in firebase costs money, but it only happens if your transactions exceed the free quota. For this tutorial, there won’t be an excessive amount of transactions. you won’t be charged. No worries.

Register Payment Card

I chose “Pay as you go” plan.

To upgrade, make sure you already registered your credit card to Google. After you purchase an upgraded plan, you should see the button title changes from “Upgrade project” to “Get started”. Click to start the project.

You are asked to install the dependency, but in the previous article, we already installed the necessary npm modules. If you have not installed them yet, install relevant tools.

Now you should see the Cloud Functions dashboard.

Create Firebase Admin SDK

Now, let’s download the admin SDK file. This file enables access to Firebase services from privileged environments (such as servers or cloud) in Node.js.

We need this file to create a purchase on the checkout page. This will be explained later in future posts. So for now, let’s first download it and keep it.

Then, in “Project settings” from the gear icon in the left section that we saw earlier, next select “Service accounts”.

You will see a blue button. Select and generate a key and treat it securely. This should not be in a public space where people online can see it. For example, your github repository or a public online forum like StackOverflow.

Okay, that’s all. But you need to put this in your functions config so that you can access this file on the server anytime you want.

Add your private key file in your website project and hit the command below. Make sure you and the file are in the same directory. Or you can change and move to the file directory. You can set your private key to config by the following command.

firebase functions:config:set service_account="$(cat ./serviceAccount.json)"

After it is set successfully, redeploy your functions for the change to take effect. Then your private key data is accessible via functions.config().service_account inside Cloud functions. It doesn't have to be service_account you can use your own key name.

Now you successfully set up your Firebase project 👏

Next, let’s make your website server-side rendered with Cloud Functions. I am in the middle of the writing. For more stories’ announcements, please visit this page.

I am in the middle of writing other articles related to e-commerce and payment too right now, so please free to follow me to get notified instantly when my future articles are ready. My account’s theme is e-commerce, payment, and productivity.

(for tips if you wish to send me 🙂☕️)
- Ethereum address
0x45b8c8712159bEfaB29c3b1e97b4534272aDff31

--

--

--

I like things like e-commerce, payment and productivity.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Testing Your React Native App With Expo & Appium

Easiest and Efficient way to develop SPA react project.

How to create sortable Drag and Drop with vanilla Javascript

YoungInnovations Weekly Blog #237

Patterns & Flows: Completing To-Dos with TeuxDeux

Trigger At Every Exact BreakPoint Time In Javascript

The Nodejs Fatigue

Concatenations Sum: JS

Ryohei Arai

Ryohei Arai

I like things like e-commerce, payment and productivity.

More from Medium

A Guide To Firebase Authentication In React (with Google Sign-In)

Authentication with supabase in Nextjs

Video how-to: Netlify deployment of the Medusa Admin

Deploy your React App with Firebase Hosting