Lesson 3 Connecting to GitHub Repo and Automate Deployment

Deploy via Vercel for Git

Step 1. Vite React App Ready for Production

• Tested and Error-Free: ensure your app is thoroughly tested and free of errors in your development environment (VS Code).

• Production Build: Vercel will automatically build your app, but it's good practice to ensure you can create a production build locally. In your project's root directory, run:

  npm run build

  • This will create an optimized production build of your app in a dist folder.

Step 2. Git Repository

• Git Version Control: Your project must be under Git version control. This is the foundation for deploying with Vercel for Git.

• Remote Git Repository: You need a remote Git repository to host your code. Vercel supports these:

  • GitHub

  • GitLab

  • Bitbucket

Here's a step-by-step procedure on how to push your local Vite React app code to a remote Git repository on GitHub:

1. Create a Repository on GitHub

• Go to the GitHub website (https://github.com/) and log in to your account.

• Click the "+" button in the top right corner and select "New repository".

• Give your repository a name (e.g., "my-react-vite-app").

• You can add a description if you want.

• Choose whether you want the repository to be public or private.

• Important: Do NOT initialize the repository with a README, .gitignore, or license file. We'll handle this locally.

• Click "Create repository".

• GitHub will provide you with a URL for your new repository. Copy this URL, you'll need it later.

2. Initialize Git Locally

• Open your terminal in VS code or command prompt.

• Navigate to the root directory of your Vite React app project using the cd command.

• Initialize a Git repository in your project root directory:

  git init

3. Stage Your Files

• Add the files you want to commit to the repository. To add all files, use:

  git add .

• To add specific files, use:

  git add <file1> <file2> ...

4. Commit Your Changes

• Commit the staged files with a descriptive message:

  git commit -m "Initial commit of Vite React app"

5. Link to the Remote Repository

• Connect your local repository to the remote repository on GitHub using the URL you copied earlier:

  git remote add origin <repository_url>
  git branch -M main

  • Replace <repository_url> with the URL of your GitHub repository.

  • origin is a common alias for the remote repository.

6. Push Your Code

• Push your local commits to the remote repository:

  git push -u origin main

  • -u sets the upstream branch, so in future, you can just use git push.

  • main is the default branch name. If you are using master, replace main with master.

7. Verify on GitHub

• Go to your repository on GitHub and refresh the page. You should now see your Vite React app code in the repository.

Step 3. Vercel Account

• Vercel Account: You'll need an account on Vercel. You can sign up using your Git provider (GitHub, GitLab, or Bitbucket) or email.

In summary: You need your React Vite application code to be in a Git repository on GitHub, GitLab, or Bitbucket, and you need a Vercel account.

• Create Project on Vercel and Import Git Provider's Repository on Vercel:

  • Go to your Vercel dashboard (login in).

  • Click "Add New Project from dropdown menu..." -> "Project".

  • Select your Git provider and choose the repository you pushed your code to.

  • Configure the project settings:

    • Vercel usually auto-detects Vite, so the settings should be correct. Ensure the "Framework Preset" is set to "Vite".

    • The "Root Directory" should be the root of your project.

  • Click "Deploy".

  • Vercel will build and deploy your application.

Important Considerations

• Environment Variables: If your React app uses environment variables, you can set them in your Vercel project settings.

• Routing: For Single Page Applications (SPAs) like React apps, you might need to create a vercel.json file in your project's root with a rewrite rule to handle client-side routing: