Should this work OK with URL parameters? Once I upload to my host, I get some weird behaviour if say for example I use /login/index.html?option=something ... the service worker seems to want to load the content from the index at root instead.
I think it should work with URL params, but still, there may be some specifics when using service workers; unfortunately, I don't have an exact answer to what might be wrong in your particular case.
I using bootstrap.js on my project but after I build it, the bootstrap did not compile inside the dist. Since my structure is actualy consist of 4 html pages, I expect that it should be bundle with then page, but it not compile. is there any problem with my config or problem on my importation of JavaScript?
@@igor_babko Um. Anyway, I fixed it already. My website is form a template, but it is has bootstrap 4.6. Since I updated that to 5.3, I forget to remove the old bundle so it result conflict in build time. I remove all bootstrap in the static file and used bootstrap.js from the CDN instead. My website is online now. Now my next target is either Vituum or I going back to Express JS to used Handlebars since I have no sufficient skill to use React yet. Also, I gonna start to hunt client this week.
спасибо тебе за видео, осваиваю vite vanilla js и это мне очень помогло ! Подскажи например я хочу сделать папку pages в которой хранить все страницы кроме главной. Но при это я не хочу отображать в браузере путь basic/pages/about а хочу просто показівать basic/about . Как быть ? или только через какие то библиотеки роутинга ?
Всегда пожалуйста)) Кстати, данный плейлист есть и на русском) ruclips.net/video/SBtNHd7ZBn4/видео.html А это нужно только в процессе разработки, или чтобы так же работало после сборки и деплоя?
Are all your pages standalone? Meaning that they all include their own js files. If yes, then the technique shown in this video will most likely work for you.
I'm not sure if you are talking about the root option? vitejs.dev/config/shared-options.html#root Just for reference on the project root - vitejs.dev/guide/#index-html-and-project-root
Hi thanx a lot! It helped me in understanding how to build MPA with Vue, but I have an issue, when in each page.js I try to mount vue.app it always switches to homepage no matter what I do
It will work if you expose the login function to the global scope by doing window.login = login, but it's not recommended; it's better to assign a listener in your script by using the addEventListener() method.
Are you saying that you have a single-page app (only one HTML file) but several JS scripts that should be included on that single HTML page? Or do you have many HTML pages, and each of those pages can have more than one JS scripts?
If I understand your use case correctly, you'll have to specify the strategy of how to split up your JS bundle into multiple smaller JS files (chunks). You can specify the logic for splitting by using manualChunks config option inside vite.config.js Here are a few examples that demonstrate the process of splitting the bundle into a few smaller ones: yuttakhanb.dev/posts/vendor-code-splitting-vite/ www.darraghoriordan.com/2023/08/11/vite-manual-chunking dev.to/tassiofront/splitting-vendor-chunk-with-vite-and-loading-them-async-15o3
Nice video, let me understand, so I could give an example of having my component like this Dasboard.jsx dasboard.styles.js (styled-components and have my files generated hasboard.html dasboard.styles How would I have the separation then in this example to have dashboard.html, dasboard.css and dasboard.js, this It would be very interesting because I would have greater organization of generating the file rather than making a control for PWA, but I wouldn't know how the separation would be done when programming Since I thesis I have two files Dasboard.jsx, and dasboard.styes.js (styled-components.
Thanks, I don't fully understand your use case and what you are trying to achieve. Could you please describe your situation a little more? Are you using React?
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
![[4K] Watch SpaceX Catch A Starship Rocket From Space!!! #IFT5](http://i.ytimg.com/vi/pIKI7y3DTXk/mqdefault.jpg)
Thank you Igor. This video really helped me.
You are very welcome!
Should this work OK with URL parameters? Once I upload to my host, I get some weird behaviour if say for example I use /login/index.html?option=something ... the service worker seems to want to load the content from the index at root instead.
I think it should work with URL params, but still, there may be some specifics when using service workers; unfortunately, I don't have an exact answer to what might be wrong in your particular case.
I using bootstrap.js on my project but after I build it, the bootstrap did not compile inside the dist. Since my structure is actualy consist of 4 html pages, I expect that it should be bundle with then page, but it not compile. is there any problem with my config or problem on my importation of JavaScript?
Hmm, how exactly do you import bootstrap? And do you import bootstrap into each js file of every page, or you use single js bundle on every page?
@@igor_babko Um. Anyway, I fixed it already. My website is form a template, but it is has bootstrap 4.6. Since I updated that to 5.3, I forget to remove the old bundle so it result conflict in build time. I remove all bootstrap in the static file and used bootstrap.js from the CDN instead. My website is online now. Now my next target is either Vituum or I going back to Express JS to used Handlebars since I have no sufficient skill to use React yet. Also, I gonna start to hunt client this week.
It is good to hear that you have managed to fix it. Good luck!
this video is very useful! Thanks a lot!
You are welcome!
спасибо тебе за видео, осваиваю vite vanilla js и это мне очень помогло ! Подскажи например я хочу сделать папку pages в которой хранить все страницы кроме главной. Но при это я не хочу отображать в браузере путь basic/pages/about а хочу просто показівать basic/about . Как быть ? или только через какие то библиотеки роутинга ?
Всегда пожалуйста)) Кстати, данный плейлист есть и на русском) ruclips.net/video/SBtNHd7ZBn4/видео.html
А это нужно только в процессе разработки, или чтобы так же работало после сборки и деплоя?
@@igor_babko в разработке не важно а юзер в адресной строке должен видеть basicURL/about, но при разработке я хочу хранить все страницы в pages
Увы, попробовал несколько вариантов, ни один из них не сработал.
i have 3 html, should i just add in the vite.config.js the root?
Are all your pages standalone? Meaning that they all include their own js files. If yes, then the technique shown in this video will most likely work for you.
I'm not sure if you are talking about the root option? vitejs.dev/config/shared-options.html#root
Just for reference on the project root - vitejs.dev/guide/#index-html-and-project-root
Hi thanx a lot! It helped me in understanding how to build MPA with Vue, but I have an issue, when in each page.js I try to mount vue.app it always switches to homepage no matter what I do
You are welcome! Unfortunately, I need more info to investigate what your problem is in this case.
@@igor_babko thank you for reply! I already solved the problem)
Great!
Thanks. You helped me a lot.
I'm glad to hear that!
when i define a login function inside script and use it in html page like : onclick="login()" ...... it says login is not defined. #help
Please, see these answers:
stackoverflow.com/a/44591205
stackoverflow.com/a/62032504
It will work if you expose the login function to the global scope by doing window.login = login, but it's not recommended; it's better to assign a listener in your script by using the addEventListener() method.
what if i have multi js files?
Are you saying that you have a single-page app (only one HTML file) but several JS scripts that should be included on that single HTML page?
Or do you have many HTML pages, and each of those pages can have more than one JS scripts?
@@igor_babko I have single page with multiple js files
If I understand your use case correctly, you'll have to specify the strategy of how to split up your JS bundle into multiple smaller JS files (chunks). You can specify the logic for splitting by using manualChunks config option inside vite.config.js
Here are a few examples that demonstrate the process of splitting the bundle into a few smaller ones:
yuttakhanb.dev/posts/vendor-code-splitting-vite/
www.darraghoriordan.com/2023/08/11/vite-manual-chunking
dev.to/tassiofront/splitting-vendor-chunk-with-vite-and-loading-them-async-15o3
@@igor_babko I really appreciate your help ❤...great tutorial btw
Thanks a lot!
а да еще лайк и подписка
Спасибо большое!
Thank you
You are welcome!
very helpful...👍
Glad to hear that!
Nice video, let me understand, so I could give an example of having my component like this
Dasboard.jsx
dasboard.styles.js (styled-components
and have my files generated
hasboard.html
dasboard.styles
How would I have the separation then in this example
to have dashboard.html, dasboard.css and dasboard.js, this
It would be very interesting because I would have greater organization
of generating the file rather than making a control for PWA, but
I wouldn't know how the separation would be done when programming
Since I thesis I have two files Dasboard.jsx, and dasboard.styes.js (styled-components.
Thanks, I don't fully understand your use case and what you are trying to achieve. Could you please describe your situation a little more? Are you using React?