I totally agree with what you said. We should indeed focus on the code, rather than on tooling which might break the app. Building without relying on tooling is somehow a luxury for JS developers today.
This was so helpful. I was working with Vite and had it hosted, but not sure why it was showing a blank page in production. It was making sure that the HTML/CSS/JS assets cross-origin related file path in the index.html was correct. Thank you!
failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.
awesome glad you liked and understood it - makes it worth everything
Год назад
Hi! Thanks for this videotutorial. I want to know what if I install jQuery using npm install jquery --save when the npm... Do jQuery will be part of the final build? Thanks!
technically yes. if you install and use it it should be part of the final package. The other case is if you install it and do not use it at all, it might discarded via tree shaking and not be part of the final bundle.
Vite is a build tool and has already created a workspace that would welcome such operations. I would add the image assets building as a build step and probably have it as script in the package.json
I want to ask, i'm migrating from webpack to vite, when i try yarn serve everything works normally, but when deploy or yarn preview the app just loads, how to solve that? thank you
So it looks like you can't develop a static multipage landing? For example, every page have its specific script with some unique logic. It means that I have to make different js files and link them into its html files. And it feels like it doesn't make sense then because I can do it without any bundler. It'll help only with a css preprocessors support out of the box, because when using gulp or webpack, you need to spend some time to configure it correctly.
Great tutorial. Is there are way to change where the assets are saved for production? For example assets/js for JavaScript files, assets/css for styles, assets/images and so on..
Sorry for the very late reply but to your question I would say yes. It might be a little involved since you might have to create custom scripts that can do this post or pre build and add the command to your package.json
I would like to use a template engine like handlebars, Mustache or Nunjucks to modularize the html and import for example any partials inside the index.html. How can I do that?
Hello Alfred thank you for your kind words. Now are you building a simple static website with 6-10 pages or are you building a web application with routing and dynamic pages. I'm asking because Vite works with React or Vue and you could leverage the routing there if you are building a web application. If your use case is the static website route, what Vite currently have would not make sense if you have tons of pages but should work well with a small sample size. You can find out more here: vitejs.dev/guide/build.html#multi-page-app Cheers :)
@@AdyNgom I am working on a large web applivcation with some 50 pages. I am an enthusiastic Vanilla Javascript user and am against any of the frameworks like Vue or React. I am getting a friend to formulate the routing though I like the link you sent
hello I would start here with this great example from #basarat: ruclips.net/video/STeKBm67l6M/видео.html I'm not familiar with nunjucks but the Vite.js docs are pretty extensive.
I'm using Tabnine as an extension here. I have a full video about it here: ruclips.net/video/F7y1d2XG6PM/видео.html. Thank you so much for being a subscriber :) hope you find the content helpful
Hi Bro, the code at timestamp 09.10 does not work in Windows when i run live server in "dist" folder. Please test in the Windows environment. I suggest that trainer should always consider running their code under the Windows environment, otherwise value of the course will fail. This can be proven when i look at the number of views you got. You should get more only if you also show the Windows option as well.
I totally agree with what you said. We should indeed focus on the code, rather than on tooling which might break the app. Building without relying on tooling is somehow a luxury for JS developers today.
This was so helpful. I was working with Vite and had it hosted, but not sure why it was showing a blank page in production. It was making sure that the HTML/CSS/JS assets cross-origin related file path in the index.html was correct. Thank you!
Thank you for focusing on the basics and keeping the demo realistic.
really nice tutorial man, also you are so relaxed, i really enjoyed watching this video, good stuff man, big like :)
Awesome - glad to see you like it
thanks a lot for the clear tutorial, it's good to find something that actually works exactly how it's shown!
Glad you found it useful and thank you for the kind words
filled in a lot of gaps in my understanding of using vite - thanks!
so glad to hear it was useful to you. cheers
thanks! you are great, I was looking how to serve and this worked perfect, good to know about surge
awesome glad you found it useful :)
Really good tutorial!!
Thank you for the kind words
If am using this in the nextjs will it work
hey thank you for taking the time to watch. Regarding Next.js I really am not sure since I have not tried it with this setup
Nice video, I would rate it 10/10
This tutorial was very good, thank you
You welcome :) Glad you found it useful
failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.
clear, precise and concise, thank you very much
Thank you Honore. Glad you found it useful and thanks for the kind words.
good good very good... im noob to web dev but i understood everything )) .... thanks
awesome glad you liked and understood it - makes it worth everything
Hi!
Thanks for this videotutorial.
I want to know what if I install jQuery using npm install jquery --save when the npm... Do jQuery will be part of the final build?
Thanks!
technically yes. if you install and use it it should be part of the final package. The other case is if you install it and do not use it at all, it might discarded via tree shaking and not be part of the final bundle.
Buen tutorial, señor Ady. Gracias.
amazing tutorial thank you very much, I was wondering what if we wanted to manage image asset bundling, like specify bundling config in our app
Vite is a build tool and has already created a workspace that would welcome such operations. I would add the image assets building as a build step and probably have it as script in the package.json
I want to ask, i'm migrating from webpack to vite, when i try yarn serve everything works normally, but when deploy or yarn preview the app just loads, how to solve that? thank you
So it looks like you can't develop a static multipage landing? For example, every page have its specific script with some unique logic. It means that I have to make different js files and link them into its html files. And it feels like it doesn't make sense then because I can do it without any bundler. It'll help only with a css preprocessors support out of the box, because when using gulp or webpack, you need to spend some time to configure it correctly.
Thank you so much brother
you are so welcome :)
Great tutorial. Is there are way to change where the assets are saved for production? For example assets/js for JavaScript files, assets/css for styles, assets/images and so on..
Sorry for the very late reply but to your question I would say yes. It might be a little involved since you might have to create custom scripts that can do this post or pre build and add the command to your package.json
I would like to use a template engine like handlebars, Mustache or Nunjucks to modularize the html and import for example any partials inside the index.html. How can I do that?
Hi, I'm deploying vitejs with express app to heroku and it's pointing to localhost.. what should be changed in the package.json scripts part?
Vite has a great documentation about it. Please follow this link vitejs.dev/guide/static-deploy.html#heroku
What do I need to learn beside js to understand vite? I don't understand the documentation
Hi Ady, this is a super presentation but how do I make it multi page as that is cricial for me?
Hello Alfred thank you for your kind words. Now are you building a simple static website with 6-10 pages or are you building a web application with routing and dynamic pages. I'm asking because Vite works with React or Vue and you could leverage the routing there if you are building a web application.
If your use case is the static website route, what Vite currently have would not make sense if you have tons of pages but should work well with a small sample size. You can find out more here:
vitejs.dev/guide/build.html#multi-page-app
Cheers :)
@@AdyNgom I am working on a large web applivcation with some 50 pages. I am an enthusiastic Vanilla Javascript user and am against any of the frameworks like Vue or React. I am getting a friend to formulate the routing though I like the link you sent
Hi, i using vite and nunjucks for templating but went I build don't render the other pages just the index, how can use vite for web pages?
hello I would start here with this great example from #basarat: ruclips.net/video/STeKBm67l6M/видео.html
I'm not familiar with nunjucks but the Vite.js docs are pretty extensive.
Vitejs react serversideandclient code deploy Ela chyali
What code extension do u use to auto complete or code tips ?
I'm using Tabnine as an extension here. I have a full video about it here:
ruclips.net/video/F7y1d2XG6PM/видео.html. Thank you so much for being a subscriber :) hope you find the content helpful
tnx
you welcome :)
Hi Bro, the code at timestamp 09.10 does not work in Windows when i run live server in "dist" folder. Please test in the Windows environment. I suggest that trainer should always consider running their code under the Windows environment, otherwise value of the course will fail. This can be proven when i look at the number of views you got. You should get more only if you also show the Windows option as well.
50 Cent explaining vite js))
Too lame, showing unecessary parts, taking too much time for unnecessary actions. !!