Wordpress supported for Telkom University

Publikasikan Aplikasi Web React Anda yang Dibuat ke InMotion Hosting Shared Hosting melalui GitHub

Publikasikan Aplikasi Web React Anda yang Dibuat ke InMotion Hosting Shared Hosting melalui GitHub

—

by

PuTI
in
How to Publish Your Lovable Created React WebApp to InMotion Hosting via GitHub Hero Image

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, 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 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 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'll need to choose which account or organization should host your project's repository.

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.

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 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

  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

  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

  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:
    • 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:
  1. You’ll see prompts like this:
  1. View your public key by running:
  1. This will display your public key, which looks like:
  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:
  1. If successful, you’ll see:
  1. Remember the SSH connection format for InMotion shared hosting:

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:
    • 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:
    • 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:
  1. Grant permissions to your user by scrolling to the “Add User to Database” section:
    • 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:
    • 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:
    • 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:
    • .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:
  1. To PostgreSQL configuration:
  1. Update environment variables if your application uses them. Create or modify your .env.production file:
  1. Test your database connection locally before deploying:
  1. Commit your configuration changes to your GitHub repository:
  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:
  1. Review the workflow configuration to understand what each step does:
    • 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:
    • Name: INMOTION_HOST
    • Value: yourdomain.com (replace with your actual domain)
    • Click “Add secret“
  4. INMOTION_USERNAME Secret:
    • Name: INMOTION_USERNAME
    • Value: your_cpanel_username (found in your cPanel login details)
    • Click “Add secret“
  5. INMOTION_SSH_KEY Secret:
    • 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:
    • 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:
  1. Break down the rsync options:
    • -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:
    • 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:
  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:
  1. Check the deployment step output for successful file transfer:
  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:
    • 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:
    • Click on the Lovable branch to switch to it
    • Examine recent commits by clicking on the commit history. You’ll see entries like:
  • 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:
    • 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:
  1. Examine the code changes in detail:
    • Scroll through the “Files changed” tab to see exactly what modifications were made
    • Look for critical changes like:
      • 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:
    • Title example: “Deploy latest Lovable updates – authentication and UI improvements”
    • Description example:
  1. Merge the pull request once you’re satisfied with the changes:
    • Click “Merge pull request” (green button)
    • Choose your merge strategy:
      • 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:
    • 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:
  1. Verify deployment success by checking your live website:
    • 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:
  1. Fetch all branches from your remote repository:
  1. List all branches to see your available branches:
  1. Output:
  1. Switch to your main branch:
  1. Pull the latest changes from the remote main branch:
  1. Merge the Lovable branch into main:
  1. If the merge is successful, you’ll see:
  1. Push the merged changes to trigger deployment:
  1. Handle merge conflicts if they occur:

Setting Up Automated Merges (Optional)

For a more streamlined workflow, you can configure automatic merging from the Lovable branch to main under certain conditions. This requires setting up additional GitHub Actions workflows that monitor the Lovable branch and create pull requests automatically.

However, this approach requires careful consideration. Automatic merges mean that Lovable’s changes deploy immediately without human review. This can be convenient for solo developers but may not be appropriate for applications where code review is important.

If you choose to implement automatic merges, consider adding automated testing to your workflow. This ensures that code changes pass basic functionality tests before being deployed to your live website.

Configuring Your React App for Production

Your React application needs specific configuration adjustments to work correctly in the InMotion hosting environment. These changes ensure that your app loads properly, handles routing correctly, and connects to your production database.

Building for Production

React applications need to be built for production to achieve optimal performance and compatibility. Your GitHub Actions workflow handles this through the npm run build command, which creates optimized, minified files ready for deployment.

Verify that your package.json file includes the correct build script. Most React applications use react-scripts build or a similar command. If your Lovable project uses a different build system, adjust your workflow accordingly.

The build process creates a build directory containing all the files needed for your live website. These files are what get deployed to your InMotion hosting account, not your source code. This means your live website contains only the compiled, optimized version of your application.

Handling Client-Side Routing

If your React application uses client-side routing (React Router), you’ll need to configure your web server to handle route requests correctly. When users navigate to different pages in your app, the web server needs to serve your React application instead of trying to find physical files.

Create a .htaccess file in your project’s public directory with the following content:

This configuration tells Apache to serve your index.html file for any request that doesn’t match an existing file. This allows React Router to handle navigation on the client side while ensuring that direct links to your app’s routes work correctly.

Environment Variables and Configuration

Your production application needs a different configuration than your development environment. Database connections, API endpoints, and other settings should be optimized for your InMotion hosting environment.

React applications typically use environment variables for configuration. Create a .env.production file in your project root with production-specific settings. These variables will be used automatically when your application is built for production.

Common production environment variables include:

  • Database connection strings
  • API endpoint URLs
  • Feature flags or configuration options
  • Third-party service keys

Remember that React environment variables must be prefixed with REACT_APP_ to be available in your application code. Variables without this prefix are not included in the production build.

Optimizing Performance

InMotion’s shared hosting environment performs well, but you can optimize your React application for even better performance. Enable gzip compression by adding appropriate headers to your .htaccess file:

This configuration compresses your application files before serving them to users, reducing load times and bandwidth usage.

Troubleshooting Common Deployment Issues

Even with careful setup, you might encounter issues during deployment. Here are the most common problems and their detailed solutions.

Build Failures

  1. Identify build failure symptoms by checking your GitHub Actions workflow logs. You’ll see error messages like:
  1. Check for missing dependencies by comparing your local package.json with your repository:
  1. Fix missing dependencies by installing them locally and updating your repository:
  1. Resolve Node.js version conflicts by checking your local Node.js version:
  1. Test the build locally before pushing to GitHub:

Deployment Connection Issues

  1. Diagnose SSH connection problems by testing your connection manually:
  1. SSH error – Connection refused:

Solution: Verify your domain name and ensure SSH is enabled in cPanel. 

  1. SSH error – Permission denied:

Solution: Check your SSH key configuration:

  1. Fix GitHub Actions SSH key issues:
  1. Verify rsync command syntax by testing it manually:

File Permission Problems

  1. Check file permissions on your hosting account:

Expected output:

  1. Fix incorrect file permissions:
  1. Update your GitHub Actions workflow to set permissions automatically:

Database Connection Errors

  1. Test database connectivity from your hosting account:

Successful connection output:

  1. Database Error – Connection refused:

Solution: Check that PostgreSQL is running and your database exists in cPanel.

  1. Database Error – Authentication failed:

Solution: Verify your database username and password in cPanel.

  1. Test database connection from your application:
  1. Update your application’s database configuration with the correct connection parameters:

Advanced Troubleshooting Commands

  1. Monitor your deployment in real-time:
  1. Debug SSH connection issues:
  1. Verify your deployed files:

Updating Your Deployed Application

Once your initial deployment is complete, you’ll need to manage ongoing updates as you continue developing your application in Lovable. This process becomes routine once you understand the workflow.

Development Workflow

Your typical development cycle will involve making changes in Lovable, which automatically sync to your Lovable branch on GitHub. When you’re ready to deploy updates, you’ll merge the Lovable branch into your main branch, triggering an automatic deployment.

Monitor your GitHub repository to see when Lovable pushes new changes. You’ll receive notifications about commits, and you can review the changes before deciding to deploy them.

Consider implementing a staging environment where you can test changes before deploying to your live website. This gives you an additional layer of quality control and helps catch issues before they affect your users.

Rollback Procedures

If a deployment causes issues on your live website, you need a quick way to revert to a previous version. GitHub maintains a complete history of your code, making rollbacks straightforward.

To rollback, identify the last known good commit in your main branch. Create a new branch from this commit, then merge it back into main. This will trigger a new deployment with your previous code.

Alternatively, you can revert specific commits using GitHub’s interface. Navigate to the problematic commit and click “Revert” to create a new commit that undoes the changes.

Monitoring Deployments

Keep track of your deployments by monitoring the GitHub Actions workflow results. Failed deployments should be investigated immediately to prevent your website from becoming out of sync with your code.

Set up notifications for workflow failures so you’re alerted when deployments don’t complete successfully. GitHub can send email notifications or integrate with Slack and other communication tools.

Consider adding health checks to your deployment workflow. These can verify that your website is accessible and functioning correctly after each deployment.

High-Level Process Summary

Here’s the complete process for deploying updates to your Lovable application:

Initial Setup (One-Time Configuration)

  1. Connect Lovable to GitHub:
    • Access your Lovable project editor
    • Click “GitHub” → “Connect to GitHub” in the top-right corner
    • Authorize the Lovable GitHub App with appropriate permissions
    • Select your GitHub account or organization
    • Click “Create Repository” to establish the connection
    • Verify the repository appears in your GitHub account
  2. Configure InMotion cPanel Git Repository:
    • Log into your InMotion cPanel account
    • Navigate to “Files” → “Git Version Control”
    • Click “Create” and toggle “Clone a Repository”
    • Enter your GitHub repository’s HTTPS clone URL
    • Set repository path (e.g., public_html/your-app-name)
    • Provide a descriptive repository name
    • Click “Create” and wait for completion
  3. Set up SSH authentication:
    • Generate SSH key pair on your local machine: ssh-keygen -t rsa -b 4096
    • Copy your public key: cat ~/.ssh/id_rsa.pub
    • Add the public key to cPanel under “SSH Access” → “Manage SSH Keys”
    • Test SSH connection: ssh -p 2222 [email protected]
  4. Create PostgreSQL database (if needed):
    • Navigate to “Databases” → “PostgreSQL Databases” in cPanel
    • Create new database with descriptive name
    • Create database user with strong password
    • Grant all privileges to the user for the database
    • Update your application’s database configuration
  5. Configure GitHub Actions workflow:
    • Create .github/workflows/deploy.yml in your repository
    • Set up the complete workflow with build and deployment steps
    • Configure repository secrets in GitHub Settings:
      • INMOTION_HOST: Your domain name
      • INMOTION_USERNAME: Your cPanel username
      • INMOTION_SSH_KEY: Your private SSH key content
      • INMOTION_PATH: Path to your web directory
  6. Test the complete pipeline:
    • Make a test commit to your main branch
    • Monitor the GitHub Actions workflow execution
    • Verify files are deployed correctly to your hosting account
    • Test your live website functionality

Regular Update Process

  1. Develop in Lovable:
    • Use Lovable’s AI-powered development environment to make changes
    • Add new features, fix bugs, or modify your application
    • Lovable automatically commits changes to your GitHub repository’s development branch
  2. Monitor GitHub repository:
    • Check your GitHub repository for new commits from Lovable
    • Review commit messages to understand what changes were made
    • Example commit messages you might see:
  1. Review changes before deployment:
    • Navigate to your repository and switch to the Lovable branch
    • Click on recent commits to see detailed code changes
    • Look for potential issues or conflicts
    • Consider testing changes in a staging environment if available
  2. Create and review pull request:
    • Click “Pull requests” → “New pull request”
    • Set base branch to “main” and compare branch to your Lovable branch
    • Review the “Files changed” tab to see all modifications
    • Add descriptive title and comments
    • Example pull request descriptions:
  1. Merge and deploy:
    • Click “Merge pull request” after review
    • Choose merge strategy (merge commit, squash, or rebase)
    • Click “Confirm merge” to complete the process
    • GitHub Actions automatically triggers deployment workflow
  2. Monitor deployment progress:
    • Navigate to “Actions” tab immediately after merging
    • Click on the latest workflow run
    • Watch each step complete:
  1. Verify deployment success:
    • Visit your live website URL
    • Test all updated functionality
    • Check browser console for JavaScript errors
    • Test responsive design on different devices
    • Verify database connections are working
  2. Handle deployment failures (if they occur):
    • Check GitHub Actions logs for error messages
    • Common issues and quick fixes:
      • Build failures: Check package.json dependencies
      • SSH connection issues: Verify SSH keys and port 2222
      • Permission errors: Check file permissions in deployment script
      • Database errors: Verify connection parameters

Emergency Rollback Process

  1. Identify the issue:
    • Determine if the problem is with the latest deployment
    • Check error logs and user reports
    • Access your website to confirm the issue
  2. Perform quick rollback:
    • Navigate to your GitHub repository
    • Go to “Actions” tab and find the last successful deployment
    • Click on “Re-run jobs” to redeploy the previous working version
    • Alternatively, revert the problematic commit:
  1. Verify rollback success:
    • Check that your website is functioning correctly
    • Test critical functionality
    • Monitor for any remaining issues

Ongoing Maintenance Commands

  1. Check deployment status:
  1. Monitor GitHub Actions usage:
    • Check your GitHub Actions usage in repository settings
    • Review workflow run history for patterns
    • Optimize workflows if needed to reduce build times
  2. Database maintenance:
  1. Update dependencies periodically:

Performance Optimization Checklist

  1. Monitor website performance:
    • Use Google PageSpeed Insights to test your site
    • Check Core Web Vitals metrics
    • Monitor loading times after each deployment
  2. Optimize build process:
    • Enable npm cache in GitHub Actions (already configured in the workflow)
    • Consider using build caching for faster deployments
    • Optimize image assets and file sizes
  3. Database optimization:
    • Review database query performance
    • Add indexes for frequently queried fields
    • Monitor database connection pool usage

Conclusion and Next Steps

You’ve successfully created a robust deployment pipeline that connects Lovable’s AI-powered development environment with professional hosting through InMotion Hosting. This setup gives you the benefits of rapid development while maintaining the reliability and control needed for production applications.

Your deployment workflow now automatically syncs changes from Lovable to GitHub, builds your React application for production, and deploys updates to your InMotion Hosting account. The database migration from Supabase to PostgreSQL provides you with full control over your application’s data layer.

Moving forward, you can continue developing in Lovable while having confidence that your changes will be deployed reliably to production. The version control integration ensures you have a complete history of your application’s development and the ability to roll back changes if needed.

Consider expanding your deployment pipeline with additional features like staging environments for testing changes before production deployment, automated testing to catch issues before they reach users, and monitoring tools to track your application’s performance and uptime.

The foundation you’ve built supports scaling your application as your needs grow. You can add team members to your development process, implement more sophisticated database features, and take advantage of InMotion Hosting’s scalability options as your user base expands.

This deployment approach represents a professional development workflow that bridges the gap between AI-assisted development and production hosting, giving you the tools to build and maintain sophisticated web applications efficiently and reliably.

Ready to take your web development to the next level? InMotion Hosting’s robust shared hosting platform provides the perfect foundation for your Lovable-created applications. With full Git integration, PostgreSQL support, and expert migration assistance, you can focus on building great applications while we handle the hosting infrastructure.

source

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Discover more from Wordpress supported for Telkom University

Subscribe now to keep reading and get access to the full archive.

Continue reading