How to deploy Cleodoctra

This guide will walk you through creating a Firebase project that includes GitHub authentication, Firestore for your database, and Firebase Hosting for web application deployment.

Prerequisites

Before you begin, ensure that you have the following set up:

• Firebase account
• GitHub account
• Ensure you are running an up-to-date version of Node.js (this repository is built on Node.js v18).

Part 1: Set Up Firebase Project

1. Start by visiting the Firebase Console and create a new project.

2. Set a project name and you have the option to enable Google Analytics.

3. Once your project is created, click on "Authentication" from the left-hand menu.

4. Select "Sign-in method" in the Authentication section and enable GitHub.

5. Configure GitHub OAuth by providing your GitHub app's Client ID and Client Secret. To create a GitHub OAuth app, visit Developer settings. You will need a homepage URL and a callback URL. The callback URL is https://{projectname}.firebaseapp.com/__/auth/handler. For the homepage URL, you can use your domain or https://{projectname}.web.app. Finally, press "Register application" to finish creating your app.

6. (Optional) Under the "Settings" tab, navigate to "Authorized Domains." Here, you can add any custom domains from which you will be accessing the site. This step is useful if you intend to use a custom domain rather than the default Firebase Hosting domain.

Part 2: Set Up Firestore

1. In the Firebase console, click on "Firestore" from the left-hand menu.

2. Click "Create database" and use the default mode; in the next step, we will update it for our use case. Next, set the database to read-only mode by going to the "Rules" tab and setting the rules to the following:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      match /config/{config} {
        allow read;
      }

      match /users {
        allow create;
        match /{userID} {
          allow read, write: if request.auth.uid == userID;
        }
      }
    }
  }
}

4. In the Firebase database, create a document in the following path: "config/github." The field name should be clientId, and the value should be the GitHub app Client ID.

Part 3: Build The Web Application

1. After downloading this repository, run npm install to install the required packages.

2. In the Firebase console, click on the gear icon in the top right, then open the "Project settings."

3. Under "General," scroll down to "Your apps" and create a web app by pressing the </> icon.

4. You will be prompted to nickname your app. You will also see the option to set up Firebase hosting, but keep this option unchecked. We will set up hosting separately in part 4.

5. After registering the app, you will receive a piece of code containing a firebaseConfig variable. Replace the value of the firebaseConfig variable in the src/routes/+layout.ts file.

6. Complete the creation by pressing "Continue to the console."

Part 4: (Optional) Set Up App Check

1. Go to reCAPTCHA and sign in with your Google account.

2. Register a new site by providing a label, domain name, and selecting a reCAPTCHA type. The domain name should be the same as the domain name you provided in the Firebase console in part 1 steps 5 and 6.

3. After registering the site, you will receive a site key and a secret key. Remember these keys as we will be using them later.

4. In the Firebase console, under "Build" in the left-hand menu, click on "App Check."

5. Open the "Apps" tab and click on the web app you created in part 3.

6. In the dropdown menu, select "reCAPTCHA" and enter the secret key you received in step 3. Then press "Save."

7. Open src/routes/+layout.ts and replace the value of the reCaptchaSiteKey variable with the site key you received in step 3.

8. Finally, go to the "APIs" tab and click on "Cloud Firestore." Then click on "Enforce" to enable App Check for Firestore.

Part 5: Deploy to Firebase Hosting

1. Install Firebase CLI if you haven't already:

   npm install -g firebase-tools

2. Authenticate the Firebase CLI with your Google account:

   firebase login

3. In your project folder, initialize Firebase Hosting:

   firebase init hosting

4. When asked to set up a project, select the "Use an existing project" option. Then, select your project from the list.

5. Configure the public directory; in this case, set it to "build."

6. Enter that you do not want to configure your website as a single-page app.

7. Next, you will be prompted to set up automatic builds. It's recommended to set this up. This will automatically deploy the application to Firebase Hosting when an update is pushed to the GitHub repository. Follow the instructions provided by the console.

8. After the setup is finished, run npm run build.

9. Finally, deploy your web app to Firebase Hosting by either running firebase deploy or deploying it to a GitHub repository if you set up automatic builds in step 7.

10. Congratulations! Your app is now online at https://{projectname}.web.app and your custom domains when set up.

To use a custom domain, follow these additional steps:

1. Return to the Firebase console. Navigate to the "Hosting" menu and scroll down to "Domains."

2. At the bottom of the domain section, press the "Add custom domain" button.

3. Follow the on-screen instructions to verify and configure your custom domain. This process ensures that your custom domain is correctly linked to your Firebase Hosting.

4. Add your custom domain to the "Authorized Domains" list within the Firebase console. You can find this option in the "Authentication" menu under settings.

5. Similarly, in the reCAPTCHA admin console, navigate to the settings section and include your custom domain in the "Domains" list.