- 4
- 26 796
Maciek Sitkowski
เข้าร่วมเมื่อ 17 ต.ค. 2015
Deploy Vite app to GitHub Pages using GitHub Actions
.
🎬 Chapters
0:00 Create Vite project
0:45 Initialize git repository
1:05 Create GitHub repository
2:00 Add deployment workflow
3:33 Inspect deployment workflow on GitHub
4:22 Add write permission to fix failed workflow
5:45 Enable GitHub pages to host the app
6:47 Investigate incorrectly deployed app
7:38 Update Vite config to fix asset links
8:25 Confirm that the app is up and running
☑️ Step-by-step instructions
github.com/sitek94/vite-deploy-demo/tree/main#readme
⚙️ Source code
github.com/sitek94/vite-deploy-demo
🚀 Deployed project
sitek94.github.io/vite-deploy-demo
🔗 My links
macieksitkowski.com
github.com/sitek94
🏞 Thumbnail Photo by @sigmund on Unsplash:
unsplash.com/photos/4CNNH2KEjhc
🎬 Chapters
0:00 Create Vite project
0:45 Initialize git repository
1:05 Create GitHub repository
2:00 Add deployment workflow
3:33 Inspect deployment workflow on GitHub
4:22 Add write permission to fix failed workflow
5:45 Enable GitHub pages to host the app
6:47 Investigate incorrectly deployed app
7:38 Update Vite config to fix asset links
8:25 Confirm that the app is up and running
☑️ Step-by-step instructions
github.com/sitek94/vite-deploy-demo/tree/main#readme
⚙️ Source code
github.com/sitek94/vite-deploy-demo
🚀 Deployed project
sitek94.github.io/vite-deploy-demo
🔗 My links
macieksitkowski.com
github.com/sitek94
🏞 Thumbnail Photo by @sigmund on Unsplash:
unsplash.com/photos/4CNNH2KEjhc
มุมมอง: 18 573
วีดีโอ
Habit Tracker - Local Development Setup
มุมมอง 8392 ปีที่แล้ว
Instructions that I'm following in the video: github.com/sitek94/habit-tracker-app#getting-started My previous video about Habit Tracker: th-cam.com/video/zIr_d1ZsIGQ/w-d-xo.html Thumbnail Photo by Arnold Francisca on Unsplash: unsplash.com/photos/f77Bh3inUpE
Resume Builder | How to build a resume | React + CSS
มุมมอง 2.4K3 ปีที่แล้ว
GitHub repository: github.com/sitek94/resume-builder The project was bootstrapped with Create React App: create-react-app.dev Svg icons from React Icons: react-icons.github.io/react-icons/ Thumbnail Photo by Saad Salim on Unsplash: unsplash.com/photos/PqRvLsjD_TU
CS50 Final Project - Habit Tracker - React + Material UI + Firebase
มุมมอง 5K4 ปีที่แล้ว
Link: habit-tracker-293718.web.app/ GitHub repository: github.com/sitek94/habit-tracker CS50's Introduction to Computer Science: www.edx.org/course/cs50s-introduction-to-computer-science
What should I do if the third-party package cannot be parsed during the build?/(ㄒoㄒ)/~~
I've solved it and am now trying to deal with static files
Now the static resource succeeds, but the routing has an error /(ㄒoㄒ)/~~
Really nice!
That worked great, thank you. I appreciate that you attached step-by-step instructions and workflow script. Well done!
Thank you!
the fix for me was giving permission to github action to write, I spent 3 days searching for a solutions why my website not working, and your video is the only one that worked for me by that simple, yet very important thing, thanks a lot 🙏
This is a godsend - thank you
do you still use it as your resume builder?
Djekuje bardzo sir, you saved my nerves
voice not audable
hello sir!! i had a problem running yarn and couldn't run the project
thank you very much, the awesome tutorial
Gratulacje, bardzo ciekawy projekt i świetnie wymyślony ui! 👍
Finally a well explained video of each step and why we are doing it. Thank you so much for the explanation on the wrong asset links! thumb up and bookmarked for future reference
thank you
this looks really cool! is there any chance you can make a video tutorial on how to build this app, after all this time?
i have the same blank page even though i added the baseurl
could it be because i'm using react router?
@@echendukwe1510 I've got another example repo with react router setup, maybe it'll help: github.com/sitek94/football-app
Tried so many times it still not working for me. Just cant figure out what went wrong. 😰
Hey, you can open an issue in my repo on Github and when I have a minute I'll try to take a look
You just saved my day
had trouble with my github actions and this saved. Thank you Maciek Sitkowski
Does this work with Vue Vite? I don't know how to deploy my Vue Vite project on GitHub... Also, it uses a local api that I run myself in the terminal every time. So how would I make that work on GitHub?
Dude you are the best ! I've been trying to solve those errors for days and it worked ! Thank you very much !
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec
What to change if i want to install packages using yarn
Thank you, your tutorial is great and useful, you helped me very much!
thank you very much sir
deploy is waiting for github-pages deployment approval
showing this??
Works flawlessly! Thanks!!!
Works like a charm. Very well explained. Thank you!
Still not working
Hey there, can you send a link to your repo?
Man that thing again does not work... :(
Can you share a link to your repo?
@@macieksitkowski I ditched Github Pages after days ... days trying. I deployed to Netlify, 0 configuration, just added _redirects file and it worked straight out of the box. I saw a freecodecamp article on how to deploy to netlify with create react app not vite.
I get this error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Hey there, can you send a link to your repo?
@@macieksitkowski Hey, ended up switching to create-react-app in the end. Thanks for the content!
how to deploy Vite app with react browser router? CRA has fix in official docs, but Vite doesn't have=(
Do you mean github.com/remix-run/react-router? I'm pretty sure it should work out of the box, I'm using react router in this app github.com/sitek94/football-app and it works fine.
@@macieksitkowski I've got 404 after reloading ...football-app/teams page. It's not what you expect=(
@@amelianceskymusic Ahhh, I see what you mean. Yeah, it was just a demo, so I didn't handle that, but I've fixed it now. Basically, you need to: 1. Create `404.html` which stores the path that you want to access in sessionStorage and then redirects back to `index.html` 2. In `index.html` before loading app script you check sessionStorage if there is something saved, and if so, you update the path and clear the storage You can check my latest commits here: github.com/sitek94/football-app/commits/main Hope it helps!
awesome man!!!
Of all the tutorials, this one worked flawlessly
can you do a video on how to deploy with pnpm ?
Hey Mike, I've found a repo where I'm using pnpm: github.com/sitek94/football-app/blob/main/.github/workflows/deploy.yml It's all pretty much the same, except for: ``` - name: Setup pnpm uses: pnpm/action-setup@v2.2.2 with: version: 7 - name: Setup Node uses: actions/setup-node@v2 with: node-version: 18.2 cache: 'pnpm' - name: Install dependencies run: pnpm install ``` It's using this action to setup pnpm: github.com/pnpm/action-setup Let me know if it's of any help, and if not I'll create some example. Cheers
So how to config when my vite app has routing
Hey, you can check this app for more advanced example with routing: github.com/sitek94/football-app
How can I upload it so people can use it
Thank You ❤
your awesome thank you man followed every step and it worked just as you explained
You are a legend my friend. Thanks alot!
Thanks for your video! It worked very well!
Vite's docs for deploying to GitHub Pages: vitejs.dev/guide/static-deploy.html#github-pages Example with a custom domain: github.com/sitek94/vite-deploy-demo-custom-domain
hey Maciek, it worked on demo project.. btw i tried to host a portfolio.. it won't work on it.. just gives a blank page. with a error " Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.".. need bit help to fix this issue
Hey there, can you share a link to your repo?
@@macieksitkowski yes
Did you forget to share it? :D
@@macieksitkowski i hosted it on netlify bro.. im working on a blog .. i ll surely use your help to host it 😃
@@keithprakash9955 Netlify is great, I have my personal website there :) Deploying is also super easy, it's described here: vitejs.dev/guide/static-deploy.html#netlify-with-git
Thank you, works great! :)
You're welcome!
Thanks Maciek, this was helpful! I went with 'actions/upload-pages-artifact@v1' and 'actions/deploy-pages@v1' instead of 'peaceiris/actions-gh-pages@v3' so there's no need to upload/download artifact or use a 'gh-pages' branch.
Hey David, thanks for the tip, I have to check it out!
Thank You very much man
Happy to help, cheers!
Thanks a bunch man, you really saved my neck here
Happy to help, cheers! :)
You're a lifesaver man, I pray that you live a happy life.
Thanks a lot, I appreciate it!
Tell me, the project is on vite, but the package manager is on yarn?
In this example I'm using npm, but it wouldn't be a problem to use yarn or pnpm instead
@@macieksitkowski Resolve. The problem was fontawersome. They closed access to version 6.2.0. It gave a 404 error. Workflow went into a panic. Changed the yarn.lock file. Now success😀
Для русскоязычных. Возникла проблема, когда делал по инструкции. Погрешил что в видео npm, а у меня Yarn. Но в поисках решения заметил где-то, что не может установить библиотеку FontAwersome версии 6.2.0, помечает код ошибки 404. А еще не может найти библиотеку fortawesome/sharp-solid-svg-icons вообще ни какой версии. Аction сразу завершался с ошибкой. Решение-изменить файл yarn.lock (или package.json). Поменял везде(сочетание ctrl+H в любом редакторе😊) на версию 6.2.1 и удалил все упоминания данной библиотеки. Надеюсь кому-то помог)))