Learn Vite - Frontend Build Tool Course

Learn how to use Vite, a build tool and development server designed specifically for modern web development. This course covers various topics, including creating a static server, using templates, integrating Tailwind, using environment variables, deploying to GitHub, Netlify, and Vercel, and configuring Vite. It also discusses the features of Vite, including hot module replacement and static asset handling.
✏️ Course created by @KhattakDev
KZbin: / khattakdev
Twitter: / khattakdev
Instagram: / khattakdev
⭐️ Contents ⭐️
⌨️ (0:00:00) Start
⌨️ (0:00:22) Learning Objectives
⌨️ (0:01:29) Introduction
⌨️ (0:02:50) What makes it fast?
⌨️ (0:04:49) Creating Static Server
⌨️ (0:17:29) Using Templates
⌨️ (0:24:39) Tailwind Integration
⌨️ (0:32:30) Env Variables
⌨️ (0:40:58) Deployments
⌨️ (1:00:22) Configurations
⌨️ (1:30:35) Wrap Up
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@Fetrah2]

⭐ Contents ⭐ ⌨ (0:00:00) Start ⌨ (0:00:22) Learning Objectives ⌨ (0:01:29) Introduction ⌨ (0:02:50) What makes it fast? ⌨ (0:04:49) Creating Static Server ⌨ (0:17:29) Using Templates ⌨ (0:24:39) Tailwind Integration ⌨ (0:32:30) Env Variables ⌨ (0:40:58) Deployments ⌨ (1:00:22) Configurations ⌨ (1:30:35) Wrap Up

[@abc_cba]

Thank You for this.

[@wwloyd]

thanks arsalan, this video is a lifesaver! Vite is awesome especially while switching from webpack

[@NareshKumawat-wy4od]

"Sir, your CSS module explanation was very helpful. Thank you for presenting it so nicely."

[@alwaisy]

You really touched on the most important commands. I have the idea now, how does Vite work.

[@andrewzheng9657]

Thanks for this quick intro into Vite.

[@viniciusmorgado9722]

Very nice video, this give to me a good overall about the options of Vite, theirs a lot of things that I don´t have consider use before.

[@oantronghiep221]

thank you very much, very clear, I watch all video and understand all you say... thanks

[@ray84851]

Nice tutorial, thank you!👍

[@muhammedozalp]

Thanks for this great tutorial

[@randomguy1]

Love you Arslan full support ❤

[@jamaka_me_code796]

00:02:05 PREREQUISITES* Great video🎉

[@tengerzander7921]

wow amazing, downloading now...

[@anar2609]

thanks to the author for the effort with Vite, the development will be accelerated at times

[@sabertoukali]

Nice tutorial, thank you

[@ahmadanis9930]

Great work!

[@julianvelez6563]

Nice work

[@ashwanikumar183]

can we add the configuration for angular also

[@user-dz7cx8fp9i]

how to take build by rectifying typescript type errors and warnings in vite

[@AntonioBenderas]

How to import choices.js library?

[@kasper369]

I hope this video teaches about how to optimize my app

[@nareshc4828]

How to configure port number through env variables in vite.config.js Tried accessing through import.meta.env But was giving error

[@JesusReyes-hp3nx]

Nice Video, Thanks You!!

[@Mari_Selalu_Berbuat_Kebaikan]

Let's always do alot of good ❤️

[@AshishKumar-ft6wv]

Perfect

[@thanirmalai]

how to add eslint to vite during development

[@gattorwichar3984]

Ramadan Mubarak from Sudan

[@amaanullah13]

❤ same to you

[@ifeanyiilonze5485]

I tried building my vite project that has socket.io-client and axios installed. When I run build, it crashes. I've tried using polyfill, but it doesn't work either. How do I fix this

[@user-ul5zb5fj2h]

Very useful video

[@LearningLane3456]

Please create a tutorial for creating an android app with good security for personal finance app.

[@davoodaslani3882]

How set incognito chrome for vite project without create .env and vite.config.js file?

[@codesoon9668]

Before watching this video I want to share an error I made and I hope I could understand why, this particularly happened when using tailwind CLI with Vite+React template in the latest version I read the blog you posted and I could not figure out the error so again I hope I could understand what I am missing out. Anyway it will help me a lot because I recently started using vite w/ react because of the update of create-react-app.

[@mezzmar]

So, can you post what error it throws or anything that could help us help you?

[@codesoon9668]

@@mezzmar I found the error I had made. First when you initialize tailwindCLI there is a content space where you put the files as well as THE DIR so that was the error I use components out of src which is the default snippet Tailwind offers you so I just add the DIR and now its working very well.

[@prinjay4u]

Great sr

[@stevenoketch6950]

Vite is definitely choice number one after the death of cra

[@404nohandlefound]

I don't think it was necessary to include css modules in a video about vite. otherwise, it was a great video!

[@talhabytheway]

CONGRATS ARSALAN 💗💗

[@scootergirl3662]

Btw, I didn't have the package.json and node_modules get created (it looks like in the video it is created when you install vite?). I don't know if this is the "correct-est" way, but I did npm init and then it created a package.json for me to use. You could also type one out by hand but eh..... then you do the "npm install --save-dev vite", and it will automatically save vite to the package.json do let us know though if there is a better way

[@dance3rt]

Thank you your way helped me

[@luisbrazilva]

I get it. It's fast but why is everyone ignoring the huge security risk of exposing your API connections and key because it serves the JSX files in the network activity tab without masking them or encoding them.

[@Cognitoman]

Huh ?

[@aaaliii4u]

am I missing something or is it the old way of using vite?

[@bhargavkumar]

Great

[@Yahya_Umar]

Need video tutorial for starting freelance work. Seeking experienced freelancer to cover client acquisition, portfolio creation, payment systems, and more. Let me know if interested!

[@thespiritualjourney369]

why do we write scripts manually in package.json?? instead you should've downloaded vite with react which comes with all dependencies and scripts. idk why make it complicated and increase the steps.

[@bossgd100]

I dont see what is slow with create react app . Its just a command you type at the start of the project. You change tool for 2 min at the start of the project ? I am missing something ?

[@mettelhed]

CRA is no longer being maintained I think.

[@BearDigitalStudios]

Create React App's bundle size to the browser is masive Vite only passes the code you need to navaigate your way around the site = better performance

[@bogdanpryvalov]

i can't understand anything, he always slurps

[@VeaceslavBARBARII]

There will be soon released vite 5 See their migration guide

[@bluesky-vc3tk]

❤❤❤❤

[@chesterxp508]

GoodJob!

[@ayushhya]

save dev vite is not showing any json files

[@happydaydaniel]

Is these another way of creating a react web?

[@OP-ig1fj]

parcel nextjs but why not just vite

[@franklinmayoyo]

It not just another way but the best way currently.😂🤣 It's really faster than the create-react-app (which became depreciated recently)

[@OP-ig1fj]

@@franklinmayoyo plus cra will take up huge amounts of storage ye

[@happydaydaniel]

@@franklinmayoyo is there any advantage cra has against it?

[@franklinmayoyo]

@@happydaydaniel not really. It's only that vite has some issue during development. At times you have to reload the server to see your changes. You might spend a lot of time trying to debug a problem only to realize that vite didn't effect your changes.

[@m_yoda]

Thanks for content, but sometimes it was hard to understand you because of your English.

[@red5hat]

You have pronunciation problem in English. It's very difficult to understand your words.

[@pradeepkumar-il5wr]

Hello Sir, we are from India and want to see your full video, please add audio track option on your KZbin channel, what will happen with this, we can see your video in any language like Hindi, Tamil etc. The video track feature is new on youtube, so please add it quickly so that we can see your video. As Mr. Beast has added video tracks. Thank you

[@w3hacker]

Also add Chinese please

[@yabuking84]

This is not for beginners. He talks about HMR, bundlers like its second nature to viewers. Though this is very good for mid level developrs.

[@srijonofficial621]

what is HMR btw

[@BurhanAijaz]

what are the prerequisites

[@NoSoyElPeluca]

Entry level in Js, what it is and how webpack works (to understand why we are using VITE which is an alternative to webpack and the differences there are to configure the project), entry level in some framework (since VITE provides templates to start the project) and basic understanding of NPM since we will be installing packages like Tailwind. Anyway, configurations like Tailwind's that seem a bit difficult watching the video are very easy to setup, everything the teacher does is in the Tailwind documentation, it's almost a copy/paste. In general, almost all NPM packages for normal use tend to be a copy/paste.

[@vramosjd]

What are the prerequisites?

[@NoSoyElPeluca]

Entry level in Js, what it is and how webpack works (to understand why we are using VITE which is an alternative to webpack and the differences there are to configure the project), entry level in some framework (since VITE provides templates to start the project) and basic understanding of NPM since we will be installing packages like Tailwind. Anyway, configurations like Tailwind's that seem a bit difficult watching the video are very easy to setup, everything the teacher does is in the Tailwind documentation, it's almost a copy/paste. In general, almost all NPM packages for normal use tend to be a copy/paste.

[@vramosjd]

@@NoSoyElPeluca Thank you!

[@Atanepes]

Well doing great, but Why there are new languages to make website i am beginner now i have to start with vite?? Or i have to start html??

[@chilakalajakeer9957]

Vite is not a programming language,it is a build tool

[@w3hacker]

You should learn html , css , javascript first, then nodejs, then babel/webpack or vite, then vue/react

[@nsa3679]

no hate, but i had to use subtitles

[@Cahnisama]

This was rought to understand as a non native english speaker.

[@laja6108]

It was rough to understand as a native speaker, too 🙃

[@danonmily]

Good video but please practice pronounciation of english words. Sometimes it was hard to infere what you were saying

[@user-ff9el4jf6y]

I'm not native english speaker, seems like a great course but is so hard to understand! 😫😭 Whit the rest of the videos I have no problem

[@scootergirl3662]

It's not just you - the speaker's enunciation isn't great. I love what Freecodecamp is doing, but they get a lot of people who aren't great communicators. I am starting to turn the volume off on a lot of tutorials anyway at this point so I can listen to something else.

[@m_yoda]

The same.

[@w3hacker]

He's 22 years old? I think he wants to get more subscribers, but he fails.

[@musaddiqali1]

Maybe it's because of his braces. I was also struggling to understand some words he was saying.

[@scottonanski4173]

Beginners don't know React, Vue, etc. They know HTML, CSS, and MAYBE a bit of JavaScript.

[@hakuna_matata_hakuna]

disappointing vite lib mode isn't talked about much

[@user-nf9cg9ig6u]

hard to listen

[@user-ln6th4cm6d]

I really honestly think that the module on the static server was unnescessary

[@Nodsaibot]

I was afraid of this, I dont understand anything hes saying, [cc] to the rescue

[@justkaz7104]

This guy's accent is challenging! Can't you not get a native English speaker?

[@ibizawavey8630]

i'm new new new to programming. where do I start guys?

[@anisohassanabdulahi1999]

Python is a good beginner ❤

[@joysaha3927]

Learn C programming first, then C++, then Java.. After that, rest of the languages will be easy to learn for you.

[@OP-ig1fj]

what do u wanna do later? do u wanna build websites or

[@ibizawavey8630]

@@joysaha3927 That's like saying to a guy who just came to my gym, "come do deadlifts with me, after that doing iso exercises will be very easy for you" lol that stuff is for advanced trainers like myself, not a guy who just walked in the gym who doesn't know anything about form, timing, time under tension, mind/muscle connection etc etc. Everyone is also giving different advice which tells me no one has a single clue so i'll just follow my own gym analogy. I'll start with the fundamentals, then i'll do javascript and do some volunteer work with non profits to get experience.

[@joysaha3927]

@@ibizawavey8630 All the best! 👍

[@senti2175]

Are there Khattaks in India? His name has Khattak but his accent is like Indian. 🤔

[@rajghosh217]

He is Pakistan

[@usmanahmedgoray]

He is Pakistanis. Khattak is tribe in Pakistan and man which belong to that tribe is add his tribe name as surname

[@-rate6326]

​@@usmanahmedgoray there are khattaks india too. They might have migrated at the time of partition.

[@anisohassanabdulahi1999]

All Muslim programmers Ramadan mubarak ❤❤ today is first day of Ramadan Alhamdullilah ❤❤

[@dastgirakhtar9782]

Our will be tomorrow. 🇮🇳🇮🇳🇮🇳❤❤

[@salwaabusaad9819]

❤❤❤

[@xamsemahdi3861]

🇸🇴🇸🇴🇸🇴🇸🇴🇸🇴🇸🇴🇸🇴🇸🇴🇸🇴❤❤❤❤

[@alilokhd4638]

🇩🇿🇩🇿🇩🇿🇩🇿

[@farukishak7010]

Thank you from Nigeria

[@UnderstandingCode]

4:19 what's that dude?? I can't make out what you're saying!

[@BrinleyBlogette]

had to pause and replay SO many times. very challenging to make out numerous words he attempted to pronounce. please try to use more native English speakers to explain things.

[@yukimo3025]

As foreigner and English as the second language, I didn't understand anything what he said because of his accent, please freeCodeCamp next time choose a native speaker

[@laja6108]

I can’t understand with English as my first language

[@shivanshmishra7992]

Turn on "Closed Captions"

[@knowledgedose1956]

​​@@shivanshmishra7992ok, but the tutorial itself is a bit of low quality, compared to others. not the video

[@arnesneyers2076]

I feel this 'course' is way too long since it's basically just a setup that you find in tutorials of five minutes and doesn't really add extra value to me.

[@BoolFalse]

not even counting the fact that Bun changed plans )

[@user-rw2wr9ul5s]

Thank you for sharing this valuable content. I can't stand your pronunciation though.

[@subhajitdey4483]

If you kindly reply to my comment in the pyspark video... Plzzzzzz🙏🙏🙏

[@bharath2508]

I am watching this from Akhand Hindu Rashtra aka Eurasia.

[@jacobdawn4735]

hi

[@romi8634]

not good waste of time , voice quality issues and please explain clearly , you just showing us how to do , just like copy pasting

[@scottonanski4173]

You trying to explain the deployment was a dog's breakfast. Not only did my example break, you didn't account for any errors that might have occurred basically make this entire tutorial useless.

[@user-jr4ze8je7d]

THE BIG PROBLEM I SEEN IN THIS VIDEO IS, TOO MUCH UNNECESSARY EXPLANATIONS TALKING

[@Snipergaming-14]

Will Chatgpt remove programmers? ill Chatgpt remove programmers?

[@mossfoobar8322]

Yes itll remove basic programming needs for many companies. The job maeket is already saturated and many are getting laid off. However if you have exceptional skills or a talent which you invested many years to develop its unlikely that chatgpt can replicate that. Security or networking is an example

[@kim92se64]

57 m

[@claudettegivens9039]

Unable to understand the speech patterns of the instructor. Waste of time

[@lunaticberserker5869]

Learn ChadGPT ;)

[@korkut31]

your name is wrong.. it is a TURK ish name and it is 'ARSLAN' not arsalan

[@dev_jun]

finally, someone from Pakistan

[@SjarMenace]

I get so triggered its not "veet" its v i t e!

[@laja6108]

It literally says in the first sentence of the docs that it’s pronounced “veet”

[@testmail3875]

bht hi bakwas vite chord ke sab ho rha h

[@prashantkamboj207]

Not useful

[@yourgflikesit]

So difficult to understand, you mumble your words constantly.

[@TodayCurrentAffairs2299]

Hello Sir, we are from India and want to see your full video, please add audio track option on your KZbin channel, what will happen with this, we can see your video in any language like Hindi, Tamil etc. The video track feature is new on youtube, so please add it quickly so that we can see your video. As Mr. Beast has added video tracks. Thank you

[@TodayCurrentAffairs2299]

Hello Sir, we are from India and want to see your full video, please add audio track option on your KZbin channel, what will happen with this, we can see your video in any language like Hindi, Tamil etc. The video track feature is new on youtube, so please add it quickly so that we can see your video. As Mr. Beast has added video tracks. Thank you

[@TodayCurrentAffairs2299]

Hello Sir, we are from India and want to see your full video, please add audio track option on your KZbin channel, what will happen with this, we can see your video in any language like Hindi, Tamil etc. The video track feature is new on youtube, so please add it quickly so that we can see your video. As Mr. Beast has added video tracks. Thank you

[@knowledgedose1956]

to have a video track feature you should realize there should be someone who would not only translate but also record the translation with their voice. it is not that translation track is generated automatically or something