Learn Vite - Frontend Build Tool Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ก.ย. 2024

ความคิดเห็น • 166

  • @Fetrah2
    @Fetrah2 ปีที่แล้ว +43

    ⭐ 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
      @abc_cba ปีที่แล้ว

      Thank You for this.

  • @NareshKumawat-wy4od
    @NareshKumawat-wy4od 5 หลายเดือนก่อน +3

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

  • @alwaisy
    @alwaisy ปีที่แล้ว +6

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

  • @wwloyd
    @wwloyd ปีที่แล้ว +5

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

  • @anisohassanabdulahi1999
    @anisohassanabdulahi1999 ปีที่แล้ว +169

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

    • @dastgirakhtar9782
      @dastgirakhtar9782 ปีที่แล้ว +12

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

    • @salwaabusaad9819
      @salwaabusaad9819 ปีที่แล้ว +3

      ❤❤❤

    • @xamsemahdi3861
      @xamsemahdi3861 ปีที่แล้ว +6

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

    • @alilokhd4638
      @alilokhd4638 ปีที่แล้ว +6

      🇩🇿🇩🇿🇩🇿🇩🇿

    • @farukishak7010
      @farukishak7010 ปีที่แล้ว +4

      Thank you from Nigeria

  • @anar2609
    @anar2609 ปีที่แล้ว +8

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

  • @red5hat
    @red5hat ปีที่แล้ว +10

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

  • @felixjimenezgonzalez9292
    @felixjimenezgonzalez9292 3 หลายเดือนก่อน

    Thanks! I missed a bit more of content regarding the vite.config, build configurations, sass, static folders, etc. Besides that great vid!

  • @gattorwichar3984
    @gattorwichar3984 ปีที่แล้ว +3

    Ramadan Mubarak from Sudan

  • @powerprocess_hiepdt
    @powerprocess_hiepdt ปีที่แล้ว +1

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

  • @ifeanyiilonze5485
    @ifeanyiilonze5485 7 หลายเดือนก่อน +2

    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

  • @andrewzheng9657
    @andrewzheng9657 5 หลายเดือนก่อน

    Thanks for this quick intro into Vite.

  • @jamaka_me_code796
    @jamaka_me_code796 ปีที่แล้ว

    00:02:05 PREREQUISITES* Great video🎉

  • @viniciusmorgado9722
    @viniciusmorgado9722 6 หลายเดือนก่อน

    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.

  • @luisbrazilva
    @luisbrazilva ปีที่แล้ว +2

    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
      @Cognitoman 5 หลายเดือนก่อน

      Huh ?

  • @tengerzander7921
    @tengerzander7921 ปีที่แล้ว +2

    wow amazing, downloading now...

  • @scootergirl3662
    @scootergirl3662 ปีที่แล้ว +6

    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
      @dance3rt ปีที่แล้ว

      Thank you your way helped me

  • @KA3AHOBA94
    @KA3AHOBA94 หลายเดือนก่อน

    Arsalan is a lion in a mongolian language.
    Tnx for video.

  • @yukimo3025
    @yukimo3025 ปีที่แล้ว +17

    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
      @laja6108 ปีที่แล้ว +9

      I can’t understand with English as my first language

    • @shivanshmishra7992
      @shivanshmishra7992 ปีที่แล้ว +1

      Turn on "Closed Captions"

    • @knowledgedose1956
      @knowledgedose1956 ปีที่แล้ว

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

  • @ray84851
    @ray84851 ปีที่แล้ว +1

    Nice tutorial, thank you!👍

  • @user-ff9el4jf6y
    @user-ff9el4jf6y ปีที่แล้ว +8

    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
      @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
      @m_yoda ปีที่แล้ว

      The same.

    • @w3hacker
      @w3hacker ปีที่แล้ว

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

    • @musaddiqali1
      @musaddiqali1 11 หลายเดือนก่อน

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

  • @404nohandlefound
    @404nohandlefound 8 หลายเดือนก่อน +1

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

  • @sabertoukali
    @sabertoukali 9 หลายเดือนก่อน

    Nice tutorial, thank you

  • @yabuking84
    @yabuking84 8 หลายเดือนก่อน +1

    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.

  • @julianvelez6563
    @julianvelez6563 ปีที่แล้ว +2

    Nice work

  • @muhammedozalp
    @muhammedozalp ปีที่แล้ว

    Thanks for this great tutorial

  • @stevenoketch6950
    @stevenoketch6950 ปีที่แล้ว

    Vite is definitely choice number one after the death of cra

  • @thanirmalai
    @thanirmalai ปีที่แล้ว +2

    how to add eslint to vite during development

  • @Yahya_Umar
    @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!

  • @randomguy1
    @randomguy1 ปีที่แล้ว

    Love you Arslan full support ❤

  • @JesusReyes-hp3nx
    @JesusReyes-hp3nx ปีที่แล้ว

    Nice Video, Thanks You!!

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan 6 หลายเดือนก่อน

    Let's always do alot of good ❤️

  • @danonmily
    @danonmily 6 หลายเดือนก่อน +2

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

  • @thespiritualjourney369
    @thespiritualjourney369 8 หลายเดือนก่อน

    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.

  • @codesoon9668
    @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
      @mezzmar ปีที่แล้ว +1

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

    • @codesoon9668
      @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.

  • @BrinleyBlogette
    @BrinleyBlogette 5 หลายเดือนก่อน +3

    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.

  • @aaaliii4u
    @aaaliii4u ปีที่แล้ว +1

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

  • @VeaceslavBARBARII
    @VeaceslavBARBARII 11 หลายเดือนก่อน

    There will be soon released vite 5
    See their migration guide

  • @user-dz7cx8fp9i
    @user-dz7cx8fp9i ปีที่แล้ว

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

  • @justkaz7104
    @justkaz7104 8 หลายเดือนก่อน +3

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

  • @m_yoda
    @m_yoda ปีที่แล้ว +2

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

  • @davoodaslani3882
    @davoodaslani3882 10 หลายเดือนก่อน

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

  • @Cahnisama
    @Cahnisama ปีที่แล้ว +2

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

    • @laja6108
      @laja6108 ปีที่แล้ว +2

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

  • @LearningLane3456
    @LearningLane3456 ปีที่แล้ว

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

  • @prinjay4u
    @prinjay4u ปีที่แล้ว

    Great sr

  • @kasper369
    @kasper369 ปีที่แล้ว

    I hope this video teaches about how to optimize my app

  • @pradeepkumar-il5wr
    @pradeepkumar-il5wr ปีที่แล้ว +2

    Hello Sir, we are from India and want to see your full video, please add audio track option on your TH-cam 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
      @w3hacker ปีที่แล้ว

      Also add Chinese please

  • @user-nf9cg9ig6u
    @user-nf9cg9ig6u ปีที่แล้ว +2

    hard to listen

  • @nareshc4828
    @nareshc4828 ปีที่แล้ว

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

  • @UnderstandingCode
    @UnderstandingCode ปีที่แล้ว +1

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

  • @bossgd100
    @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
      @mettelhed ปีที่แล้ว +2

      CRA is no longer being maintained I think.

    • @Art-y2k
      @Art-y2k ปีที่แล้ว

      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

  • @AbdifitahAbdulkadir
    @AbdifitahAbdulkadir 2 หลายเดือนก่อน

    Theme he is using name?😊

  • @AshishKumar-ft6wv
    @AshishKumar-ft6wv ปีที่แล้ว

    Perfect

  • @ashwanikumar183
    @ashwanikumar183 11 หลายเดือนก่อน

    can we add the configuration for angular also

  • @thefourhourtalk
    @thefourhourtalk 6 หลายเดือนก่อน

    save dev vite is not showing any json files

  • @user-ln6th4cm6d
    @user-ln6th4cm6d 9 หลายเดือนก่อน

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

  • @bogdanpryvalov
    @bogdanpryvalov ปีที่แล้ว +4

    i can't understand anything, he always slurps

    • @programminghacks
      @programminghacks 2 หลายเดือนก่อน

      If you can't understand you can leave. It's natural for him to speak like that.
      If you can't understand him you should at least respect his natural ability of speaking that way.

  • @chesterxp508
    @chesterxp508 7 หลายเดือนก่อน

    GoodJob!

  • @bhargavkumar
    @bhargavkumar ปีที่แล้ว

    Great

  • @nsa3679
    @nsa3679 11 หลายเดือนก่อน +1

    no hate, but i had to use subtitles

  • @Nodsaibot
    @Nodsaibot ปีที่แล้ว +2

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

  • @AntonioBenderas
    @AntonioBenderas ปีที่แล้ว

    How to import choices.js library?

  • @romi8634
    @romi8634 6 หลายเดือนก่อน +3

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

  • @arnesneyers2076
    @arnesneyers2076 11 หลายเดือนก่อน +4

    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
      @BoolFalse 10 หลายเดือนก่อน

      not even counting the fact that Bun changed plans )

  • @scottonanski4173
    @scottonanski4173 ปีที่แล้ว

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

  • @Atanepes
    @Atanepes ปีที่แล้ว +1

    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
      @chilakalajakeer9957 ปีที่แล้ว +1

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

    • @w3hacker
      @w3hacker ปีที่แล้ว

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

  • @happydaydaniel
    @happydaydaniel ปีที่แล้ว +1

    Is these another way of creating a react web?

    • @OP-ig1fj
      @OP-ig1fj ปีที่แล้ว +1

      parcel nextjs but why not just vite

    • @franklinmayoyo
      @franklinmayoyo ปีที่แล้ว +1

      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
      @OP-ig1fj ปีที่แล้ว +1

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

    • @happydaydaniel
      @happydaydaniel ปีที่แล้ว

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

    • @franklinmayoyo
      @franklinmayoyo ปีที่แล้ว +1

      @@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.

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna ปีที่แล้ว

    disappointing vite lib mode isn't talked about much

  • @vramosjd
    @vramosjd ปีที่แล้ว

    What are the prerequisites?

    • @NoSoyElPeluca
      @NoSoyElPeluca ปีที่แล้ว +1

      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
      @vramosjd ปีที่แล้ว

      @@NoSoyElPeluca Thank you!

  • @BurhanAijaz
    @BurhanAijaz ปีที่แล้ว

    what are the prerequisites

    • @NoSoyElPeluca
      @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.

  • @user-rw2wr9ul5s
    @user-rw2wr9ul5s ปีที่แล้ว +1

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

  • @user-jr4ze8je7d
    @user-jr4ze8je7d 10 หลายเดือนก่อน +1

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

  • @ibizawavey8630
    @ibizawavey8630 ปีที่แล้ว +1

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

    • @anisohassanabdulahi1999
      @anisohassanabdulahi1999 ปีที่แล้ว +1

      Python is a good beginner ❤

    • @joysaha3927
      @joysaha3927 ปีที่แล้ว +5

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

    • @OP-ig1fj
      @OP-ig1fj ปีที่แล้ว

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

    • @ibizawavey8630
      @ibizawavey8630 ปีที่แล้ว +2

      @@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
      @joysaha3927 ปีที่แล้ว

      @@ibizawavey8630 All the best! 👍

  • @senti2175
    @senti2175 ปีที่แล้ว

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

    • @rajghosh217
      @rajghosh217 ปีที่แล้ว +2

      He is Pakistan

    • @usmanahmedgoray
      @usmanahmedgoray ปีที่แล้ว +2

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

    • @-rate6326
      @-rate6326 ปีที่แล้ว

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

  • @joseleonrs9817
    @joseleonrs9817 หลายเดือนก่อน

    In spanish please 😢

  • @talhabytheway
    @talhabytheway ปีที่แล้ว

    CONGRATS ARSALAN 💗💗

  • @bharath2508
    @bharath2508 ปีที่แล้ว

    I am watching this from Akhand Hindu Rashtra aka Eurasia.

  • @bluesky-vc3tk
    @bluesky-vc3tk ปีที่แล้ว

    ❤❤❤❤

  • @jacobdawn4735
    @jacobdawn4735 ปีที่แล้ว

    hi

  • @claudettegivens9039
    @claudettegivens9039 10 หลายเดือนก่อน +1

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

  • @subhajitdey4483
    @subhajitdey4483 ปีที่แล้ว

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

  • @kim92se64
    @kim92se64 ปีที่แล้ว

    57 m

  • @scottonanski4173
    @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.

  • @toreceiveyou
    @toreceiveyou หลายเดือนก่อน

    Great but I am having a heard time to understand your english

  • @Snipergaming-14
    @Snipergaming-14 ปีที่แล้ว

    Will Chatgpt remove programmers?
    ill Chatgpt remove programmers?

    • @mossfoobar8322
      @mossfoobar8322 9 หลายเดือนก่อน

      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

  • @lunaticberserker5869
    @lunaticberserker5869 ปีที่แล้ว

    Learn ChadGPT ;)

  • @testmail3875
    @testmail3875 ปีที่แล้ว

    bht hi bakwas vite chord ke sab ho rha h

  • @user-yw6bj5oe9w
    @user-yw6bj5oe9w 3 หลายเดือนก่อน

    Why don't you speak Russian?

  • @prashantkamboj207
    @prashantkamboj207 7 หลายเดือนก่อน

    Not useful

  • @korkut31
    @korkut31 ปีที่แล้ว

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

  • @SjarMenace
    @SjarMenace ปีที่แล้ว

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

    • @laja6108
      @laja6108 ปีที่แล้ว +5

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

  • @dev_jun
    @dev_jun ปีที่แล้ว

    finally, someone from Pakistan

  • @yourgflikesit
    @yourgflikesit ปีที่แล้ว +2

    So difficult to understand, you mumble your words constantly.

  • @TodayCurrentAffairs2299
    @TodayCurrentAffairs2299 ปีที่แล้ว

    Hello Sir, we are from India and want to see your full video, please add audio track option on your TH-cam 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
    @TodayCurrentAffairs2299 ปีที่แล้ว

    Hello Sir, we are from India and want to see your full video, please add audio track option on your TH-cam 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
    @TodayCurrentAffairs2299 ปีที่แล้ว

    Hello Sir, we are from India and want to see your full video, please add audio track option on your TH-cam 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
      @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