Coding Shorts: Building with Vite - Customizing Production Builds

Рет қаралды 17,613

2 жыл бұрын

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/psauthor

Пікірлер: 62

@emanuelturis4132 2 жыл бұрын

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!

@swildermuth 2 жыл бұрын

Glad it helped!

@dionedde 2 жыл бұрын

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.

@emaaadelgado 2 жыл бұрын

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!

@johnyepthomi892 Жыл бұрын

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.

@qubi 2 жыл бұрын

thank you so much for this video, it was basically exactly what i needed

@mackenmd 2 жыл бұрын

Well done - great introduction! Thank you, sir.

@swildermuth 2 жыл бұрын

Thank you kindly!

@VigneshBhaskar Жыл бұрын

Thank you very much for this useful info.

@swildermuth Жыл бұрын

You are welcome!

@alvinyanson Жыл бұрын

Great video on customizing production builds with Vite. I appreciate the tips and tricks you shared!

@swildermuth Жыл бұрын

Glad you enjoyed it!

@63montywilliams50 Жыл бұрын

having a similar issue and stumbled upon this video for the solution. Good content!

@sivertskarning2129 2 жыл бұрын

Fantastic! Very good explanation.

@nzuzomal4545 3 ай бұрын

This was amazing!

@swildermuth 3 ай бұрын

Thanks!

@ravi_verma31 3 ай бұрын

Amazing Explaination

@swildermuth 3 ай бұрын

Glad it helped!

@MobiusCoin Жыл бұрын

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!

@smvnt3803 Жыл бұрын

This helped a lot! Thank you so much.

@swildermuth Жыл бұрын

Glad it helped!

@jaidervanegas255 Жыл бұрын

Great job!

@glidelos84 2 жыл бұрын

excellent explanation!!!

@saioabikandi9884 2 жыл бұрын

Very easy to understand, thanks :)

@aniket0aniket 2 жыл бұрын

Thanks for the explanation. this was helpful.

@swildermuth 2 жыл бұрын

You're welcome!

@luisangelcortinaalmeida2210 Жыл бұрын

Literally saved me hours of work!!!

@swildermuth Жыл бұрын

Awesome

@ivanotero2050 Жыл бұрын

Thks for your time, excelent video

@swildermuth Жыл бұрын

Glad you enjoyed it!

@paws7983 Жыл бұрын

Thank you so much for this video!

@swildermuth Жыл бұрын

You are so welcome!

@lazarkulasevic 2 жыл бұрын

Thanks for the tutorial

@shubhamwalhekar9356 Жыл бұрын

Thanks Brother!! You saved us

@sandan3 Жыл бұрын

Very cool! I'd be interested to see a video on how to integrate internationalization with vite, pinia and a cms

@codescandy Жыл бұрын

Thank you so much.

@swildermuth Жыл бұрын

Always welcome

@barneysmith Жыл бұрын

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.

@ravindrayr1232 2 жыл бұрын

Great helped me lot, i am moving away from webpack

@swildermuth 2 жыл бұрын

Cool!

@muhammaddarwis8745 2 жыл бұрын

can you show me how to setting up the environment of ASP .net core 6 with vite + vue 3..

@mohitsoni3819 4 ай бұрын

Sir You gain one more subscriber for helping me

@federicotarasco797 2 жыл бұрын

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?

@ranavitaln 2 жыл бұрын

Thank you very much!!!! can you show how intgrate in vs 2019 mvc ?

@swildermuth 2 жыл бұрын

Video coming on how to do that.

@cnikolov 2 жыл бұрын

Im still using webpack because of the documentation and the tons of plugins it has to offer

@swildermuth 2 жыл бұрын

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.

@vigilantezack 2 жыл бұрын

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.

@ontheruntonowhere Жыл бұрын

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.

@jonwinder6622 Жыл бұрын

I got a good video topic for this channel. Vite 4 tutorial. There isnt a SINGLE one out there.

@swildermuth Жыл бұрын

Interesting, i'll add it to the list.

@jonwinder6622 Жыл бұрын

@@swildermuth Guaranteed traffic. Not a single tutorial out there.

@swildermuth Жыл бұрын

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

@thetpaingsoe1423 9 ай бұрын

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

@swildermuth 9 ай бұрын

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.

@thetpaingsoe1423 9 ай бұрын

@@swildermuth Thanks for your reply. I will check it out. But for now, i re-enabled the hash key in vite config for production.