Host Lovable.dev Project on github pages

Deploying a Lovable.dev Project to GitHub Pages This tutorial is without a custom free domain. If I get good responses on this, I’ll make a full blog from start to end! Here is the link to my portfolio, generated by lovable.dev and hosted on GitHub Pages Prerequisites Before we begin, ensure you have the following: Node.js (version 18 or higher) installed on your system. Basic knowledge of Git and GitHub. Step 1: Connect lovable.dev with GitHub Click View on GitHub. Clone this private project locally on your machine. Open a terminal in your cloned repository location. First, we are going to remove all Git files. For Windows, type: Remove-Item -Recurse -Force .git # Check if Git files still exist git status This will remove all Git-related files from your project. Now we can try running the project locally: npm install # Install all dependencies npm run build npm run dev 6.Make any changes to the code if needed. Step 2: Create a New Repo for GitHub Pages and Update Config Create a new repository, say coderatul-portfolio, on GitHub. Clone this newly created repository to your machine. Copy and paste all files from your original project (where Git was removed) to this new repo coderatul-portfolio. You may now delete the initially cloned repository, as we have all source code where we need it. Update vite.config.ts The base property in the Vite configuration file (vite.config.ts) must be set to the repository name for GitHub Pages. This ensures that all asset paths are correctly resolved. Example: import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; import path from "path"; import { componentTagger } from "lovable-tagger"; export default defineConfig(({ mode }) => ({ server: { host: "::", port: 8080, }, plugins: [ react(), mode === 'development' && componentTagger(), ].filter(Boolean), resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, base: '/coderatul-portfolio/' // Replace with your GitHub repo name })); Step 3: Push Code to GitHub and Set Up Workflow via GitHub Actions Push the changes to your repository say coderatul-portfolio here: git status git add . git commit -m "adding project" git push -u origin main Grant access for workflow: Visit https://github.com///settings/actions, scroll down, make the necessary changes, and save. In your repository, go to Settings > Pages Select GitHub Actions Then select GitHub Pages Jekyll and click Configure Edit the workflow Modify workflow.yaml as follows: name: Deploy to GitHub Pages on: push: branches: - main permissions: id-token: write contents: write pages: write jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: 18 - name: Vite GitHub Pages Deployer uses: skywarth/vite-github-pages-deployer@v1.5.0 with: public_base_path: /coderatul-portfolio/ # Replace with your repository name build_path: ./dist install_phase_node_env: dev build_phase_node_env: production package_manager: npm artifact_name: github-pages debug_mode: false working_path: ./ Step 4: Verify the Deployment Make appropriate changes, paste the modified workflow.yaml, commit it, and the workflow will start under the Actions tab. Under Settings > Pages, you’ll see a live link to the deployed project. What is a Workflow? A workflow automates the process: any time you push code, GitHub Actions will automatically build and deploy your project. This is part of CI/CD. Common Issues and Fixes 1. Blank Page After Deployment Make sure the base property in vite.config.ts is correctly set to /repository-name/. Clear browser cache or use incognito mode. 2. 403 Permission Errors Ensure the GITHUB_TOKEN in your workflow has the correct permissions: permissions: id-token: write contents: write pages: write 3. Asset Paths Not Resolving Double-check the base property in vite.config.ts and ensure it matches your repo name. Conclusion Deploying a lovable.dev project to GitHub Pages is simple with the right setup. By setting the base path in vite.config.ts and automating deployment using GitHub Actions, you can publish your project effortlessly.

Remove-Item -Recurse -Force .git
# Check if Git files still exist
git status

npm install       # Install all dependencies
npm run build
npm run dev

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";

export default defineConfig(({ mode }) => ({
  server: {
    host: "::",
    port: 8080,
  },
  plugins: [
    react(),
    mode === 'development' &&
    componentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  base: '/coderatul-portfolio/' // Replace with your GitHub repo name
}));

git status
git add .
git commit -m "adding project"
git push -u origin main