Deploy Vite app on Github pages using Github Actions

Deploy your Vite app like Vue , React or ... on Github pages using Github Actions
github.com/ben... → benixal.github...
github.com/ben... → benixal.github...
00:00:10 create an app (Vue)
00:00:54 deploy on github.io
00:08:15 deploy on root domain

[@dai180293]

Keep up the good work! Just incase anyone was wondering, if your branch is master not main then you need to also change that in the workflow ( line 7 ) if you copied the workflow from vite 👍

[@gorangharib2427]

*Thanks man I just learned from your video how to deploy an vite app on github pages! Thank you so much*

[@benixal]

Glad it helped!

[@Uddeshya-dev]

thanks man i find the best turtorial on the internet

[@benixal]

Thank you so much! I'm glad you found the tutorial helpful.

[@rherik]

This video saved me. Very thank u

[@benixal]

Glad it helped

[@farazk9729]

Thank you so much; you're a lifesaver!

[@edoris9021]

IT WORKED 🎉🎉!!!
Thank you so much, afrer losing my mind these last few days ive finally fkund the solution!!!

[@benixal]

You're welcome! 🎉 I'm glad my video was able to provide a solution for you!

[@aiatiiazalieva2148]

Thank you so much! It's really helpful!

[@benixal]

You're welcome! Glad it was helpful!

[@lalankeathauda7414]

Thanks a lot. You teach to the point..

[@furknhelim]

Thank you so much. This helped me a lot

[@benixal]

Glad it helped!

[@טלעמית-מ9כ]

Thenks! this is great

[@thejask4752]

is this work when we use axios and fetch an API??

[@benixal]

Yes, it should work, but remember to check CORS
en.wikipedia.org/wiki/Cross-origin_resource_sharing

[@HaykVoskanyan-p5d]

Thank you very much bro👌👌👌👌

[@portalgamestv4417]

Thank you! very helpful

[@EmnaGhzayel]

Very useful thank you!

[@benixal]

You're welcome! Glad it was helpful!

[@BuhuuRecords]

Do you have idea maybe why i don't have nothing in my workflow while i did everything like in this tutorial?

[@benixal]

If you don't have anything in your workflow, it's possible that you forgot to include the ".yml" extension when creating the deploy.yml file. Make sure the file is named "deploy.yml" and contains the necessary configuration for your deployment. Let me know if you have any other questions.

[@BuhuuRecords]

@@benixal I remembered the extension, the only thing I have been able to do is "deploy static content to pages" but it is not ideal....

[@benixal]

Another possible cause for the issue you're facing is forgetting to run "npm install" before deploying your application. This can result in an error message such as "Dependencies lock file is not found," which will cause the operation to halt.

[@BuhuuRecords]

@@benixal I read somewhere that the main base url should be '/repo' and currently according to the documentation I have '/repo/' but I don't know if this could be the cause of the error

[@benixal]

Please refer to the 03:23 in the video where I explain the base URL configuration. Additionally, you can check the following link for the contents of the vite.config.js file in your repository: github.com/benixal/myapp/blob/main/vite.config.js (which is for: benixal.github.io/myapp/) This file should provide insight into the base URL configuration and help determine if it could be the cause of the error you're experiencing.

[@tulanunjiangpradit6913]

Thank you very much, your clip is very helpful

[@benixal]

Thank you! I'm glad to hear that the video was helpful to you.

[@rafiqalmujahideen7926]

Thank you so much, it's save my lifeeee

[@benixal]

Glad it helped! 🙌

[@hirusha_dinujaya]

Thank you very much

[@benixal]

You are welcome

[@maelstrom57]

Life-saver!

[@benixal]

Happy to help! 🚀

[@ahmedallawi8638]

Thank you very much, but there is still a problem, which is that when I'm not on the home page and reload, a 404 error appears

[@benixal]

You're welcome Ahmed!
just add these lines (after the `run: npm run build`) to your deploy.yml file:
- name: fix 404
run: cp ./dist/index.html ./dist/404.html
Example: github.com/benixal/my-vue-app/blob/main/.github/workflows/deploy.yml
Demo:
benixal.github.io/my-vue-app/
benixal.github.io/my-vue-app/foods
benixal.github.io/my-vue-app/profile

[@ahmedallawi8638]

@@benixal it works, thanks a bunch🌹🌹🌹

[@eliasjunior7430]

Thanks for help Bro! Have someone limit for number of pages?

[@benixal]

Thanks for watching! Regarding your question, could you please clarify what you mean by 'limit for the number of pages'?

[@eliasjunior7430]

@@benixal Can I have multiple pages for each of my projects?

[@benixal]

Yes, you can have multiple pages for your projects on GitHub Pages. It supports both single-page applications (SPAs) and multi-page applications (MPAs). So, depending on your project's requirements, you can deploy either a single page with client-side routing (SPA) or a traditional multi-page website (MPA)

[@coding-in]

Can use nuxt?

[@useless_comment]

I have deployed but it is showing the read me file as hosted file

[@shivanshuhere]

Thanks man ❤

[@benixal]

You're welcome! 🚀

[@MRmithon]

helpful video

[@benixal]

Glad it helped

[@zayedumer4028]

You are the goat

[@benixal]

Thank you, I appreciate that! 🙏

[@vanshikaagarwal6502]

Thanks a lot!!!

[@benixal]

You're welcome! I'm glad the video was helpful for you.

[@emongtindero]

thanks

[@benixal]

You're welcome!

[@ahmadg3822]

its giving empty page

[@benixal]

Check the console logs

[@HSGG_]

10wpm lol

[@benixal]

Watch it at 2x speed! 😄

[@mcryt_malayalam_minecraft]

Run npm run build
> nodejs-chat-frontend@0.0.0 build
> vite build
sh: 1: vite: Permission denied
Error: Process completed with exit code 126.

[@explo1t261]

got the same problem, did you manage to solve it?

[@jasonc5947]

Promo_SM 😅