Deploy Vite app on Github pages using Github Actions

hey everyone this is Ben in this video I'll show you how to deploy a with app like react view or others and GitHub Pages using GitHub actions let's get started to start let's create an app using bit select your preferred framework I select View oh yeah go to the project directory run npm installed and npm run Dev to see it on local okay just a simple view app alright let's deploy it on GitHub first go to the GitHub website and log in into your account create a new Repository and make sure it is public okay first here in the project directory run get in it to create a git Repository and add all files to the staging area and commit set the branch name to Main or whatever you want then add the remote if you are not familiar with adding remotes and connecting local repository to a remote repository on GitHub there is a video on this channel that can help and finally push it all right here is our app source code alright let's see the wheat documentation for deployment on weekjs.dev go to the deploying aesthetic site section and click on GitHub pages first we need to set the correct base in width.config.js if you want to deploy your app on the root domain of your GitHub Pages site you need to set the base to a single forward slash but for now I want to deploy it on my GitHub Pages site slash repository name so I must set the base to a forward slash followed by repository name and I will tell you about the root domain in the next few minutes go to your project directory and open bit.config.js and here set the base to forward slash followed by the repository name save it okay edit and commit and push it to the GitHub next we need to go to GitHub pages settings in the repository settings then set the source of deployment as GitHub actions and create a workflow here is the workflow just copy it go to repository settings scroll down and from the left menu click on pages and here set the source to GitHub actions then here click on create your own set a name for it deploy.yml and delete all the sample content and paste the copied workflow code here then commit it okay let's see what will happen go to the actions tab and wait a few seconds and you can see that it's working in progress done our web app is now available here at my github.io slash my app and if I want to update my app first let's pull to update our local Repository alright let's update the main page I add a simple HTML tag here save it and before commit and push let me put the action step here to see live what will happen when we push thank you add changes commit and push you can see that it will automatically start build and deploying refresh the page and okay now let's see how to deploy an app on the root domain for deploying on the root domain you need to create a repository with this name your GitHub user name that github.io okay let's create another app this time I choose react go to the project directory npm install and now we just need to set the base to a single forward slash go to the project directory and open wheat.config.js set the base single forward slash and in the project directory create a repository at all and okay commit set the branch add the remote and push it all right go to settings pages set the source to GitHub actions create a workflow set the file name deployed out by ml copy this and paste it here commit and wait a few seconds all right here is our app under root domain

Channel: benixal

Views: 8,534

Keywords: vite, vitejs, github, github pages, deploy on github, vue, react, javascript, javascript framework, workflow, yml, deploy.yml, vite.config.js, github.io, deploy on github.io, github repository, github repo, git push, deploy on push, github actions, git init, git, vite deploy, deploy vue, deploy react

Id: dR9Swhw0L50

Length: 11min 40sec (700 seconds)

Published: Sat Apr 29 2023