Learn Vite - Frontend Build Tool Course

Поделиться
HTML-код
  • Опубликовано: 7 сен 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."

  • @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 ❤❤

  • @alwaisy
    @alwaisy Год назад +6

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

  • @red5hat
    @red5hat Год назад +9

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

  • @anar2609
    @anar2609 Год назад +8

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

  • @yukimo3025
    @yukimo3025 Год назад +16

    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 Год назад +8

      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

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

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

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

  • @powerprocess_hiepdt
    @powerprocess_hiepdt Год назад +1

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

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

  • @andrewzheng9657
    @andrewzheng9657 5 месяцев назад

    Thanks for this quick intro into Vite.

  • @gattorwichar3984
    @gattorwichar3984 Год назад +3

    Ramadan Mubarak from Sudan

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

  • @jamaka_me_code796
    @jamaka_me_code796 Год назад

    00:02:05 PREREQUISITES* Great video🎉

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

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

  • @tengerzander7921
    @tengerzander7921 Год назад +2

    wow amazing, downloading now...

  • @ray84851
    @ray84851 Год назад +1

    Nice tutorial, thank you!👍

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

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

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

  • @davoodaslani3882
    @davoodaslani3882 10 месяцев назад

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

  • @danonmily
    @danonmily 6 месяцев назад +2

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

  • @thanirmalai
    @thanirmalai Год назад +2

    how to add eslint to vite during development

  • @user-dz7cx8fp9i
    @user-dz7cx8fp9i Год назад

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

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

  • @nareshc4828
    @nareshc4828 Год назад

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

  • @aaaliii4u
    @aaaliii4u Год назад +1

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

  • @julianvelez6563
    @julianvelez6563 Год назад +2

    Nice work

  • @m_yoda
    @m_yoda Год назад +2

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

  • @stevenoketch6950
    @stevenoketch6950 Год назад

    Vite is definitely choice number one after the death of cra

  • @muhammedozalp
    @muhammedozalp Год назад

    Thanks for this great tutorial

  • @sabertoukali
    @sabertoukali 9 месяцев назад

    Nice tutorial, thank you

  • @randomguy1
    @randomguy1 Год назад

    Love you Arslan full support ❤

  • @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 )

  • @thefourhourtalk
    @thefourhourtalk 6 месяцев назад

    save dev vite is not showing any json files

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

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

  • @AbdifitahAbdulkadir
    @AbdifitahAbdulkadir Месяц назад

    Theme he is using name?😊

  • @KA3AHOBA94
    @KA3AHOBA94 Месяц назад

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

  • @ashwanikumar183
    @ashwanikumar183 11 месяцев назад

    can we add the configuration for angular also

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

  • @AntonioBenderas
    @AntonioBenderas Год назад

    How to import choices.js library?

  • @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 🙃

  • @JesusReyes-hp3nx
    @JesusReyes-hp3nx Год назад

    Nice Video, Thanks You!!

  • @user-nf9cg9ig6u
    @user-nf9cg9ig6u Год назад +2

    hard to listen

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

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan 6 месяцев назад

    Let's always do alot of good ❤️

  • @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 RUclips 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

  • @justkaz7104
    @justkaz7104 8 месяцев назад +3

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

  • @Nodsaibot
    @Nodsaibot Год назад +2

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

  • @user-jr4ze8je7d
    @user-jr4ze8je7d 10 месяцев назад +1

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

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

  • @user-ln6th4cm6d
    @user-ln6th4cm6d 8 месяцев назад

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

  • @VeaceslavBARBARII
    @VeaceslavBARBARII 11 месяцев назад

    There will be soon released vite 5
    See their migration guide

  • @nsa3679
    @nsa3679 11 месяцев назад +1

    no hate, but i had to use subtitles

  • @LearningLane3456
    @LearningLane3456 Год назад

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

  • @kasper369
    @kasper369 Год назад

    I hope this video teaches about how to optimize my app

  • @scottonanski4173
    @scottonanski4173 11 месяцев назад

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

  • @UnderstandingCode
    @UnderstandingCode Год назад +1

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

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

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

  • @prinjay4u
    @prinjay4u Год назад

    Great sr

  • @AshishKumar-ft6wv
    @AshishKumar-ft6wv Год назад

    Perfect

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

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna Год назад

    disappointing vite lib mode isn't talked about much

  • @user-rw2wr9ul5s
    @user-rw2wr9ul5s Год назад +1

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

  • @bhargavkumar
    @bhargavkumar Год назад

    Great

  • @claudettegivens9039
    @claudettegivens9039 10 месяцев назад +1

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

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

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

  • @chesterxp508
    @chesterxp508 7 месяцев назад

    GoodJob!

  • @talhabytheway
    @talhabytheway Год назад

    CONGRATS ARSALAN 💗💗

  • @scottonanski4173
    @scottonanski4173 11 месяцев назад

    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.

  • @joseleonrs9817
    @joseleonrs9817 Месяц назад

    In spanish please 😢

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

  • @bluesky-vc3tk
    @bluesky-vc3tk Год назад

    ❤❤❤❤

  • @subhajitdey4483
    @subhajitdey4483 Год назад

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

  • @bharath2508
    @bharath2508 Год назад

    I am watching this from Akhand Hindu Rashtra aka Eurasia.

  • @jacobdawn4735
    @jacobdawn4735 Год назад

    hi

  • @kim92se64
    @kim92se64 Год назад

    57 m

  • @toreceiveyou
    @toreceiveyou Месяц назад

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

  • @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”

  • @lunaticberserker5869
    @lunaticberserker5869 Год назад

    Learn ChadGPT ;)

  • @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 RUclips 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 RUclips 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 RUclips 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