3. Installation

This guide provides step-by-step instructions on how to set up and configure a Next.JS application with Firebase integration. Firebase is a platform developed by Google that offers various backend services, such as authentication, database, storage, and cloud functions. By following these instructions, you will learn how to obtain Firebase secrets, enable authentication methods, set up Firestore database and indexing, configure storage (if needed), set up cloud functions, and run the Next.JS project.

Requirements

These are the components needed to run the project.

• Node: 18 (LTS)
• Firebase: v9

Local Project Environment

Step 1: Clone the project locally

To clone the project repository to your local machine, open a terminal and run:

git clone https://github.com/mbeps/next_discussion_platform.git

Step 2: Set up the environment

1. Navigate to the project directory:

cd next_discussion_platform

2. Copy the .env.example file and rename it to .env.local:

cp .env.example .env.local

3. Open the .env.local file and populate it with the required Firebase secrets.

Step 3: Set up Firebase

These are step-by-step instructions on how to configure Firebase for the Next.JS application. It covers obtaining Firebase secrets, enabling authentication methods, setting up Firestore database and indexing, configuring storage, and enabling cloud functions.

Step 3.1: Create a Firebase project

1. Go to the Firebase Console.
2. Click on "Add project" to create a new Firebase project.
3. Fill in the required details, enable Google Analytics if desired, and create the project.

Step 3.2: Obtain Firebase secrets and add them to the .env.local file

1. In your Firebase project, go to "Project settings" by clicking on the gear icon in the top left corner.
2. In the "General" tab, scroll down to the "Your apps" section and click on the "</>" icon to add a web app.
3. Fill in the app details and register the app.
4. After registering, you will be provided with a Firebase SDK configuration object. Copy the values of apiKey, authDomain, projectId, storageBucket, messagingSenderId, and appId.
5. Open the .env.local file in your Next.JS project and populate it with the copied Firebase secrets:

NEXT_PUBLIC_FIREBASE_API_KEY<your-api-key>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your-auth-domain>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your-project-id>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<your-storage-bucket>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<your-messaging-sender-id>
NEXT_PUBLIC_FIREBASE_APP_ID=<your-app-id>

Step 3.3: Enable authentication methods

These are required to allow you to authenticate into the app using these providers:

1. In your Firebase project, go to the "Authentication" section from the left-side menu.
2. Click on the "Sign-in method" tab.
3. Enable and configure the desired sign-in providers, such as GitHub, Google, and Email/Password.

For GitHub authentication:

To allow you to use your GitHub account to sign into Circus, go to your GitHub account:

• Go to GitHub Developer settings.
• Click on "New OAuth App" and fill in the required details. Use the "Authorized callback URL" provided by Firebase.
• After registering, copy the "Client ID" and "Client Secret".
• Paste them into the GitHub authentication configuration in Firebase.

For Google authentication:

To allow you to use your Google account to sign into Circus, go to your Google account:

• Click on "Google" in the sign-in providers list.
• Enable the provider and fill in the required details, such as the "Project support email".
• Save the changes.

Step 3.4: Set up Firestore database and indexing

Firebase indexing is used to improve query performance by requiring an index for every query. The indexes required for the most basic queries are automatically created for you. As you use and test your app, Cloud Firestore generates error messages that help you create additional indexes your app requires.

1. In your Firebase project, go to the "Firestore Database" section from the left-side menu.
2. Click on "Create database" and choose the "Start in production mode" or "Start in test mode" based on your preference.
3. Select a Cloud Firestore location and enable the database.
4. In the "Indexes" tab, click on "Add index" and set up the following indexes:

Collection ID	Fields Indexed
posts	communityId Ascending createdAt Descending name Descending
comments	postId Ascending createdAt Descending name Descending

Step 3.5: Set up Firebase Storage

This is required to allow Firebase to store post images.

1. In your Firebase project, go to the "Storage" section from the left-side menu.
2. Click on "Get started" and follow the prompts to set up a Cloud Storage bucket.

Step 3.6: Set up Cloud Functions

These cloud functions are used in this project to automatically add and remove users to and from the Firestore database as users are created and deleted to and from Firebase Authentication.

1. Ensure you have installed Firebase tools globally on your system. If not, run:

npm install -g firebase-tools

2. Log in to Firebase:

firebase login

3. In your Next.JS project directory, initialize the Firebase project:

firebase init

When prompted, follow these selections:

• Select Functions: Configure a Cloud Functions directory and its files by pressing Space to select and Enter to submit.
• Choose Use an existing project.
• Select the appropriate project for Select a default Firebase project for this directory.
• Choose TypeScript for What language would you like to use to write Cloud Functions?.
• Select Y (yes) for Do you want to use ESLint to catch probable bugs and enforce style?.
• Choose Y (yes) for Do you want to install dependencies with npm now?.

4. Navigate to the functions directory:

cd functions

5. Develop your cloud functions in the src directory using TypeScript. Use the index.ts file as the main entry point for your functions.

6. Compile your TypeScript code by running:

npm run build

7. Deploy the cloud functions to Firebase:

firebase deploy --only functions

Step 4: Run the Next.JS project

1. In your terminal, navigate back to the root of the Next.JS project directory:

cd ..

2. Install the required dependencies:

npm install

3. Run the development server:

npm run dev

The project should now be running on http://localhost:3000.