Hosting Web Setup Guide

The first step is to create an account on Gadohost.com. Gadohost provides optimized, high-performance cloud hosting suitable for deploying the Node.js API and web backend of SnapReels.

Once registered, navigate to the Billing section and select the Starter Premium plan (Plan 1) as a starting point. This plan includes support for up to 3 Node.js applications, 6 databases, free SSL certificates, and 20 GB of fast NVMe storage, which is perfectly sufficient for launching your SnapReels platform.

Select 'Starter Premium' plan on Gadohost Dashboard

Once you have selected your cloud hosting tier, we need to initialize a container for our Node.js server.

Follow these steps:

1. From the left sidebar navigation menu, click on Node.js apps (Indicated by arrow 1).
2. This will open your application dashboard. Click on the purple + Add New App button in the top right corner (Indicated by arrow 2) or in the center card area to begin configuring your new deployment.

Access Node.js Apps (1) and Click Add New App (2)

After clicking the + Add New App button, a configuration modal will appear to provision your new cloud app instance.

Configure the following settings carefully:

1. In the APP NAME field (Indicated by arrow 1), type the name of your application (e.g., snapreels or production-v1). Spaces and dots will be converted to hyphens automatically.
2. Under DOMAIN STRATEGY, select CUSTOM DOMAIN.
3. In the DOMAIN ADDRESS field (Indicated by arrow 2), type your registered domain address (e.g., yourdomain.com).
4. Click the blue Deploy instance button at the bottom to start provisioning your server.

Enter App Name (1) and Domain Address (2) in configuration modal

As soon as you click the Deploy instance button, Gadohost will automatically start setting up a default node test page and installing default dependencies (indicated by the progress bar e.g. Processing dependencies... 39%).

You must stop this default process immediately:

1. Wait for the app card to appear on your dashboard.
2. Click the red Stop Instance button (Indicated by arrow 1). This prevents the server from building the default template, allowing us to upload our own clean SnapReels project files in the next steps.

Click 'Stop Instance' (1) to halt default template setup

After stopping the default app instance, we need to set up the MongoDB database for our SnapReels backend.

Follow these steps to access the database options:

1. On your stopped application card, click the purple Manage button (Indicated by arrow 1). This will expand a settings panel displaying various service controls.
2. From the expanded settings row, click on the purple MONGODB icon (Indicated by arrow 2). This will navigate you to the database setup interface where we will create our database credentials.

Click 'Manage' (1) and select the 'MONGODB' option (2)

Now, we will provision a new MongoDB database instance for storing SnapReels users, videos, comments, and settings.

Follow these configuration steps carefully:

1. On the MongoDB databases page, click the purple + Add Database button in the top right corner of the background (Indicated by arrow 1). This will open the database creation modal.
2. In the USER field (Indicated by arrow 2), type the username for your database (e.g., yourusername or testsnapreels_test).
3. In the NAME field (Indicated by arrow 3), type the name of the database (e.g., yourdbname or testsnapreels_test). It is usually a good practice to keep the database name and user identical.
4. Next to the PASSWORD field, click the reload/generate icon (Indicated by arrow 4) to generate a secure database password. Make sure to copy and save this password somewhere safe! We will need it shortly to configure the MongoDB connection URI in our project environment file.
5. Finally, click the blue CREATE DATABASE button (Indicated by arrow 5) at the bottom to finalize and provision the database.

Add Database (1), fill User (2) & Name (3), generate Password (4), and Create Database (5)

Once the database is successfully created, it will appear in your Databases list. We need to copy its connection URI so that we can link our Node.js app to this database.

Follow these steps:

1. Locate your new database in the list and click the grey Copy URI button (Indicated by arrow 1). This will copy the MongoDB connection string to your clipboard. Save this string alongside your password, as we will use it to configure our environment variables.
2. After copying the URI, navigate back to your applications list by clicking on Node.js apps in the left sidebar menu (Indicated by arrow 2).

Click 'Copy URI' (1) and then click 'Node.js apps' in sidebar (2)

With our database created and stopped application instance ready, we can now access the server's files directory to upload the SnapReels backend code.

Follow these steps:

1. On the applications dashboard, click the purple Manage button on your app card (Indicated by arrow 1) to expand the settings menu.
2. Click on the purple FILES icon (Indicated by arrow 2) which is the first option in the row. This will open the Gadohost file manager for your Node.js application instance.

Click 'Manage' (1) and select the 'FILES' icon (2)

When you first open your application's file manager, you will notice a few default boilerplate files and folders (such as index.js, package.json, etc.). We need to delete these files to ensure a clean workspace before uploading our project files.

Follow these steps to clean the directory:

1. Check the Select All checkbox in the table header next to "IDENTITY" (Indicated by arrow 1). This will select all the default files in the folder.
2. With the files selected, a purple batch operation toolbar will appear. Click the red DELETE button in this toolbar (Indicated by arrow 2) and confirm the deletion.

Check 'Select All' (1) and click 'DELETE' (2) to clear default files

Now that our file manager is clean, we need to create a new environment variable file (.env) to hold our database credentials and configuration keys.

Follow these steps to initialize the file creation:

1. Click the blue + CREATE NEW button at the top right of the file manager header (Indicated by arrow 1). This will expand a dropdown menu.
2. From the dropdown menu, select New binary file (Indicated by arrow 2).

Click '+ CREATE NEW' (1) and select 'New binary file' (2)

After clicking New binary file, a modal will prompt you to enter the name of the new file.

Follow these steps to deploy the file:

1. In the LABEL text box (Indicated by arrow 1), type exactly: .env (make sure to include the leading dot).
2. Click the blue DEPLOY button (Indicated by arrow 2) to create the file in your server root directory.

Type '.env' in LABEL box (1) and click 'DEPLOY' (2)

Now that the .env file is created, you need to open it and configure the database connection.

Follow these steps to edit the file:

1. Click the three dots (...) on the right side of the .env file row (Indicated by arrow 1).
2. Select the Edit Code option from the dropdown menu (Indicated by arrow 2).

Click the three dots (1) and select 'Edit Code' (2)

Paste the following environment variables template inside the file editor:

DEMO_MODE=false
MONGODB_URI=

Follow these steps to configure and save:

1. Paste the copied template. In the MONGODB_URI field (Indicated by arrow 1), paste the MongoDB Connection URI that you copied in Step 7. Make sure it looks like MONGODB_URI=mongodb://....
2. Click the blue Save File button in the top-right corner (Indicated by arrow 2) to save your configurations.

Paste variables & MongoDB connection string (1) and click 'Save File' (2)

Now, you need to upload the website project code archive to your Gadohost Cloud Storage.

Follow these steps to upload the file:

1. Click the grey UPLOAD button located at the top-right corner of the Cloud Storage interface (Indicated by arrow 1).
2. In the system file dialog that pops up, select the website zip package: snapreels-WebSite-v1.0.2 (Indicated by arrow 2).
3. Click the Open button at the bottom of the file dialog (Indicated by arrow 3) to start uploading the archive.

Click 'UPLOAD' (1), select the website zip package (2), and click 'Open' (3)

Once the upload is complete, you need to extract the website code files into your server root directory.

Follow these steps to extract the archive:

1. Click the three dots (...) on the right side of the snapreels-WebSite-v1.0.2.zip file row (Indicated by arrow 1).
2. Select the yellow Extract All option from the dropdown menu (Indicated by arrow 2).

Click the three dots (1) and select 'Extract All' (2)

To secure your application with HTTPS, you need to configure an SSL certificate for your domain.

Follow these steps to access SSL configuration:

1. Navigate to the Node.js apps section in the sidebar menu (Indicated by arrow 1).
2. On your app instance card, click the purple Manage button (Indicated by arrow 2) to open the control options.
3. Click the green SSL button in the bottom grid (Indicated by arrow 3) to start generating or installing your SSL certificate.

Select 'Node.js apps' (1), click 'Manage' (2), and click 'SSL' (3)

Before generating the free SSL certificate, you must ensure that your custom domain has been configured with the correct Gadohost name servers:

Follow these steps to generate your SSL certificate:

1. Locate your custom domain in the list (Indicated by arrow 1) and verify that it matches your app instance. Make sure the status badge shows yellow Pending (indicating the nameservers are pointed correctly).
2. Click the blue Generate SSL button on the right side of the domain card (Indicated by arrow 2) to request and apply your free Let's Encrypt SSL certificate.

Verify domain (1) and click 'Generate SSL' (2)

After setting up the environment variables and the SSL certificate, you need to restart the application instance to apply the changes.

Follow these steps to re-launch:

1. Go to the Node.js apps section in the sidebar menu (Indicated by arrow 1).
2. Click the blue Re-launch button on your app card (Indicated by arrow 2).
3. Wait about 5 minutes for the installation and build process to complete. You will see a progress bar indicating the status.

Select 'Node.js apps' (1) and click 'Re-launch' (2)

Once the build process is complete, the application status will change to indicate it is running successfully.

Follow these final steps:

1. Verify that the status badge at the top of the card shows green Ready (Indicated by arrow 1). Congratulations! The installation was successful.
2. Click the LIVE SITE PREVIEW link at the bottom of the card (Indicated by arrow 2) to open and test your live website immediately!

Confirm status 'Ready' (1) and click 'LIVE SITE PREVIEW' (2)

When you open your website for the first time, you will be greeted by the SnapReels Platform Initialization Wizard. The first step is to test your MongoDB connection.

Follow these steps:

1. Click the red Test Connection button (Indicated by arrow 1) to verify that your website can connect to your MongoDB database successfully.
2. Once you see the green success message "Connection to MongoDB established successfully!", click the pink Next: Initialize Data button at the bottom (Indicated by arrow 2).

Click 'Test Connection' (1) and select 'Next: Initialize Data' (2)

In this step, we will populate the database with default settings, categories, and languages required for SnapReels to function.

Follow these steps:

1. Click the orange Start Auto-Initialization button (Indicated by arrow 1) to automatically create essential tables and insert initial data.
2. Wait for the database installation process to finish. Once completed, click the pink Next: Site Config button at the bottom (Indicated by arrow 2) to proceed.

Click 'Start Auto-Initialization' (1) and then 'Next: Site Config' (2)

Now configure the basic branding and domain configuration for your streaming platform.

Follow these steps:

1. Enter your desired website title in the Site Name field (Indicated by arrow 1).
2. Enter the primary URL (domain) of your website in the Primary URL (Domain) field (Indicated by arrow 2), make sure it is exactly your domain.
3. Click the pink Save & Continue button (Indicated by arrow 3) to save these details.

Enter Site Name (1), Primary URL (2), and click 'Save & Continue' (3)

Set up the administrator credentials to access your dashboard and manage the streaming platform.

Follow these steps:

1. Enter your desired administrator username in the Admin Username field (Indicated by arrow 1).
2. Enter your email address in the Admin Email field (Indicated by arrow 2).
3. Enter a secure password in the Admin Password field (Indicated by arrow 3).
4. Click the pink Finalize & Install button (Indicated by arrow 4) to complete the installation.

Congratulations! Setup is complete. Now go to your admin link /admin to manage your site.

Fill in Username (1), Email (2), Password (3), and click 'Finalize & Install' (4)

Access your admin panel dashboard to configure and customize your streaming platform.

Follow these steps:

1. Enter the administrator Username you created in the previous step (Indicated by arrow 1).
2. Enter the administrator Password (Indicated by arrow 2).
3. Click the pink Sign In button (Indicated by arrow 3) to log into the Admin Panel.

Enter Username (1), Password (2), and click 'Sign In' (3)

To initialize Firebase services for your website, you must create a new project in the Google Firebase developer portal.

Follow these steps:

1. Navigate to the Firebase Console.
2. Click the card Get started with a Firebase project or Create a project (Indicated by the red highlight).

Access Firebase Console and click Create a project

Choose a name for your Firebase project to distinguish it in your developer dashboard.

Follow these steps:

1. In the Enter your project name field (Indicated by arrow), type your desired project name (e.g., SnapReels).
2. Check both checkboxes (Indicated by the red boxes) to accept the Firebase Terms and confirm your business use.
3. Click the Continue button at the bottom (Indicated by arrow).

Enter your project name, check terms, and click Continue

Configure Google Analytics settings for your project to track user interactions and metrics.

Follow these steps:

1. Verify your Analytics location (Indicated by the box).
2. Check the Google Analytics terms checkboxes at the bottom (Indicated by the box).
3. Click the Create project button (Indicated by arrow) to initiate the workspace provisioning.

Select location, accept terms, and click Create project

Proceed through the AI Assistance recommendations during the project initialization.

Follow these steps:

1. Review the optional AI assistance features in your Firebase project.
2. Click the blue Continue button at the bottom (Indicated by the box and arrow).

Click Continue to proceed to project creation

Wait for Firebase to finish provisioning resources for your new cloud project workspace.

Follow these steps:

1. Once you see the green success message Your Firebase project is ready, click the blue Continue button to enter your project console dashboard.

Click Continue once the project is successfully created

To link your live website domain with Firebase, you must create a Web application instance within your project settings dashboard.

Follow these steps:

1. On your Firebase project overview dashboard page, click the circular Web (</>) icon (Indicated by the red box and arrow) to register your new web client app.

Click the Web icon () to create a new Web project application

Assign an identifier name to your web application registration.

Follow these steps:

1. In the App nickname text field (Indicated by the red box), type a name for your web app configuration (e.g., SnapReels Web).
2. Click the blue Register app button (Indicated by the arrow).

Type your App nickname and click Register app

Firebase will generate a configuration keys object. This object connects your web pages to Firebase servers.

Follow these steps:

1. Locate the const firebaseConfig block inside the script tag (Indicated by the red box).
2. Copy this JavaScript config object block (from apiKey to measurementId).
3. Save this copied object safely in a local file on your machine, as we will paste these values into our website configuration panel.
4. Click the blue Continue to console button at the bottom.

Copy the firebaseConfig object details and save them locally

Configure project settings, keys, and security parameters in the management settings page.

Follow these steps:

1. Click the gear settings icon next to "Project Overview" in the left sidebar menu (Indicated by the red box and arrow).
2. Select Project settings from the menu options to load the settings dashboard.

Click the settings gear icon and go to Project Settings

Enable secure user login options (like Google, Facebook, etc.) inside the Authentication dashboard.

Follow these steps:

1. In the left sidebar menu under the "Build" category, click on Authentication (Indicated by the red box and arrow).

Select Authentication from Build sidebar menu

For Firebase authentication scripts to run securely on your custom domain name, you must authorize it in your project settings.

Follow these steps:

1. Go to the Settings tab in the Authentication dashboard.
2. Scroll down to Authorized domains.
3. Click the Add domain button.
4. Enter your custom domain address (e.g., yourdomain.com) (Indicated by the red box and arrow).
5. Click the blue Add button to save changes and authorize your website domain.

Authorize your website domain name in Authorized domains list