Coding Shorts: Building with Vite - Customizing Production Builds
HTML-код
- Опубликовано: 7 сен 2024
- I've been using Vue (via Vite) with ASP.NET Core lately and I needed to build for testing and production. While I'd gotten comfortable with the Vue-CLI to customize the build, it was time to learn now Rollup works with Vite to customize my build. Take a look and what I came up with.
If you like this video, you might like other videos in my Instructional Videos:
- • Instructional Videos
Or my Pluralsight Courses:
- shawnl.ink/psa...
Thank you very much! I'm using Vite to build a WordPress plugin with React and this video helped me get over a crucial part of it!
Glad it helped!
sir, you got a new follower.
You have a really good didactics. Your talk speed, non use of unecessary words and objectivityness amazingly help to mantain the focus.
Also you does explain details (the whays) that the most would just pass, which is a huge plus content.
OMG This video is a godsend. I'm trying to replace webpack as my bundler but Vite very much seems like it was build for Node-based SPAs in mind. I just need some scss and ts processed so that my WordPress themes can enqueue them and I could not for the life of me figure out how to do just. Again this video is amazing!
Thank you very much for this useful info.
You are welcome!
having a similar issue and stumbled upon this video for the solution. Good content!
You literally saved me, i spent several ours looking for some explanation like this. THANKS a lot! You got a new follower and a new like!
Thank you man. You're delivery style is invaluable. I Hope you keep making content with the same on point delivery. The way things are taught can either make it harder and demotivate someone or make it easier to learn and keep moving forward. I dislike content creators that intentionally or unintentionally intorduces complexity to what could have been explained in an easier way. I appreciate folks like you that makes it easier to keep moving forward rather than be stuck on config issues etc. Theres a lot to take in in this space as it is , and the more non core tasks are made easier, the more productive everyone can be. Thanks again.
Well done - great introduction! Thank you, sir.
Thank you kindly!
Amazing Explaination
Glad it helped!
Great video on customizing production builds with Vite. I appreciate the tips and tricks you shared!
Glad you enjoyed it!
thank you so much for this video, it was basically exactly what i needed
This was amazing!
Thanks!
Thks for your time, excelent video
Glad you enjoyed it!
Literally saved me hours of work!!!
Awesome
Thank you so much for this video!
You are so welcome!
Very cool! I'd be interested to see a video on how to integrate internationalization with vite, pinia and a cms
Thank you so much.
Always welcome
thank you. i was playing around with vite but couldn't get rid of the hashes in the filenames, which made it very useless for me. i will now try it again.
Great helped me lot, i am moving away from webpack
Cool!
This helped a lot! Thank you so much.
Glad it helped!
Fantastic! Very good explanation.
Thanks Brother!! You saved us
Thanks for the explanation. this was helpful.
You're welcome!
can you show me how to setting up the environment of ASP .net core 6 with vite + vue 3..
Great job!
Thanks for the tutorial
Very easy to understand, thanks :)
excellent explanation!!!
Sir You gain one more subscriber for helping me
Thx for the explanation!
I don't understand how to build my app and include, in the building process, all the things (pages, services and components) I've created inside src folder. Could you help me with that please?
Im still using webpack because of the documentation and the tons of plugins it has to offer
No reason to move if you're comfortable. I've moved to Vite because it's so much faster for development and so this seemed like a natural direction with it.
I got a good video topic for this channel. Vite 4 tutorial. There isnt a SINGLE one out there.
Interesting, i'll add it to the list.
@@swildermuth Guaranteed traffic. Not a single tutorial out there.
Until I get a video on it, I do have an article about it (not v4 though, but most is still the same): www.codemag.com/Article/2109071/Introducing-Vite-A-Better-Vue-CLI
Thank you very much!!!! can you show how intgrate in vs 2019 mvc ?
Video coming on how to do that.
I'm not sure how entry points work for dev or production/build when used in another context (like WordPress plugin). Since the PHP framework is outputting the pages dynamically with PHP, my Vue app doesn't really have one little html entry point or one to compile with the transformed filenames and paths and such.
How would I go about developing without using a single html entry point file, but instead require the entire PHP framework to run in order to run my app? In other words, WordPress has to run, which runs the theme and displays the pages where I output shortcode which then runs my plugin which then outputs the Vue stuff. So my entry point is a dynamic page created by WP, not one html file in my Vue project folder.
I can't find much info about using any other kind of "entry" beside an html file in the project root.
I don't know how Vue works specifically, but I think it's similar to React, in which your entry point is an ID in the page template. If you're working on a WP plugin or theme, use Shawn's method of stripping the hash from your build files, load your assets as you normally would using wp_enqueue_script(), and target the ID in your PHP template.
Thanks for your awesome video. It is really help me. But i got one problem with browser caching. For example, i uploaded index.js and it work fine. But later i edited something and uploaded edited index.js. There, my browser i only loading the index.js from cache. So, my latest changes are not working well in my browser. It work only when i clean the browser cache or i open with private window. Do you have any suggestion? Thanks
Not sure what you're using for the server-side, but in general you'll need to use a cache busting solution (e.g. yourfile.js?b=;alskdjf;laksd) or enable the cache busting that is built into vite. Production builds should do this by default but I think I may have told you to remove in the example. Search for Vite + Cache Busting and you'll see good examples.
@@swildermuth Thanks for your reply. I will check it out. But for now, i re-enabled the hash key in vite config for production.
where minify
Not sure this has anything to do with minifying. What's the context?
You scare me
why
@@migueljara9399 Idk he is looking exactly to my eyes and IDK talks very calm
Senior developers must be and look serious.