---
title: "Publish Your Lovable Created React WebApp to InMotion Hosting Shared Hosting via GitHub"
description: "You've built an incredible React web app using Lovable's AI-powered development platform, and now you're ready to deploy it to your InMotion Hosting shared hosting . This comprehensive guide walks..."
url: https://www.inmotionhosting.com/support/website/git/publish-lovable-webapp-via-github/
date: 2025-07-08
modified: 2025-07-14
author: "Todd Robinson"
categories: ["AI Tools", "Git"]
type: post
lang: en
---

# Publish Your Lovable Created React WebApp to InMotion Hosting Shared Hosting via GitHub

![How to Publish Your Lovable Created React WebApp to InMotion Hosting via GitHub Hero Image](https://www.inmotionhosting.com/support/wp-content/uploads/2025/07/Publish-Lovable-App-to-InMotion-Hosting-via-GitHub.png)

You've built an incredible React web app using Lovable's AI-powered development platform, and now you're ready to deploy it to your InMotion Hosting shared hosting . This comprehensive guide walks you through the entire process of connecting Lovable to GitHub and deploying your application to any cPanel-based InMotion Hosting server environment using Git version control.

InMotion Hosting's [Shared Hosting](https://www.inmotionhosting.com/shared-hosting), VPS, and Dedicated Server accounts fully support GitHub Actions and remote Git repositories, making it straightforward to deploy your Lovable-created React applications. You'll learn how to set up the complete pipeline from Lovable's development environment to your live website, including database migration if your app uses Supabase.

With this guide, you'll be able to:

- Connect your [Lovable](https://lovable.dev/) project to GitHub for version control
- Set up Git repositories in your InMotion cPanel account
- Configure automatic deployments using GitHub Actions
- Migrate from Supabase to PostgreSQL on InMotion if needed
- Manage ongoing updates and deployments

Let's get started with the technical setup.

## Understanding the Deployment Architecture

Before diving into the setup process, it's important to understand how the pieces fit together. Lovable creates React applications that run in the browser, but they need to be built and deployed to a web server to be accessible to your users.

**Your deployment pipeline will look like this**: You develop in Lovable → Changes sync to GitHub → GitHub Actions builds your app → Built files deploy to your InMotion hosting account → Your website goes live.

This architecture gives you the best of both worlds: **rapid development with Lovable's AI assistance and the reliability of professional hosting with InMotion**. You maintain full control over your code through GitHub while leveraging automated deployment processes.

InMotion's [Shared Hosting](https://www.inmotionhosting.com/shared-hosting) servers run on AlmaLinux 8, which provides excellent compatibility with modern web applications. The platform supports Node.js applications, PostgreSQL databases, and SSH access (on port 2222), giving you everything needed for React app deployment.

## Setting Up Lovable GitHub Integration

The first step in your deployment pipeline is connecting Lovable to GitHub. This creates a bridge between your AI-powered development environment and the version control system that will manage your code.

### Initial GitHub Connection

Start by linking your Lovable account to GitHub. In your Lovable project editor, look for the GitHub option in the top-right corner and click "**Connect to GitHub**." This initiates the authorization process that allows Lovable to create and manage repositories on your behalf.

When GitHub opens, you'll be asked to authorize the Lovable GitHub App. Sign in to your GitHub account if you haven't already. You'll see options to grant access to all repositories or only select repositories. For simplicity, granting access to all repositories works well, but you can be selective if you prefer to limit access.

If you belong to GitHub organizations, you'll need to choose which account or organization should host your project's repository. Make sure you have admin permissions in any organization you select, as Lovable needs to create repositories and manage commits.

![If you belong to GitHub organizations, you](https://www.inmotionhosting.com/support/wp-content/uploads/2025/07/lovable-connect-github.png)

### Creating Your Project Repository

Once GitHub authorization is complete, return to your Lovable project. Click the "**Create Repository**" button, which should now be visible in the GitHub section of your project interface. Lovable will create a new GitHub repository specifically for your project and perform the initial code push.

This process typically takes a few seconds to complete. Lovable is transferring all your project files, including your React components, configuration files, and any assets you've created. Once finished, you'll see a confirmation message and a link to view your repository on GitHub.

Navigate to your GitHub account to verify the repository creation. You should see a new repository with your project name containing all the code from your Lovable application. This repository will serve as the central hub for your code, connecting Lovable's development environment to your InMotion hosting account.

![](https://www.inmotionhosting.com/support/wp-content/uploads/2025/07/image-1-1024x548.png)

### Understanding Lovable's Sync Behavior

Lovable maintains real-time synchronization between your project and GitHub, but this sync operates specifically with your repository's default branch (typically "main" or "master"). When you make changes in Lovable, they're automatically committed and pushed to this default branch within seconds.

Similarly, if you push changes to the default branch from your local development environment or directly through GitHub's interface, Lovable will pull these changes and reflect them in your project editor almost immediately. This bidirectional sync ensures that your code stays consistent whether you're working in Lovable or using traditional development tools.

However, Lovable only tracks the default branch. If you create feature branches or work on separate branches in GitHub, those changes won't appear in Lovable until they're merged into the default branch. This is important to remember when setting up your deployment workflow.

## Configuring Git in Your InMotion cPanel Account

With your Lovable project connected to GitHub, the next step is [setting up Git Version Control](https://www.inmotionhosting.com/support/edu/cpanel/how-to-use-git-version-control-in-cpanel/) in your InMotion Hosting account with cPanel. This creates the destination for your deployed code and establishes the connection between GitHub and your web server.

### Accessing Git Version Control

1. Log into your InMotion cPanel account by navigating to `https://yourdomain.com/cpanel` or using the cPanel login link in your Account Management Panel.
2. Navigate to the Files section in your cPanel dashboard. You'll see several file management options listed in a grid or menu format.
3. Click on "**Git Version Control**" which should appear as an icon with a Git logo. This opens InMotion's Git management interface where you can create and manage repositories directly on your hosting account.![Select Git Version Control under Files in cPanel](https://www.inmotionhosting.com/support/wp-content/uploads/2018/08/cpanel-files-git-version-control-1024x284.png)
4. Review the initial screen. If this is your first time using Git in cPanel, you'll be prompted to create a repository immediately and can skip to the next section. Otherwise, you'll see a list of existing repositories (if any) and a blue "**Create**" button to add new ones.

### Creating Your Deployment Repository

1. Click the "**Create**" button to start setting up your deployment repository. This opens a form with several configuration options.![Click on Create to link a Repository](https://www.inmotionhosting.com/support/wp-content/uploads/2018/08/git-version-control-create-1024x316.png)
2. Enable repository cloning by toggling **ON** the "**Clone a Repository**" option. You'll see the form change to show fields for cloning an existing repository instead of creating a new empty one.![Create Git Repository with Clone On](https://www.inmotionhosting.com/support/wp-content/uploads/2018/08/git-create-repository-1024x955.png)
3. Get your GitHub repository's clone URL by opening your GitHub repository in a new browser tab. Click the green "**Code**" button and you'll see options for **HTTPS**, **SSH**, and **GitHub CLI**. Copy the **HTTPS URL** (it will look like `https://github.com/yourusername/your-repo-name.git`).
4. Enter the clone URL in the "**Clone URL**" field in cPanel. Paste the **HTTPS URL** you copied from GitHub. For shared hosting, the **HTTPS URL** typically works best initially, though you can switch to SSH later for automated deployments.
5. Set the repository path to specify where your website files will live on the server. Choose one of these options: wp:list /wp:list
   - For your main domain: `public_html/your-app-name`
   - For a subdomain: `public_html/subdomain-name/your-app-name`
   - For a subdirectory: `public_html/directory-name/your-app-name`
6. Provide a repository name that will appear in your cPanel interface. Choose something descriptive like "**Lovable React App**" or "**My Production Website**" so you can easily identify it later.
7. Click "**Create**" at the bottom of the form. cPanel will now clone your GitHub repository to your hosting account. This process typically takes 30-60 seconds depending on your repository size.
8. Wait for the confirmation message that says "**Repository created successfully**" or similar. You'll then see your new repository listed in the Git Version Control interface.

### Configuring SSH Access for Shared Hosting

1. Generate an SSH key pair on your local machine if you don't already have one. Open your terminal or command prompt and run:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

```
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

1. You'll see prompts like this:

Generating public/private rsa key pair.
Enter file in which to save the key (/home/yourusername/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

```
Generating public/private rsa key pair.
Enter file in which to save the key (/home/yourusername/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again:
```

1. View your public key by running:

cat ~/.ssh/id_rsa.pub

```
cat ~/.ssh/id_rsa.pub
```

1. This will display your public key, which looks like:

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC7... your_email@example.com

```
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC7... your_email@example.com
```

1. Copy the entire public key including the **ssh-rsa** at the beginning and your email at the end.
2. Add the SSH key to your cPanel account by navigating to "**SSH Access**" → "**Manage SSH Keys**" in your cPanel dashboard.
3. Click "**Import Key**" and paste your public key into the text field. Give it a descriptive name like "My Development Machine" and click "**Import**."
4. Authorize the key by clicking "**Manage**" next to your newly imported key, then clicking "**Authorize**." You'll see a confirmation that the key is now authorized.
5. Test your SSH connection from your local machine. InMotion's shared hosting environments must use port 2222:

ssh -p 2222 yourusername@yourdomain.com

```
ssh -p 2222 yourusername@yourdomain.com
```

1. If successful, you'll see:

The authenticity of host ':2222 (:2222)' can't be established.

RSA key fingerprint is SHA256:...

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added ':2222' (RSA) to the list of known hosts.

Welcome to yourdomain.com!

$

```
The authenticity of host '[yourdomain.com]:2222 ([IP_ADDRESS]:2222)' can't be established.

RSA key fingerprint is SHA256:...

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added '[yourdomain.com]:2222' (RSA) to the list of known hosts.

Welcome to yourdomain.com!

$
```

1. Remember the SSH connection format for InMotion shared hosting:

ssh://yourusername@yourdomain.com:2222/home/yourusername/repository-path

```
ssh://yourusername@yourdomain.com:2222/home/yourusername/repository-path
```

### Testing Your Repository Connection

Once your repository is created in cPanel, test the connection by making a small change to your GitHub repository. You can edit a file directly on GitHub or push a change from your local development environment. The change should appear in your cPanel Git interface within a few minutes.

If changes aren't syncing properly, check your repository settings in cPanel. Ensure the clone URL is correct and that you have the necessary permissions. You may need to update your repository credentials or re-authenticate with GitHub.

## Setting Up PostgreSQL Database (If Needed)

Many Lovable projects use Supabase for their database needs during development. When deploying to InMotion Hosting, you'll want to migrate to a PostgreSQL database hosted on your account for better performance and control.

### Creating a PostgreSQL Database

1. Access the PostgreSQL Databases section in your cPanel by navigating to the "**Databases**" section and clicking on "**PostgreSQL Databases**." You'll see a management interface for creating and managing PostgreSQL databases.
2. Create your database by following these detailed steps: wp:list /wp:list
   - Locate the "**Create New Database**" section at the top of the page
   - Enter a descriptive database name in the "**Database Name**" field. Choose something that relates to your project, such as `lovable_app_prod`, `react_webapp_db`, or `myproject_main`
   - Note the full database name that will be created. InMotion automatically prefixes your database name with your cPanel username, so `lovable_app_prod` becomes `username_lovable_app_prod`
   - Click "**Create Database**" and wait for the system to process your request.
3. Confirm database creation by looking for the success message that reads "Added the database username_lovable_app_prod" (or your chosen name). This confirms that your database has been created successfully.
4. Click "**Go Back**" to return to the PostgreSQL Databases main page, where you'll now see your new database listed in the "Current Databases" section.

### Creating Database Users and Permissions

1. Create a database user by scrolling down to the "**PostgreSQL Users**" section: wp:list /wp:list
   - Enter a username in the "**Username**" field. Choose something descriptive like `lovable_app_user` or `webapp_user`
   - Generate a strong password by clicking the "**Password Generator**" button, or create your own secure password with at least 12 characters including uppercase, lowercase, numbers, and symbols
   - Confirm your password by entering it again in the "**Password (Again)**" field
   - Click "**Create User**" to create the database user account
2. Record your database credentials immediately after creation. You'll need these for your application configuration:

Database Host: localhost (or your domain name)
Database Port: 2222
Database Name: username_lovable_app_prod
Database Username: username_lovable_app_user
Database Password:

```
Database Host: localhost (or your domain name)
Database Port: 2222
Database Name: username_lovable_app_prod
Database Username: username_lovable_app_user
Database Password: [the password you created]
```

1. Grant permissions to your user by scrolling to the "**Add User to Database**" section: wp:list /wp:list
   - Select your database user from the "**User**" dropdown menu
   - Select your database from the "**Database**" dropdown menu
   - Click "**Add**" to proceed to the permissions screen
2. Set user permissions on the permissions page: wp:list /wp:list
   - Check "**ALL PRIVILEGES**" to grant full access to your database user. This allows your application to create tables, insert data, update records, and delete data as needed
   - Review the individual permissions if you prefer granular control. For most React applications, you'll need `SELECT`, `INSERT`, `UPDATE`, `DELETE`, `CREATE`, and `DROP` permissions
   - Click "**Make Changes**" to save the permissions
3. Verify user access by testing the database connection. You can do this through cPanel's phpPgAdmin interface: wp:list /wp:list
   - Navigate to phpPgAdmin in the "**Databases"** section of cPanel
   - Log in using your database credentials
   - Select your database from the left sidebar
   - Run a test query like `SELECT version();` to confirm connectivity

### Updating Your Application Configuration

1. Locate your application's database configuration which is typically found in one of these files: wp:list /wp:list
   - `.env` or `.env.local` (environment variables)
   - `config/database.js` (configuration file)
   - `src/lib/database.js` (database connection module)
2. Replace Supabase configuration with your InMotion PostgreSQL details. Change from:

// Old Supabase configuration
const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

```
// Old Supabase configuration
const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)
```

1. To PostgreSQL configuration:

// New PostgreSQL configuration
const databaseConfig = {
  host: 'localhost', // or your domain name
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password',
  ssl: false // InMotion's shared hosting typically doesn't require SSL for local connections
}

```
// New PostgreSQL configuration
const databaseConfig = {
  host: 'localhost', // or your domain name
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password',
  ssl: false // InMotion's shared hosting typically doesn't require SSL for local connections
}
```

1. Update environment variables if your application uses them. Create or modify your **.env.production** file:

# Database Configuration
REACT_APP_DB_HOST=localhost
REACT_APP_DB_PORT=2222
REACT_APP_DB_NAME=username_lovable_app_prod
REACT_APP_DB_USER=username_lovable_app_user
REACT_APP_DB_PASSWORD=your_secure_password

# Application Configuration
REACT_APP_NODE_ENV=production
REACT_APP_API_URL=https://yourdomain.com/api

```
# Database Configuration
REACT_APP_DB_HOST=localhost
REACT_APP_DB_PORT=2222
REACT_APP_DB_NAME=username_lovable_app_prod
REACT_APP_DB_USER=username_lovable_app_user
REACT_APP_DB_PASSWORD=your_secure_password

# Application Configuration
REACT_APP_NODE_ENV=production
REACT_APP_API_URL=https://yourdomain.com/api
```

1. Test your database connection locally before deploying:

# Install a PostgreSQL client for testing
npm install pg

# Create a test connection script
node -e "
const { Client } = require('pg');
const client = new Client({
  host: 'yourdomain.com',
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password'
});
client.connect()
  .then(() => console.log('Database connection successful!'))
  .catch(err => console.error('Database connection failed:', err))
  .finally(() => client.end());
"

```
# Install a PostgreSQL client for testing
npm install pg

# Create a test connection script
node -e "
const { Client } = require('pg');
const client = new Client({
  host: 'yourdomain.com',
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password'
});
client.connect()
  .then(() => console.log('Database connection successful!'))
  .catch(err => console.error('Database connection failed:', err))
  .finally(() => client.end());
"
```

1. Commit your configuration changes to your GitHub repository:

git add .env.production
git add src/config/database.js  # or your specific config file
git commit -m "Update database configuration for InMotion PostgreSQL"
git push origin main

```
git add .env.production
git add src/config/database.js  # or your specific config file
git commit -m "Update database configuration for InMotion PostgreSQL"
git push origin main
```

1. Verify the changes by checking your GitHub repository to ensure the updated configuration files are committed and will be included in your next deployment.

## Configuring GitHub Actions for Deployment

GitHub Actions provides the automation that makes your deployment pipeline work seamlessly. You'll create a workflow that builds your React application and deploys it to your InMotion hosting account whenever you push changes to your main branch.

### Creating Your Workflow File

1. Navigate to your GitHub repository in your web browser and ensure you're viewing the main branch.
2. Create the workflows directory by clicking on "**Create new file**" in your repository's main page.
3. Type the file path **.github/workflows/deploy.yml** in the file name field. GitHub will automatically create the necessary directories when you include the forward slashes.
4. Add your workflow configuration by copying and pasting the following complete YAML configuration:

name: Deploy Lovable React App to InMotion Hosting
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    - name: Setup Node.js environment
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    - name: Install dependencies
      run: |
        echo "Installing npm dependencies..."
        npm ci
        echo "Dependencies installed successfully"
    - name: Build React application
      run: |
        echo "Building React application for production..."
        npm run build
        echo "Build completed successfully"
        ls -la build/
    - name: Setup SSH key for deployment
      run: |
        echo "Setting up SSH key..."
        mkdir -p ~/.ssh
        echo "${{ secrets.SSH_KEY }}" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan -p 2222 ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
        echo "SSH key configured successfully"
    - name: Deploy to InMotion Hosting
      run: |
        echo "Starting deployment to InMotion Hosting..."
        rsync -avz --delete --progress \
          -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
          build/ \
          ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_PATH }}
        echo "Deployment completed successfully"
    - name: Verify deployment
      run: |
        echo "Verifying deployment..."
        ssh -p 2222 ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }} "ls -la ${{ secrets.SSH_PATH }}"
        echo "Deployment verification completed"

```
name: Deploy Lovable React App to InMotion Hosting
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    - name: Setup Node.js environment
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    - name: Install dependencies
      run: |
        echo "Installing npm dependencies..."
        npm ci
        echo "Dependencies installed successfully"
    - name: Build React application
      run: |
        echo "Building React application for production..."
        npm run build
        echo "Build completed successfully"
        ls -la build/
    - name: Setup SSH key for deployment
      run: |
        echo "Setting up SSH key..."
        mkdir -p ~/.ssh
        echo "${{ secrets.SSH_KEY }}" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan -p 2222 ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
        echo "SSH key configured successfully"
    - name: Deploy to InMotion Hosting
      run: |
        echo "Starting deployment to InMotion Hosting..."
        rsync -avz --delete --progress \
          -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
          build/ \
          ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_PATH }}
        echo "Deployment completed successfully"
    - name: Verify deployment
      run: |
        echo "Verifying deployment..."
        ssh -p 2222 ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }} "ls -la ${{ secrets.SSH_PATH }}"
        echo "Deployment verification completed"
```

1. Review the workflow configuration to understand what each step does: wp:list /wp:list
   - **Checkout code: **Downloads your repository code to the GitHub Actions runner
   - **Setup Node.js:** Installs Node.js version 18 with npm caching for faster builds
   - **Install dependencies:** Runs **npm ci** to install your project dependencies
   - **Build React application:** Creates the production build of your React app
   - **Setup SSH key:** Configures SSH authentication for secure deployment
   - **Deploy to InMotion:** Uses rsync to transfer files to your hosting account
   - **Verify deployment:** Confirms that files were transferred successfully
2. Commit the workflow file by scrolling to the bottom of the page, adding a commit message like "**Add GitHub Actions deployment workflow**", and clicking "**Commit new file**."

### Setting Up Deployment Secrets

1. Navigate to your repository settings by clicking on the "**Settings**" tab in your GitHub repository.
2. Access the secrets section by clicking on "**Secrets and variables**" in the left sidebar, then selecting "**Actions.**"
3. Add your InMotion hosting secrets by clicking "**New repository secret**" for each of the following: INMOTION_HOST Secret: wp:list /wp:list
   - Name: **INMOTION_HOST**
   - Value: **yourdomain.com** (replace with your actual domain)
   - Click "**Add secret**"
4. INMOTION_USERNAME Secret: wp:list /wp:list
   - Name: **INMOTION_USERNAME**
   - Value: **your_cpanel_username** (found in your cPanel login details)
   - Click "**Add secret**"
5. INMOTION_SSH_KEY Secret: wp:list /wp:list
   - Name: **INMOTION_SSH_KEY**
   - Value: Your private SSH key content (run **cat ~/.ssh/id_rsa** on your local machine to view it)
   - The key should start with **-----BEGIN OPENSSH PRIVATE KEY-----** and end with **-----END OPENSSH PRIVATE KEY-----**
   - Click "**Add secret**"
6. INMOTION_PATH Secret: wp:list /wp:list
   - Name: **INMOTION_PATH**
   - Value: **/home/yourusername/public_html/your-app-directory** (replace with your actual path)
   - Click "**Add secret**"
7. Verify all secrets are added by checking that you see all four secrets listed in your repository secrets page.

### Implementing the Deployment Step

1. Understand the rsync command used in the deployment step:

rsync -avz --delete --progress \
  -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
  build/ \
username@yourdomain.com:/home/username/public_html/your-app/

```
rsync -avz --delete --progress \
  -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
  build/ \
username@yourdomain.com:/home/username/public_html/your-app/
```

1. Break down the rsync options: wp:list /wp:list
   - **`-a`**: Archive mode (preserves permissions, timestamps, etc.)
   - **`-v`**: Verbose output (shows files being transferred)
   - **`-z`**: Compress data during transfer (faster over network)
   - **`--delete`**: Remove files on destination that don't exist in source
   - **`--progress`**: Show transfer progress
   - **`-e "ssh -p 2222"`**: Use SSH on port 2222 for transfer
   - `**-o StrictHostKeyChecking=no**:` Skip SSH host key verification
2. Customize the deployment path by updating the **INMOTION_PATH** secret to match your specific hosting setup: wp:list /wp:list
   - Main domain: **/home/yourusername/public_html**
   - Subdomain: **/home/yourusername/public_html/subdomain**
   - Subdirectory: **/home/yourusername/public_html/directory**

### Testing Your Deployment Workflow

1. Make a test change to your repository by editing a file (like updating the **README.md** or making a small change to your React app).
2. Commit and push the change to your main branch:

git add .
git commit -m "Test deployment workflow"
git push origin main

```
git add .
git commit -m "Test deployment workflow"
git push origin main
```

1. Monitor the workflow execution by navigating to the "Actions" tab in your GitHub repository. You should see a new workflow run starting with the name "Deploy Lovable React App to InMotion Hosting."
2. Click on the workflow run to see detailed logs. You'll see output like:

Run npm ci

Installing npm dependencies...

npm WARN prepare removing existing node_modules

added 1234 packages in 45s

Dependencies installed successfully

Run npm run build

Building React application for production...

> my-app@0.1.0 build

> react-scripts build

Creating an optimized production build...

Compiled successfully.

File sizes after gzip:

  123.45 KB  build/static/js/main.abc123.js
  12.34 KB   build/static/css/main.def456.css

Build completed successfully

```
Run npm ci

Installing npm dependencies...

npm WARN prepare removing existing node_modules

added 1234 packages in 45s

Dependencies installed successfully

Run npm run build

Building React application for production...

> my-app@0.1.0 build

> react-scripts build

Creating an optimized production build...

Compiled successfully.

File sizes after gzip:

  123.45 KB  build/static/js/main.abc123.js
  12.34 KB   build/static/css/main.def456.css

Build completed successfully
```

1. Check the deployment step output for successful file transfer:

Run rsync -avz --delete --progress...

Starting deployment to InMotion Hosting...

building file list ... done

./

asset-manifest.json
       1,234 100%    0.00kB/s    0:00:00 (xfr#1, to-chk=25/27)

favicon.ico
       3,456 100%    3.29MB/s    0:00:00 (xfr#2, to-chk=24/27)

index.html
       2,345 100%    2.24MB/s    0:00:00 (xfr#3, to-chk=23/27)

sent 567,890 bytes  received 1,234 bytes  379,416.00 bytes/sec

total size is 567,890  speedup is 1.00

Deployment completed successfully

```
Run rsync -avz --delete --progress...

Starting deployment to InMotion Hosting...

building file list ... done

./

asset-manifest.json
       1,234 100%    0.00kB/s    0:00:00 (xfr#1, to-chk=25/27)

favicon.ico
       3,456 100%    3.29MB/s    0:00:00 (xfr#2, to-chk=24/27)

index.html
       2,345 100%    2.24MB/s    0:00:00 (xfr#3, to-chk=23/27)

sent 567,890 bytes  received 1,234 bytes  379,416.00 bytes/sec

total size is 567,890  speedup is 1.00

Deployment completed successfully
```

1. Verify deployment success by checking that your website is accessible at your domain and that all functionality works correctly.
2. Troubleshoot any failures by examining the error logs in the GitHub Actions interface. Common issues and their solutions: wp:list /wp:list
   - **SSH connection failures**: Check your SSH key format and ensure it's properly formatted in the secret
   - **Permission denied errors**: Verify your SSH key is authorized in cPanel
   - **Build failures**: Check your **package.json** for missing dependencies
   - **Rsync errors**: Confirm your deployment path is correct in the **INMOTION_PATH** secret

## Managing the Lovable to Main Branch Workflow

Lovable typically creates its own branch for development work, separate from your main branch. To deploy changes from Lovable to your live website, you'll need to merge these changes into your main branch, which then triggers your deployment workflow.

### Understanding Branch Structure

When Lovable connects to GitHub, it often creates a branch called "lovable" or similar for its development work. This keeps Lovable's AI-generated changes separate from your main branch until you're ready to deploy them. Your GitHub Actions workflow is configured to deploy only from the main branch, so you control when changes go live.

This branching strategy gives you the opportunity to review Lovable's changes before they're deployed to your live website. You can test functionality, make additional modifications, or even revert changes if needed.

### Manual Merge Process

1. Check your repository's branch structure by navigating to your GitHub repository homepage and clicking on the branch dropdown (usually shows "main" by default). You should see your main branch and the Lovable development branch (often named "lovable" or similar).
2. Review recent commits on the Lovable branch: wp:list /wp:list
   - Click on the Lovable branch to switch to it
   - Examine recent commits by clicking on the commit history. You'll see entries like:

Update component styling and layout
Add new user authentication features  
Fix database connection issues
Implement responsive design improvements

```
Update component styling and layout
Add new user authentication features  
Fix database connection issues
Implement responsive design improvements
```

- Review the changes by clicking on individual commits to see what code was modified

1. Create a pull request to merge Lovable changes into your main branch: wp:list /wp:list
   - Click "**Pull requests**" in the top navigation of your repository
   - Click "**New pull request**" (green button on the right)
   - Set the base branch to "**main**" using the dropdown on the left
   - Set the compare branch to your Lovable branch using the dropdown on the right
   - Review the pull request preview which shows you:

Able to merge. These branches can be automatically merged.
Showing 15 changed files with 234 additions and 67 deletions.

```
Able to merge. These branches can be automatically merged.
Showing 15 changed files with 234 additions and 67 deletions.
```

1. Examine the code changes in detail: wp:list /wp:list
   - Scroll through the "**Files changed**" tab to see exactly what modifications were made
   - Look for critical changes like: wp:list /wp:list
     - Database configuration updates
     - New component additions
     - Styling modifications
     - API endpoint changes
   - Add comments on specific lines if you notice issues that need attention
2. Add a descriptive pull request title and description: wp:list /wp:list
   - Title example: "Deploy latest Lovable updates - authentication and UI improvements"
   - Description example:

This PR includes the following updates from Lovable:

- New user authentication system
- Improved responsive design
- Database connection optimizations
- UI component updates

Ready for production deployment.

```
This PR includes the following updates from Lovable:

- New user authentication system
- Improved responsive design
- Database connection optimizations
- UI component updates

Ready for production deployment.
```

1. Merge the pull request once you're satisfied with the changes: wp:list /wp:list
   - Click "**Merge pull request**" (green button)
   - Choose your merge strategy: wp:list /wp:list
     - **Create a merge commit**: Preserves the branch history
     - **Squash and merge**: Combines all commits into one clean commit
     - **Rebase and merge**: Replays commits without creating a merge commit
   - Click "**Confirm merge**" to complete the process
2. Monitor the automatic deployment that triggers after merging: wp:list /wp:list
   - Navigate to the "**Actions**" tab immediately after merging
   - Click on the latest workflow run that should be starting
   - Watch the deployment progress in real-time:

Checkout code
Setup Node.js environment  
Install dependencies
Build React application
Setup SSH key for deployment
Deploy to InMotion Hosting

```
Checkout code
Setup Node.js environment  
Install dependencies
Build React application
Setup SSH key for deployment
Deploy to InMotion Hosting
```

1. Verify deployment success by checking your live website: wp:list /wp:list
   - Visit your domain in a web browser
   - Test key functionality that was updated
   - Check browser console for any JavaScript errors
   - Test on mobile devices if responsive changes were made

### Alternative: Command Line Merge Process

If you prefer working from the command line, you can merge branches locally:

1. Clone your repository if you haven't already:

git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name

```
git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name
```

1. Fetch all branches from your remote repository:

git fetch origin

```
git fetch origin
```

1. List all branches to see your available branches:

git branch -a

```
git branch -a
```

1. Output:

* main
  remotes/origin/main
  remotes/origin/lovable

```
* main
  remotes/origin/main
  remotes/origin/lovable
```

1. Switch to your main branch:

git checkout main

```
git checkout main
```

1. Pull the latest changes from the remote main branch:

git pull origin main

```
git pull origin main
```

1. Merge the Lovable branch into main:

git merge origin/lovable

```
git merge origin/lovable
```

1. If the merge is successful, you'll see:

Auto-merging src/components/UserProfile.js
Auto-merging src/styles/main.css
Merge made by the 'recursive' strategy.
15 files changed, 234 insertions(+), 67 deletions(-)
create mode 100644 src/components/NewFeature.js

```
Auto-merging src/components/UserProfile.js
Auto-merging src/styles/main.css
Merge made by the 'recursive' strategy.
15 files changed, 234 insertions(+), 67 deletions(-)
create mode 100644 src/components/NewFeature.js
```

1. Push the merged changes to trigger deployment:

it push origin main

```
it push origin main
```

1. Handle merge conflicts if they occur:

# If you see a message like:
# Auto-merging src/config/database.js
# CONFLICT (content): Merge conflict in src/config/database.js
# Automatic merge failed; fix conflicts and then commit the result.
# Edit the conflicted files to resolve conflicts
nano src/config/database.js

# Look for conflict markers and resolve them:
# <<<<<<< HEAD
# Your current code
# =======
# Lovable's code
# >>>>>>> origin/lovable
# After resolving conflicts, add the files
git add src/config/database.js

# Complete the merge
git commit -m "Merge lovable branch with conflict resolution"

# Push the changes
git push origin main

```
# If you see a message like:
# Auto-merging src/config/database.js
# CONFLICT (content): Merge conflict in src/config/database.js
# Automatic merge failed; fix conflicts and then commit the result.
# Edit the conflicted files to resolve conflicts
nano src/config/database.js

# Look for conflict markers and resolve them:
#