Introduction:

Welcome to this quick guide on deploying your Vite.js application to Netlify using GitHub. In this tutorial, we'll walk you through the straightforward steps of connecting your GitHub repository to Netlify, enabling seamless and automated deployment. Let's get started, so you can have your Vite app up and running on Netlify in just a few minutes.

Create a vite project:

• If you haven't set up a Vite project yet, initiate one with the following command. Feel free to choose any template—whether it's for React, Vanilla JavaScript, or another framework. In this tutorial, we'll use the Vue template, but the process remains consistent regardless of the chosen template.

npm create vite@latest my-vite-app -- --template vue
cd my-vite-app
npm install
npm run dev
          

Create a new repository on github:

After creating repository go Inside your project and run following commands to push code on repository

git init
git remote add origin https://github.com/username/your-repo.git
git add .
git commit -m "initial commit"
git push origin master
          

Install Netlify CLI:

Install the netlify CLI and login using following commands.

npm install -g netlify-cli
netlify login
          

1. Inside you project directory.

netlify init
          

Explaination: This command guides you through the initialization process, prompting for information such as build settings, publish directory, and other configuration options. It establishes the necessary connections between your local project and Netlify, preparing it for deployment.

Access your Website:

Replace "websitename" with your website name.

Conclusion:

that's it! You have successfully deployed your vite App to netlify using GitHub. Now you can share the link with others, and your app will be publicly accessible.

Related Terms:

• How To Deploy Vue App to Netlify