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 🙏
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
Witaj Maciek, pochodzę z Brazylii i właśnie zacząłem pracę w obszarze DEV, zrobiłem swoją pierwszą aplikację na Vite i nie wiedziałem, jak to zrobić Deploy, nawet widząc dokumentację wydaje się to trochę mylące, ale oglądanie twojego wideo i nawet nie znając angielskiego udało mi się wgrać swoją aplikację na github. Dziękuję Ci bardzo.👏
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
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
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.
Thanks for this, I tried a few different ways, none of which worked. Also, I was having trouble with this and realised in the deploy.yml the branch was main wheras for me its master, so I changed those and it worked!
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?
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 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
@@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
everything worked until the part about the vite config file. I don't have a vite config file and so I don't know how or where to add the base. my project is in Three js not react and so when I do upload it, it only takes the index.html and doesn't take the rest of my files which are basically the essential parts
thank you for the tutorial . I've been searching for this. but I have one error about the img src . how can i add another basepath for the img src also?
Hey Kamala, I'm happy you liked the video! Regarding your issue, do you import your image? "import imgUrl from './img.png'" If you do it like this👆and you have a base path defined, then after building it should become "//assets/img.png". It's described in the docs here: vitejs.dev/guide/assets.html#importing-asset-as-url Also, take a look, how I import and use "logo.svg" in "App.jsx" file. If it doesn't help, send me a link to your repo, so I can take a look
@@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 и удалил все упоминания данной библиотеки. Надеюсь кому-то помог)))
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.
@@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!
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
@@macieksitkowski Hey, to be honest, I didn't think that you would reply this quickly and since I needed to deploy it ASAP, I moved the project to Create React App and deployed that way.Many thnx for the quick reply and if i will have the same issue next time, i will come back xd
@@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.
@@macieksitkowski "de nada" is a good answer, but an even nicer one is "con gusto" which literally means "my pleasure".But it's not my intention to criticise your reply, you made a good effort to search for the answer, ha ha: thanks again, and again!
That worked great, thank you. I appreciate that you attached step-by-step instructions and workflow script. Well done!
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 🙏
Of all the tutorials, this one worked flawlessly
your awesome thank you man followed every step and it worked just as you explained
had trouble with my github actions and this saved. Thank you Maciek Sitkowski
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
Works like a charm. Very well explained. Thank you!
Dude you are the best ! I've been trying to solve those errors for days and it worked ! Thank you very much !
Witaj Maciek, pochodzę z Brazylii i właśnie zacząłem pracę w obszarze DEV, zrobiłem swoją pierwszą aplikację na Vite i nie wiedziałem, jak to zrobić Deploy, nawet widząc dokumentację wydaje się to trochę mylące, ale oglądanie twojego wideo i nawet nie znając angielskiego udało mi się wgrać swoją aplikację na github. Dziękuję Ci bardzo.👏
Hej Ricardo, bardzo się cieszę, że Ci pomogłem!
You're a lifesaver man, I pray that you live a happy life.
Thanks a lot, I appreciate it!
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
Djekuje bardzo sir, you saved my nerves
Thank you very much! You saved my nerves! :) Cheers, my Polish friend!
Happy to help, cheers!
This is a godsend - thank you
You are a legend my friend. Thanks alot!
Thanks very much, I'm Full Stack Developer from Brasil.
Cheers! 👋
Thank you, your tutorial is great and useful, you helped me very much!
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
awesome man!!!
thank you very much, the awesome tutorial
Thanks for your video! It worked very well!
Works flawlessly! Thanks!!!
Thank You ❤
You just saved my day
What to change if i want to install packages using yarn
I often get "vite' is not recognized as an internal or external command" from github actions
Can you send a link to your repo? I'll try to take a look when I get a minute
Thank you!
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!
Thanks, worked fine!
You're welcome! :)
Thanks for this, I tried a few different ways, none of which worked. Also, I was having trouble with this and realised in the deploy.yml the branch was main wheras for me its master, so I changed those and it worked!
Hey William, I'm glad you got it work, cheers!
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?
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!
thank you so much 💗💗
You're very welcome :)
Thank you, works great! :)
You're welcome!
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
Good Job!! Thanks for your time, great post!
Thanks! :)
everything worked until the part about the vite config file. I don't have a vite config file and so I don't know how or where to add the base. my project is in Three js not react and so when I do upload it, it only takes the index.html and doesn't take the rest of my files which are basically the essential parts
Hey there, can you send a link to your repo?
I deployed vite app on gh-pages succesfully but then when I created components folder etc, nothing was added or updated when I push.
Can you share a link to your repo?
Thanks a bunch man, you really saved my neck here
Happy to help, cheers! :)
thank you for the tutorial . I've been searching for this. but I have one error about the img src . how can i add another basepath for the img src also?
Hey Kamala, I'm happy you liked the video!
Regarding your issue, do you import your image?
"import imgUrl from './img.png'"
If you do it like this👆and you have a base path defined, then after building it should become "//assets/img.png".
It's described in the docs here:
vitejs.dev/guide/assets.html#importing-asset-as-url
Also, take a look, how I import and use "logo.svg" in "App.jsx" file.
If it doesn't help, send me a link to your repo, so I can take a look
@@macieksitkowski I followed the link you send and it worked. thanks a lot👏
@@kamalashamilova8348 you're welcome :)
thank you very much sir
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
Thanks a lot!
You're welcome! 🙌
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 и удалил все упоминания данной библиотеки.
Надеюсь кому-то помог)))
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!
Thank you for the video, but can you help me? GitHub Action always skip the Deploy part after the build, it says "This check was skipped".
Hi, can you share a link to your repo?
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
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
Thank you very much!!!
You're welcome, cheers!
Thanks for the video. I did exactly what you did but mine only shows blank screen without errors, still updated base path still have blank screen.
Hey there, can you send a link to your repo?
@@macieksitkowski Hey, to be honest, I didn't think that you would reply this quickly and since I needed to deploy it ASAP, I moved the project to Create React App and deployed that way.Many thnx for the quick reply and if i will have the same issue next time, i will come back xd
thank you
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ㄒ)/~~
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
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.
gracias hermano
de nada!
@@macieksitkowski "de nada" is a good answer, but an even nicer one is "con gusto" which literally means "my pleasure".But it's not my intention to criticise your reply, you made a good effort to search for the answer, ha ha: thanks again, and again!
@@alvarobyrne hablo un poco de español, pero no conocía esta frase. Muchas gracias, por enseñarme! :)
@@macieksitkowski con gusto, ja ja
Still not working
Hey there, can you send a link to your repo?
deploy
is waiting for github-pages deployment approval
showing this??
voice not audable
Thank You very much man
Happy to help, cheers!