Step-by-Step Guide to Hosting Frontend on GitHub Pages and Backend on Render

 

How to Host the Frontend and Backend from the GitHub Repository

This guide explains how to host the frontend and backend from the GitHub repository located at Vinaykumarhub/host. We'll walk through the required changes and steps to successfully deploy your project, with the frontend hosted on GitHub Pages and the backend hosted on Render.

the website url is here https://vinaykumarhub.github.io/host/send-otp.html

Prerequisites

Before proceeding, ensure you have the following:

1. A GitHub account.
2. Basic knowledge of Git and GitHub.
3. A Render account for hosting the backend.

Repository Overview

The repository is structured as follows:

• frontend/: Contains the frontend code (HTML, CSS, JavaScript).
• backend/: Contains the backend code (Node.js, Express, etc.).
• README.md: Documentation for the project.

Step 1: Clone the Repository

To start, clone the repository to your local machine:

$ git clone https://github.com/Vinaykumarhub/host.git
$ cd host

Step 2: Configure the Frontend

Changes to Make:

1. Update API Endpoints:

   • Open the frontend files (likely in frontend/js or similar).
   • Update any API URLs to point to your backend's hosted URL on Render (e.g., https://your-backend-url.onrender.com/api).

   Example:

   const apiUrl = 'https://your-backend-url.onrender.com/api';
   

2. Check for Absolute Paths:

   • Replace any local paths with relative paths if required.

Hosting the Frontend on GitHub Pages:

1. Push your changes to the main branch (or a specific branch like gh-pages).
2. Go to the repository settings on GitHub.
3. Under the "Pages" section, set the source to the appropriate branch and folder (e.g., /frontend).
4. Save the settings, and GitHub Pages will generate a URL for your hosted frontend.

Step 3: Configure the Backend

Changes to Make:

1. Environment Variables:

   • Add environment variables for sensitive data (e.g., API keys, database URLs) using .env.
   • Example .env file:

     PORT=3000
     DATABASE_URL=mongodb+srv://username:password@cluster.mongodb.net/dbname
     

2. Update CORS Settings:

   • If using CORS, ensure the frontend URL is allowed.
   • Example:

     const cors = require('cors');
     app.use(cors({ origin: 'https://your-frontend-url.github.io' }));
     

3. Test Locally:

   • Run the backend locally to ensure everything works before deployment:

     $ cd backend
     $ npm install
     $ npm start
     

Hosting the Backend on Render:

1. Log in to your Render account.
2. Click on "New" and select "Web Service."
3. Connect your GitHub repository and select the backend folder as the root directory.
4. Configure the build and start commands:
   • Build Command: npm install
   • Start Command: npm start
5. Add environment variables in the "Environment" section.
6. Deploy the service. Render will provide a URL for your backend (e.g., https://your-backend-url.onrender.com).

Step 4: Test the Deployment

1. Access the frontend URL and test the user interface.
2. Perform API calls from the frontend to the backend and verify the responses.
3. Debug any issues by checking the logs on Render and GitHub Pages.

Summary of Changes Made

• Updated API endpoints in the frontend to point to the hosted backend on Render.
• Configured environment variables in the backend.
• Updated CORS settings in the backend to allow the frontend URL.
• Deployed the frontend to GitHub Pages and the backend to Render.

By following these steps, you can successfully host the frontend and backend of your project. If you encounter any issues, refer to the documentation of GitHub Pages or Render, or seek help from the community.