title
Learn Vite – Frontend Build Tool Course

description
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 YouTube: https://youtube.com/khattakdev Twitter: https://twitter.com/khattakdev Instagram: https://www.instagram.com/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: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Learn Vite – Frontend Build Tool Course', 'heatmap': [{'end': 382.773, 'start': 271.002, 'weight': 0.999}, {'end': 1156.21, 'start': 1090.732, 'weight': 0.81}, {'end': 2022.77, 'start': 1965.614, 'weight': 0.828}, {'end': 2630.84, 'start': 2509.935, 'weight': 0.835}, {'end': 2842.466, 'start': 2674.846, 'weight': 0.732}], 'summary': 'A course on vite, a fast build tool for javascript, covers its features, usage, and deployment, comparing it to create react app, setting up vite with vanilla and javascript, integrating tailwind css, deploying applications to github, netlify, and versa, deploying vite applications to github, netlify, and vercel, configuring vite projects, defining config, managing environment variables, and vid.js overview.', 'chapters': [{'end': 173.581, 'segs': [{'end': 31.643, 'src': 'embed', 'start': 0.069, 'weight': 0, 'content': [{'end': 5.791, 'text': 'Vite is a build tool and development server designed specifically for modern web development.', 'start': 0.069, 'duration': 5.722}, {'end': 11.392, 'text': 'It helps with fast and efficient building and bundling of JavaScript applications.', 'start': 6.411, 'duration': 4.981}, {'end': 13.093, 'text': 'Hey folks, my name is Isran.', 'start': 11.652, 'duration': 1.441}, {'end': 15.453, 'text': 'I help developers to run front-end technologies.', 'start': 13.293, 'duration': 2.16}, {'end': 21.575, 'text': 'You should also check out my Instagram where I post tips, tricks, code snippets related to web technologies.', 'start': 15.613, 'duration': 5.962}, {'end': 23.917, 'text': 'so talking about running objectives.', 'start': 21.815, 'duration': 2.102}, {'end': 31.643, 'text': 'what we are going to learn in this tutorial is we will start with what is read the very basics, and then we will move on to what use it,', 'start': 23.917, 'duration': 7.726}], 'summary': 'Vite is a modern web development tool for fast javascript app building and bundling.', 'duration': 31.574, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ69.jpg'}, {'end': 149.049, 'src': 'embed', 'start': 105.139, 'weight': 1, 'content': [{'end': 109.021, 'text': 'That is because Vite is quick to set up, it takes a few seconds.', 'start': 105.139, 'duration': 3.882}, {'end': 111.743, 'text': 'Blazing fast reload regardless of the app size.', 'start': 109.501, 'duration': 2.242}, {'end': 115.685, 'text': 'Support for multiple frameworks such as Vue, Sweat, etc.', 'start': 112.163, 'duration': 3.522}, {'end': 121.228, 'text': 'Out of the box support for TypeScript, JSX, and CSS, and many more features.', 'start': 116.265, 'duration': 4.963}, {'end': 128.984, 'text': 'In terms of technical knowledge, this course is for beginners.', 'start': 126.283, 'duration': 2.701}, {'end': 136.306, 'text': 'Having a greater understanding of technologies such as Create React App, React, Vue, and Angular is more than enough.', 'start': 129.184, 'duration': 7.122}, {'end': 141.347, 'text': 'To use Vite, you need to have the Node version of at least 4.18.', 'start': 136.846, 'duration': 4.501}, {'end': 143.188, 'text': 'However, this depends on the templates.', 'start': 141.347, 'duration': 1.841}, {'end': 149.049, 'text': 'Some require a higher version of Node.js, but for most of them, you can go for 14.18.', 'start': 143.568, 'duration': 5.481}], 'summary': "Vite offers quick setup, blazing fast reload, and supports multiple frameworks with out-of-the-box typescript, jsx, and css support. it's suitable for beginners, with node version 4.18 or later required.", 'duration': 43.91, 'max_score': 105.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ105139.jpg'}], 'start': 0.069, 'title': 'Introduction to vite for modern web development', 'summary': 'Introduces vite, a fast and efficient build tool for javascript applications, covering its features, usage, and deployment, suitable for beginners with a minimum node version requirement of 14.18.', 'chapters': [{'end': 173.581, 'start': 0.069, 'title': 'Introduction to vite for modern web development', 'summary': 'Introduces vite, a fast and efficient build tool for javascript applications, covering its features, usage, and deployment, suitable for beginners with a minimum node version requirement of 14.18.', 'duration': 173.512, 'highlights': ['Vite is a fast and efficient build tool for modern web development, providing quick setup and blazing fast reload, suitable for beginners with a minimum Node version requirement of 14.18. Vite is designed for modern web development, offering fast and efficient building and bundling of JavaScript applications. It is quick to set up, with blazing fast reload regardless of app size, and suitable for beginners with a minimum Node version requirement of 14.18.', 'Vite supports multiple frameworks such as Vue, Svelte, etc., and provides out-of-the-box support for TypeScript, JSX, and CSS. Vite supports multiple frameworks like Vue, Svelte, and more, and provides out-of-the-box support for TypeScript, JSX, and CSS.', 'To use Vite, a minimum Node version of 14.18 is required, although some templates may require a higher version. To use Vite, a minimum Node version of 14.18 is required, with some templates possibly needing a higher version.']}], 'duration': 173.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ69.jpg', 'highlights': ['Vite is a fast and efficient build tool for modern web development, providing quick setup and blazing fast reload, suitable for beginners with a minimum Node version requirement of 14.18.', 'Vite supports multiple frameworks such as Vue, Svelte, etc., and provides out-of-the-box support for TypeScript, JSX, and CSS.', 'To use Vite, a minimum Node version of 14.18 is required, although some templates may require a higher version.']}, {'end': 1061.29, 'segs': [{'end': 198.646, 'src': 'embed', 'start': 173.581, 'weight': 0, 'content': [{'end': 178.962, 'text': 'Vite is known for being super fast especially when you compare it with create react app.', 'start': 173.581, 'duration': 5.381}, {'end': 185.503, 'text': 'That is because create react app will download many dependencies including webpack which takes a lot of time.', 'start': 179.602, 'duration': 5.901}, {'end': 191.044, 'text': 'Comparing that to vite it takes a few seconds because vite only makes the project structure.', 'start': 185.983, 'duration': 5.061}, {'end': 198.646, 'text': 'To install dependencies, you have to do npm install, but the good thing is with vite, there are only few dependencies, making the process quick,', 'start': 191.264, 'duration': 7.382}], 'summary': 'Vite is significantly faster than create react app, taking only a few seconds to set up due to minimal dependencies.', 'duration': 25.065, 'max_score': 173.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ173581.jpg'}, {'end': 390.041, 'src': 'heatmap', 'start': 257.37, 'weight': 2, 'content': [{'end': 263.656, 'text': 'Vite uses the dynamic import and only reloads the route and modules that needs to be reloaded.', 'start': 257.37, 'duration': 6.286}, {'end': 267.78, 'text': 'This technique makes Vite project fast regardless of the app size.', 'start': 264.057, 'duration': 3.723}, {'end': 271.002, 'text': 'so, now that you have the basic idea of what wheat is,', 'start': 268.2, 'duration': 2.802}, {'end': 278.248, 'text': 'what are the features of wheat and what makes it different or fast as compared to the other front-end tools like create react app,', 'start': 271.002, 'duration': 7.246}, {'end': 286.816, 'text': "let's dive into the hands-on and see how can we create projects using wheat, how can we deploy them to github, to bursar and to netrify,", 'start': 278.248, 'duration': 8.568}, {'end': 289.538, 'text': 'and how can we configure our wheat projects.', 'start': 286.816, 'duration': 2.722}, {'end': 300.948, 'text': "Alright, let's talk about how to create a static server, just a simple plain JavaScript and HTML website using Vite.", 'start': 293.666, 'duration': 7.282}, {'end': 306.41, 'text': 'First thing first that we need to do is to add Vite in as a project dependency.', 'start': 301.228, 'duration': 5.182}, {'end': 312.212, 'text': 'So for that, what we need to do is npm install dash dash save dev Vite.', 'start': 306.45, 'duration': 5.762}, {'end': 321.398, 'text': 'right, we have read install and if we go to the project.json, we can see it here.', 'start': 316.417, 'duration': 4.981}, {'end': 327.74, 'text': "so with that let's create an index.html file here and add something here.", 'start': 321.398, 'duration': 6.342}, {'end': 335.101, 'text': 'so, for example, hello world, save this, and now we want to start the server.', 'start': 327.74, 'duration': 7.361}, {'end': 338.242, 'text': 'um so for that we need to go to package.json.', 'start': 335.101, 'duration': 3.141}, {'end': 349.221, 'text': 'this should be add, add scripts and in the scripts for now you only need one script, that is dev, which stands for development.', 'start': 338.242, 'duration': 10.979}, {'end': 351.223, 'text': 'so this is to start a development server.', 'start': 349.221, 'duration': 2.002}, {'end': 355.245, 'text': "so for that we will do wheat dev, and that's it.", 'start': 351.223, 'duration': 4.022}, {'end': 362.151, 'text': "so now let's try this and for that npm, run dev and our server is started.", 'start': 355.245, 'duration': 6.906}, {'end': 364.533, 'text': "so let's see that in the browser.", 'start': 362.151, 'duration': 2.382}, {'end': 369.578, 'text': 'all right, we have our server started and running and as you can see this here in the browser,', 'start': 364.533, 'duration': 5.045}, {'end': 374.884, 'text': 'let me also open the inspect elements and maybe console.', 'start': 369.578, 'duration': 5.306}, {'end': 379.949, 'text': 'so yeah, with that, so we have our server started.', 'start': 374.884, 'duration': 5.065}, {'end': 382.773, 'text': "so next thing is let's try to add javascript here.", 'start': 379.949, 'duration': 2.824}, {'end': 390.041, 'text': "so let me make main.js and for now let's simply go with console.log.", 'start': 382.773, 'duration': 7.268}], 'summary': 'Vite uses dynamic import, making projects fast. can create and deploy projects using vite. setting up a static server with vite.', 'duration': 132.671, 'max_score': 257.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ257370.jpg'}, {'end': 527.929, 'src': 'embed', 'start': 497.831, 'weight': 3, 'content': [{'end': 498.792, 'text': 'so why is that?', 'start': 497.831, 'duration': 0.961}, {'end': 509.377, 'text': 'that is because this module import will not work until unless we set the type to module for this script, and that is very simple and easy thing to do.', 'start': 498.792, 'duration': 10.585}, {'end': 523.485, 'text': 'so, type equals to module, save this and now we go back to the main.js and add console.log file and save this.', 'start': 509.377, 'duration': 14.108}, {'end': 525.547, 'text': 'and now you can see this works.', 'start': 523.485, 'duration': 2.062}, {'end': 527.929, 'text': 'so we have our.', 'start': 525.547, 'duration': 2.382}], 'summary': 'Setting type to module allows module import to work in the script.', 'duration': 30.098, 'max_score': 497.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ497831.jpg'}, {'end': 711.326, 'src': 'embed', 'start': 678.331, 'weight': 4, 'content': [{'end': 682.473, 'text': 'sometimes we may have a lot of CSS classes.', 'start': 678.331, 'duration': 4.142}, {'end': 691.797, 'text': 'And since we are using, we have reusable components and we are doing a lot of imports, exports, etc.', 'start': 683.193, 'duration': 8.604}, {'end': 697.82, 'text': 'we might end up with similar classes and that may might give us conflict.', 'start': 691.797, 'duration': 6.023}, {'end': 702.422, 'text': 'So to fix that we have a concept known as CSS modules.', 'start': 698.22, 'duration': 4.202}, {'end': 711.326, 'text': "but if you know, if you already know about that, so nothing much to explain here, and so let's try, let's see how can we do that.", 'start': 703.642, 'duration': 7.684}], 'summary': 'Using css modules to avoid conflicts due to similar classes in reusable components.', 'duration': 32.995, 'max_score': 678.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ678331.jpg'}, {'end': 951.741, 'src': 'embed', 'start': 925.28, 'weight': 5, 'content': [{'end': 933.144, 'text': 'So what we need to do here is we move the class here from here and we can add the class dynamically in using JavaScript.', 'start': 925.28, 'duration': 7.864}, {'end': 947.697, 'text': 'So for that document, dot query selector, and then we select our h1 tag and then class name equals to classes dot classes, dot title,', 'start': 933.524, 'duration': 14.173}, {'end': 950.92, 'text': 'and we save this and we have it here.', 'start': 947.697, 'duration': 3.223}, {'end': 951.741, 'text': 'hello world.', 'start': 950.92, 'duration': 0.821}], 'summary': "Using javascript, dynamically add a class to an h1 tag using document.queryselector, resulting in 'hello world.'", 'duration': 26.461, 'max_score': 925.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ925280.jpg'}], 'start': 173.581, 'title': 'Vite vs create react app', 'summary': "Compares vite and create react app, highlighting vite's faster performance due to minimal dependencies and efficient use of browser features, resulting in quick project setup, development server spin-up, and hot reloading.", 'chapters': [{'end': 394.744, 'start': 173.581, 'title': 'Vite vs create react app', 'summary': 'Discusses how vite is significantly faster than create react app, due to its minimal dependencies and efficient use of browser features, resulting in quick project setup, development server spin-up, and hot reloading.', 'duration': 221.163, 'highlights': ['Vite is significantly faster than Create React App, taking only a few seconds to make the project structure compared to the time-consuming process of downloading many dependencies, including webpack, with Create React App. Vite takes a few seconds to make the project structure, while Create React App downloads many dependencies, including webpack, which is time-consuming.', "Vite's minimal dependencies and efficient use of browser features result in quick project setup, development server spin-up, and hot reloading, regardless of the app size. Vite's minimal dependencies and use of browser features make project setup, server spin-up, and hot reloading quick, irrespective of app size.", 'Vite uses dynamic import and only reloads the required route and modules, making it fast even as the project size increases. Vite utilizes dynamic import to reload only required routes and modules, maintaining speed as project size increases.']}, {'end': 1061.29, 'start': 394.744, 'title': 'Connecting javascript and css to html', 'summary': 'Covers the process of connecting javascript and css files to an html file, including the use of modules, attributes, and dynamic class generation, and demonstrates the use of vcli to generate a project template.', 'duration': 666.546, 'highlights': ["Adding type='module' attribute to link a JavaScript file enables module imports and resolves 'cannot use import statement outside a module' error.", 'The concept of CSS modules is introduced to prevent conflicts with reusable components and multiple imports, and the process of using CSS modules is demonstrated.', 'The process of dynamically generating and adding classes using JavaScript to connect with HTML elements is explained, emphasizing the need for dynamic class generation instead of manual copying and pasting.']}], 'duration': 887.709, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ173581.jpg', 'highlights': ['Vite is significantly faster than Create React App, taking only a few seconds to make the project structure compared to the time-consuming process of downloading many dependencies, including webpack, with Create React App.', "Vite's minimal dependencies and efficient use of browser features result in quick project setup, development server spin-up, and hot reloading, regardless of the app size.", 'Vite uses dynamic import and only reloads the required route and modules, making it fast even as the project size increases.', "Adding type='module' attribute to link a JavaScript file enables module imports and resolves 'cannot use import statement outside a module' error.", 'The concept of CSS modules is introduced to prevent conflicts with reusable components and multiple imports, and the process of using CSS modules is demonstrated.', 'The process of dynamically generating and adding classes using JavaScript to connect with HTML elements is explained, emphasizing the need for dynamic class generation instead of manual copying and pasting.']}, {'end': 1686.896, 'segs': [{'end': 1162.873, 'src': 'heatmap', 'start': 1084.367, 'weight': 4, 'content': [{'end': 1087.449, 'text': 'So if I go with wheat project, it will create a new folder for us.', 'start': 1084.367, 'duration': 3.082}, {'end': 1090.472, 'text': 'But what I want is I do not want a new folder.', 'start': 1087.569, 'duration': 2.903}, {'end': 1096.376, 'text': 'Rather, what I want is to create a wheat to create the project inside this folder here.', 'start': 1090.732, 'duration': 5.644}, {'end': 1106.262, 'text': 'So I will remove this and I will just add dot so dot means that it should be generated in this folder without creating a new folder.', 'start': 1096.816, 'duration': 9.446}, {'end': 1112.466, 'text': 'And then here we have the options of which for which project we want to we will discuss some other options.', 'start': 1106.742, 'duration': 5.724}, {'end': 1116.869, 'text': 'But for now we are going to we are going to go with vanilla and JavaScript.', 'start': 1112.506, 'duration': 4.363}, {'end': 1118.57, 'text': "and that's it.", 'start': 1117.529, 'duration': 1.041}, {'end': 1121.571, 'text': 'so we have that same project generated here.', 'start': 1118.57, 'duration': 3.001}, {'end': 1130.554, 'text': 'and first thing first, that if we need to do is you can see, we have the dev dependency read, but there is no node modules.', 'start': 1121.571, 'duration': 8.983}, {'end': 1134.636, 'text': 'so which means that if i try these commands, this will not work.', 'start': 1130.554, 'duration': 4.082}, {'end': 1137.317, 'text': 'as you can see, npm run dev.', 'start': 1134.636, 'duration': 2.681}, {'end': 1141.159, 'text': 'this does not work and the reason for that is we do not have the node modules.', 'start': 1137.317, 'duration': 3.842}, {'end': 1143.36, 'text': 'this part of this dependency is not installed.', 'start': 1141.159, 'duration': 2.201}, {'end': 1146.581, 'text': "so let's simply and quickly install this npm install.", 'start': 1143.36, 'duration': 3.221}, {'end': 1156.21, 'text': 'So now, if I do it again, npm run dev this will work now, as you can see here.', 'start': 1150.066, 'duration': 6.144}, {'end': 1162.873, 'text': "But before opening this, let's get a good idea of what files we have.", 'start': 1157.59, 'duration': 5.283}], 'summary': 'Configuring and running a project with vanilla javascript, ensuring npm dependencies are installed', 'duration': 78.506, 'max_score': 1084.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1084367.jpg'}, {'end': 1462.027, 'src': 'embed', 'start': 1434.011, 'weight': 0, 'content': [{'end': 1440.516, 'text': 'So we have this all set up and this will not work because this is from the previous project that we created.', 'start': 1434.011, 'duration': 6.505}, {'end': 1442.338, 'text': "But let's try npm run dev.", 'start': 1440.917, 'duration': 1.421}, {'end': 1444.44, 'text': "And let's see what we have here.", 'start': 1442.778, 'duration': 1.662}, {'end': 1449.782, 'text': 'And yeah, we have our Vite Plus React application.', 'start': 1445.04, 'duration': 4.742}, {'end': 1456.065, 'text': 'So that is how simple it is to make our basic React application.', 'start': 1450.262, 'duration': 5.803}, {'end': 1462.027, 'text': "So yeah, with that, let's move on towards understanding how we can integrate Tailwind.", 'start': 1456.865, 'duration': 5.162}], 'summary': 'Successfully set up vite plus react application with npm run dev.', 'duration': 28.016, 'max_score': 1434.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1434011.jpg'}], 'start': 1061.53, 'title': 'Project creation and vite setup', 'summary': 'Covers creating a project with npm, specifying project name, and avoiding new folder, as well as setting up vite with vanilla and javascript, including dependency installation, project setup, react and vue.js application creation, and tailwind css integration.', 'chapters': [{'end': 1106.262, 'start': 1061.53, 'title': 'Creating a project with npm', 'summary': 'Discusses the process of creating a new project using npm, specifying the project name and avoiding the creation of a new folder.', 'duration': 44.732, 'highlights': ["The process involves typing 'npm create wait' to create a new project. The speaker mentions typing 'npm create wait' as the first step in creating a new project.", "By using 'dot' as the project name, the project is generated in the current folder without creating a new folder. The speaker explains that using 'dot' as the project name allows the project to be generated in the current folder without creating a new folder."]}, {'end': 1686.896, 'start': 1106.742, 'title': 'Setting up vite with vanilla and javascript', 'summary': 'Explains the process of setting up a vite project with vanilla and javascript, including the installation of dependencies, skipping project setup questions, creating react and vue.js applications using vite, and integrating tailwind css.', 'duration': 580.154, 'highlights': ['The chapter explains the process of setting up a Vite project with Vanilla and JavaScript, including the installation of dependencies, skipping project setup questions, creating React and Vue.js applications using Vite, and integrating Tailwind CSS. It covers the entire process of setting up Vite with Vanilla and JavaScript, creating React and Vue.js applications with Vite, and integrating Tailwind CSS.', "The transcript explains the steps to install the necessary dependencies for a Vite project, such as dev dependencies and node modules, enabling the execution of 'npm run dev'. It details the installation of dependencies, highlighting the need for dev dependencies and node modules for the successful execution of 'npm run dev'.", 'The transcript demonstrates the process of creating React and Vue.js applications using Vite, offering a quicker alternative to the traditional setup process. It showcases the efficient method of creating React and Vue.js applications using Vite, bypassing the traditional setup process.', 'The chapter explains the integration of Tailwind CSS into a Vite project, detailing the installation of dependencies, configuration setup, and application of Tailwind classes. It provides a comprehensive guide on integrating Tailwind CSS into a Vite project, covering dependency installation, configuration setup, and application of Tailwind classes.']}], 'duration': 625.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1061530.jpg', 'highlights': ['The chapter explains the integration of Tailwind CSS into a Vite project, detailing the installation of dependencies, configuration setup, and application of Tailwind classes.', 'The transcript demonstrates the process of creating React and Vue.js applications using Vite, offering a quicker alternative to the traditional setup process.', "The transcript explains the steps to install the necessary dependencies for a Vite project, such as dev dependencies and node modules, enabling the execution of 'npm run dev'.", 'The chapter explains the process of setting up a Vite project with Vanilla and JavaScript, including the installation of dependencies, skipping project setup questions, creating React and Vue.js applications using Vite, and integrating Tailwind CSS.', "By using 'dot' as the project name, the project is generated in the current folder without creating a new folder."]}, {'end': 2446.361, 'segs': [{'end': 1749.676, 'src': 'embed', 'start': 1714.542, 'weight': 0, 'content': [{'end': 1717.024, 'text': "So let's see how we can integrate Derwent into this.", 'start': 1714.542, 'duration': 2.482}, {'end': 1720.387, 'text': "So for that, again, I'm going to stop the server for now.", 'start': 1717.405, 'duration': 2.982}, {'end': 1722.91, 'text': 'And then again, install all those packages.', 'start': 1720.528, 'duration': 2.382}, {'end': 1729.575, 'text': 'So Derwent CSS, post CSS and auto pre fixer.', 'start': 1723.25, 'duration': 6.325}, {'end': 1737.864, 'text': 'just a side thing, a side note uh, this, this documentation is already available on the tavern css official website,', 'start': 1730.436, 'duration': 7.428}, {'end': 1740.547, 'text': 'so you can also check it out from there as well.', 'start': 1737.864, 'duration': 2.683}, {'end': 1741.989, 'text': 'and then we have this installed.', 'start': 1740.547, 'duration': 1.442}, {'end': 1749.676, 'text': "so let's also go with tavern css init, dash p, which will install the table and config file here.", 'start': 1741.989, 'duration': 7.687}], 'summary': 'Integrating derwent by stopping server, installing packages, and initializing config file.', 'duration': 35.134, 'max_score': 1714.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1714542.jpg'}, {'end': 1800.72, 'src': 'embed', 'start': 1765.447, 'weight': 1, 'content': [{'end': 1778.278, 'text': 'And then another one is going to be source forward slash, static static and then static dot dot, and then we have to include multiple extensions here.', 'start': 1765.447, 'duration': 12.831}, {'end': 1783.203, 'text': 'So that is JS, TS, JSX and TSX.', 'start': 1778.298, 'duration': 4.905}, {'end': 1786.887, 'text': 'Depending on what extensions we are using.', 'start': 1784.664, 'duration': 2.223}, {'end': 1790.03, 'text': 'So this one is all about JSX.', 'start': 1787.968, 'duration': 2.062}, {'end': 1792.433, 'text': 'So we can remove TypeScript extensions.', 'start': 1790.05, 'duration': 2.383}, {'end': 1800.72, 'text': 'and even, to be more specific, we can also just include dot gsx, but it depends on how.', 'start': 1793.874, 'duration': 6.846}], 'summary': 'Using multiple extensions such as js, ts, jsx, and tsx with a focus on jsx and a consideration of removing typescript extensions.', 'duration': 35.273, 'max_score': 1765.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1765447.jpg'}, {'end': 1860.323, 'src': 'embed', 'start': 1821.157, 'weight': 2, 'content': [{'end': 1831.944, 'text': "So with that, that's Yeah, one more thing that we need to do is to import the classes for the index dot to the index dot CSS.", 'start': 1821.157, 'duration': 10.787}, {'end': 1834.526, 'text': 'So go to the index dot CSS.', 'start': 1832.325, 'duration': 2.201}, {'end': 1845.418, 'text': 'And then again, tailwind components, and then tailwind utilities.', 'start': 1835.127, 'duration': 10.291}, {'end': 1847.739, 'text': 'And that is it, save this.', 'start': 1846.298, 'duration': 1.441}, {'end': 1850.98, 'text': "And now let's start the server.", 'start': 1848.659, 'duration': 2.321}, {'end': 1858.082, 'text': 'And we see the change in the in the images.', 'start': 1851.54, 'duration': 6.542}, {'end': 1860.323, 'text': 'So that means that something happened here.', 'start': 1858.482, 'duration': 1.841}], 'summary': 'Imported classes for index dot to index dot css and observed changes in images.', 'duration': 39.166, 'max_score': 1821.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1821157.jpg'}, {'end': 2022.77, 'src': 'heatmap', 'start': 1965.614, 'weight': 0.828, 'content': [{'end': 1966.754, 'text': 'For example a simple .', 'start': 1965.614, 'duration': 1.14}, {'end': 1969.575, 'text': 'env file loads in all cases and a .', 'start': 1966.754, 'duration': 2.821}, {'end': 1974.216, 'text': 'env.local also loads in all cases but is ignored by git.', 'start': 1969.575, 'duration': 4.641}, {'end': 1979.137, 'text': 'Similarly env.mode only loads in a specific mode.', 'start': 1974.836, 'duration': 4.301}, {'end': 1982.098, 'text': 'In this case the mode stands for development or production.', 'start': 1979.337, 'duration': 2.761}, {'end': 1983.099, 'text': 'And our .', 'start': 1982.438, 'duration': 0.661}, {'end': 1988.785, 'text': 'env.mode.crocker also loads in a specific mode but is ignored by git.', 'start': 1983.099, 'duration': 5.686}, {'end': 1990.347, 'text': "So let's see that in action.", 'start': 1989.046, 'duration': 1.301}, {'end': 1993.05, 'text': 'So for example, we create this new file .', 'start': 1990.587, 'duration': 2.463}, {'end': 1999.578, 'text': 'env Now this file is the file that environment variables that we have in this file will load in all cases.', 'start': 1993.05, 'duration': 6.528}, {'end': 2010.023, 'text': 'for example, if I type something here and also to keep in mind that whenever you are adding environment variables, you need to have a prefix that is,', 'start': 2000.298, 'duration': 9.725}, {'end': 2011.224, 'text': 'white underscore test.', 'start': 2010.023, 'duration': 1.201}, {'end': 2012.684, 'text': 'otherwise this will not work.', 'start': 2011.224, 'duration': 1.46}, {'end': 2015.126, 'text': 'I will give you unexpected issues.', 'start': 2012.684, 'duration': 2.442}, {'end': 2020.268, 'text': 'the next thing is we have this another environment variable that is env.roker.', 'start': 2015.126, 'duration': 5.142}, {'end': 2022.77, 'text': 'there is not much difference between this.', 'start': 2020.268, 'duration': 2.502}], 'summary': 'Different .env files load in specific cases and are ignored by git, with specific prefixes required for environment variables.', 'duration': 57.156, 'max_score': 1965.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1965614.jpg'}, {'end': 2083.346, 'src': 'embed', 'start': 2054.074, 'weight': 5, 'content': [{'end': 2059.136, 'text': 'Now the question is how can we use this in our JavaScript?', 'start': 2054.074, 'duration': 5.062}, {'end': 2061.277, 'text': 'For example, if you have used node.js.', 'start': 2059.396, 'duration': 1.881}, {'end': 2065.518, 'text': "so in node.js it's something like this node underscore process.", 'start': 2061.277, 'duration': 4.241}, {'end': 2066.438, 'text': 'underscore node.', 'start': 2065.518, 'duration': 0.92}, {'end': 2067.319, 'text': 'underscore env.', 'start': 2066.438, 'duration': 0.881}, {'end': 2075.141, 'text': 'But in case of feed, the way to use it is import.meta.env.', 'start': 2068.82, 'duration': 6.321}, {'end': 2083.346, 'text': 'And if I save this and then go back to my console, And in the console, I can see these things there.', 'start': 2075.862, 'duration': 7.484}], 'summary': 'Javascript can utilize import.meta.env, while node.js uses underscore node processing. this can be observed in the console.', 'duration': 29.272, 'max_score': 2054.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2054074.jpg'}, {'end': 2392.794, 'src': 'embed', 'start': 2359.643, 'weight': 3, 'content': [{'end': 2360.423, 'text': 'We have a salon here.', 'start': 2359.643, 'duration': 0.78}, {'end': 2364.125, 'text': 'That is the value of read underscore some underscore key.', 'start': 2361.163, 'duration': 2.962}, {'end': 2369.747, 'text': 'So the way to get it is the same as the way to get anything from dot ENV.', 'start': 2364.485, 'duration': 5.262}, {'end': 2371.908, 'text': 'The only difference is the file name.', 'start': 2370.047, 'duration': 1.861}, {'end': 2375.169, 'text': 'So that is how it works for the different modes.', 'start': 2372.288, 'duration': 2.881}, {'end': 2380.872, 'text': 'Now talking about loading priorities in ENV variable for a specific mode takes a higher priority than a generic one.', 'start': 2375.229, 'duration': 5.643}, {'end': 2392.794, 'text': 'so to show you that, for example, we have this here and i copy this and do this again here, but in this case i change this value to and save this.', 'start': 2381.232, 'duration': 11.562}], 'summary': 'Salon has a value of read_some_key, loaded from dot env, with different modes and loading priorities.', 'duration': 33.151, 'max_score': 2359.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2359643.jpg'}, {'end': 2431.733, 'src': 'embed', 'start': 2402.816, 'weight': 4, 'content': [{'end': 2406.477, 'text': 'so the more specific variables takes higher priority than the generic ones.', 'start': 2402.816, 'duration': 3.661}, {'end': 2410.94, 'text': 'Moreover, variables added to the script have the highest priority.', 'start': 2406.977, 'duration': 3.963}, {'end': 2421.466, 'text': "For example, if I go to my package.json and then here I type something, let's say white, we again go with the same key white underscore, sum,", 'start': 2411.08, 'duration': 10.386}, {'end': 2427.61, 'text': 'underscore key and set this to haddock def and save this.', 'start': 2421.466, 'duration': 6.144}, {'end': 2431.733, 'text': 'and stop the server, start it again.', 'start': 2429.412, 'duration': 2.321}], 'summary': 'Specific variables take higher priority than generic ones. variables added to the script have the highest priority.', 'duration': 28.917, 'max_score': 2402.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2402816.jpg'}], 'start': 1687.176, 'title': 'Integrating tailwind css into reactjs and vite environment variables', 'summary': "Details integrating tailwind css into a reactjs application, covering installation, configuration, and visual changes. it also explains vite's environment variables, including .env files, loading modes, and implementation in javascript, with examples of loading priorities and impacts.", 'chapters': [{'end': 1950.264, 'start': 1687.176, 'title': 'Integrating tailwind css into reactjs', 'summary': 'Details the process of integrating tailwind css into a reactjs application, including installation of packages, configuration of files, and importing classes into the css, resulting in successful integration and visual changes in the application.', 'duration': 263.088, 'highlights': ['The process of integrating Tailwind CSS into a ReactJS application is detailed, including stopping the server, installing necessary packages like Derwent CSS, post CSS, and auto prefixer, and adding configuration files. integration process, stopping the server, installation of necessary packages, adding configuration files', 'The steps for including specific files for classes, such as index.html and source files with JS, TS, JSX, TSX extensions, are explained, with options for including specific extensions based on the project requirements. including specific files for classes, options for including specific extensions, project requirements', 'The process of importing Tailwind CSS classes into the index.css file is demonstrated, and the resulting visual changes in the application are observed after starting the server, followed by resolving issues related to utility classes. importing Tailwind CSS classes, visual changes in the application, resolving issues related to utility classes']}, {'end': 2446.361, 'start': 1954.511, 'title': 'Vite environment variables', 'summary': 'Explains how environment variables work in vite, including the use of .env files, the specific modes for loading variables, and the implementation in javascript using import.meta.env, with examples of loading priorities and their impact on specific and generic variables.', 'duration': 491.85, 'highlights': ['The more specific variables takes higher priority than the generic ones Specific environment variables for a mode take higher priority than generic ones, impacting their usage and precedence.', 'Variables added to the script have the highest priority Variables added directly to the script have the highest priority, influencing the precedence of environment variables.', 'Explanation of how to use environment variables in JavaScript using import.meta.env The chapter explains the usage of environment variables in JavaScript using import.meta.env, demonstrating its implementation and showcasing the output.', 'Demonstration of loading priorities for environment variables for specific and generic modes The chapter demonstrates the loading priorities of environment variables for specific and generic modes, highlighting the impact on variable precedence.']}], 'duration': 759.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ1687176.jpg', 'highlights': ['The process of integrating Tailwind CSS into a ReactJS application is detailed, including stopping the server, installing necessary packages like Derwent CSS, post CSS, and auto prefixer, and adding configuration files.', 'The steps for including specific files for classes, such as index.html and source files with JS, TS, JSX, TSX extensions, are explained, with options for including specific extensions based on the project requirements.', 'The process of importing Tailwind CSS classes into the index.css file is demonstrated, and the resulting visual changes in the application are observed after starting the server, followed by resolving issues related to utility classes.', 'Specific environment variables for a mode take higher priority than generic ones, impacting their usage and precedence.', 'Variables added directly to the script have the highest priority, influencing the precedence of environment variables.', 'Explanation of how to use environment variables in JavaScript using import.meta.env The chapter explains the usage of environment variables in JavaScript using import.meta.env, demonstrating its implementation and showcasing the output.', 'Demonstration of loading priorities for environment variables for specific and generic modes The chapter demonstrates the loading priorities of environment variables for specific and generic modes, highlighting the impact on variable precedence.']}, {'end': 3042.121, 'segs': [{'end': 2492.022, 'src': 'embed', 'start': 2465.283, 'weight': 0, 'content': [{'end': 2472.007, 'text': 'And in this section, we are going to talk about how to deploy it to GitHub, how to deploy it to Netlify and also how to deploy it to Versa.', 'start': 2465.283, 'duration': 6.724}, {'end': 2473.668, 'text': "So let's start with GitHub.", 'start': 2472.368, 'duration': 1.3}, {'end': 2476.45, 'text': 'The first thing that you need to do is you need to have a project.', 'start': 2474.149, 'duration': 2.301}, {'end': 2479.112, 'text': 'And in this case, I again created a new template.', 'start': 2476.53, 'duration': 2.582}, {'end': 2483.835, 'text': 'And this is a vanilla JavaScript template, which means that this is a static website.', 'start': 2479.172, 'duration': 4.663}, {'end': 2492.022, 'text': 'so first thing first i am going to do is i will do npm install to install all the repositories, other dependencies, and once we are done with this,', 'start': 2483.835, 'duration': 8.187}], 'summary': 'The discussion covers deployment to github, netlify, and versa, starting with github and the process of installing dependencies.', 'duration': 26.739, 'max_score': 2465.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2465283.jpg'}, {'end': 2630.84, 'src': 'heatmap', 'start': 2507.854, 'weight': 1, 'content': [{'end': 2509.935, 'text': 'so build stands for making the production version.', 'start': 2507.854, 'duration': 2.081}, {'end': 2513.578, 'text': 'so if i do npm build, you can see a disk folder.', 'start': 2509.935, 'duration': 3.643}, {'end': 2516.419, 'text': 'so if i want to check this.', 'start': 2513.578, 'duration': 2.841}, {'end': 2518.781, 'text': 'so what i need to do is i want to.', 'start': 2516.419, 'duration': 2.362}, {'end': 2523.183, 'text': 'i need to do npm run preview and this will start the server for us.', 'start': 2518.781, 'duration': 4.402}, {'end': 2530.207, 'text': 'so if i open this, you can see this server and you can see this website, something we already know and we did this before.', 'start': 2523.183, 'duration': 7.024}, {'end': 2531.408, 'text': "so let's get back.", 'start': 2530.207, 'duration': 1.201}, {'end': 2534.73, 'text': "and one other thing is, let's say i do not want this 4173 port.", 'start': 2531.408, 'duration': 3.322}, {'end': 2541.654, 'text': 'so what i can do here is i can give it a custom port, that is port 8080.', 'start': 2536.531, 'duration': 5.123}, {'end': 2548.378, 'text': 'save this and then again do npm run preview and this will give us, uh, the localhost with 8080.', 'start': 2541.654, 'duration': 6.724}, {'end': 2550.959, 'text': 'so, uh, that is how to test it.', 'start': 2548.378, 'duration': 2.581}, {'end': 2557.183, 'text': "so once you're done with testing your website locally, testing in the build version, then the next part is to deploy it on github pages.", 'start': 2550.959, 'duration': 6.224}, {'end': 2564.987, 'text': 'so for that what i need to do is i have to make a github repository and for that i will go to my github and there create a new repository here.', 'start': 2557.183, 'duration': 7.804}, {'end': 2571.511, 'text': 'so maybe go here and then click on new repository, and then i will name this,', 'start': 2564.987, 'duration': 6.524}, {'end': 2577.535, 'text': 'read github and select myself here nothing to do here and then click on create repository.', 'start': 2571.511, 'duration': 6.024}, {'end': 2579.616, 'text': 'so we have a simple repository.', 'start': 2577.535, 'duration': 2.081}, {'end': 2582.778, 'text': 'what i need next is i need to push other code to github.', 'start': 2579.616, 'duration': 3.162}, {'end': 2584.239, 'text': 'this is pretty simple.', 'start': 2582.778, 'duration': 1.461}, {'end': 2585.319, 'text': 'these are pretty simple steps.', 'start': 2584.239, 'duration': 1.08}, {'end': 2587.08, 'text': 'you already know this, i assume.', 'start': 2585.319, 'duration': 1.761}, {'end': 2597.202, 'text': "so i'll create a console and then initialize git and then add all of these, and then last thing is initial commit all right.", 'start': 2587.08, 'duration': 10.122}, {'end': 2600.883, 'text': 'now the thing is, if this was uh.', 'start': 2597.202, 'duration': 3.681}, {'end': 2607.825, 'text': 'so in this case this is going to be wheat, dash, github, but, uh, which means that this is going to be eventually.', 'start': 2600.883, 'duration': 6.942}, {'end': 2616.891, 'text': 'uh, So this will be our repository.', 'start': 2607.825, 'duration': 9.066}, {'end': 2619.332, 'text': 'This will be our deployed website.', 'start': 2617.671, 'duration': 1.661}, {'end': 2628.859, 'text': 'But if this was not the case and we had something like this, which means that this repository was named as So,', 'start': 2619.713, 'duration': 9.146}, {'end': 2630.84, 'text': 'in that case we do not need to do anything.', 'start': 2628.859, 'duration': 1.981}], 'summary': 'The transcript covers building, testing, and deploying a website, including setting custom ports and creating a github repository.', 'duration': 43.105, 'max_score': 2507.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2507854.jpg'}, {'end': 2597.202, 'src': 'embed', 'start': 2571.511, 'weight': 3, 'content': [{'end': 2577.535, 'text': 'read github and select myself here nothing to do here and then click on create repository.', 'start': 2571.511, 'duration': 6.024}, {'end': 2579.616, 'text': 'so we have a simple repository.', 'start': 2577.535, 'duration': 2.081}, {'end': 2582.778, 'text': 'what i need next is i need to push other code to github.', 'start': 2579.616, 'duration': 3.162}, {'end': 2584.239, 'text': 'this is pretty simple.', 'start': 2582.778, 'duration': 1.461}, {'end': 2585.319, 'text': 'these are pretty simple steps.', 'start': 2584.239, 'duration': 1.08}, {'end': 2587.08, 'text': 'you already know this, i assume.', 'start': 2585.319, 'duration': 1.761}, {'end': 2597.202, 'text': "so i'll create a console and then initialize git and then add all of these, and then last thing is initial commit all right.", 'start': 2587.08, 'duration': 10.122}], 'summary': 'Creating a repository on github, pushing code, and making initial commit are simple steps.', 'duration': 25.691, 'max_score': 2571.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2571511.jpg'}, {'end': 2663.177, 'src': 'embed', 'start': 2630.98, 'weight': 4, 'content': [{'end': 2634.782, 'text': 'But in this case, this is going to be V dash GitHub.', 'start': 2630.98, 'duration': 3.802}, {'end': 2635.922, 'text': 'So that is the repository name.', 'start': 2634.802, 'duration': 1.12}, {'end': 2645.527, 'text': 'So for that we need to also change your path so that when it uploads and when we deploy the server, when we deploy the website it is deployed at.', 'start': 2636.263, 'duration': 9.264}, {'end': 2647.728, 'text': 'it is deployed in V dash GitHub.', 'start': 2645.527, 'duration': 2.201}, {'end': 2651.369, 'text': 'So for that, what we need to do is to have V config file.', 'start': 2647.808, 'duration': 3.561}, {'end': 2654.651, 'text': 'So that is V dot config dot GS.', 'start': 2651.569, 'duration': 3.082}, {'end': 2663.177, 'text': 'And then here, I need to do define config here, and then export default, define config.', 'start': 2655.251, 'duration': 7.926}], 'summary': 'Changing repository name and path for deployment to v-github', 'duration': 32.197, 'max_score': 2630.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2630980.jpg'}, {'end': 2842.466, 'src': 'heatmap', 'start': 2674.846, 'weight': 0.732, 'content': [{'end': 2682.172, 'text': 'So in this case, by default, the base path is this, which means that nothing are just a simple scratch.', 'start': 2674.846, 'duration': 7.326}, {'end': 2686.856, 'text': 'so the reason that you do not need to modify it.', 'start': 2683.073, 'duration': 3.783}, {'end': 2689.978, 'text': 'if this is khatakdev, forward sketch khatakdev.', 'start': 2686.856, 'duration': 3.122}, {'end': 2693.141, 'text': 'so that will be eventually this one khatakdev.github.io.', 'start': 2689.978, 'duration': 3.163}, {'end': 2699.246, 'text': 'so nothing here, and that is the default part, but in this case it is going to be vid-github.', 'start': 2693.141, 'duration': 6.105}, {'end': 2704.27, 'text': 'so which means that we have to modify our base path to make sure that everything work.', 'start': 2699.246, 'duration': 5.024}, {'end': 2709.054, 'text': 'so what i need to do is this should be read dash github and also a forward slash.', 'start': 2704.27, 'duration': 4.784}, {'end': 2710.195, 'text': 'so save this.', 'start': 2709.054, 'duration': 1.141}, {'end': 2714.159, 'text': "and if i now again do npm run build and let's see this.", 'start': 2710.195, 'duration': 3.964}, {'end': 2719.384, 'text': 'so npm run preview and now you can see this that the path is totally different.', 'start': 2714.159, 'duration': 5.225}, {'end': 2720.605, 'text': "so it's read github.", 'start': 2719.384, 'duration': 1.221}, {'end': 2722.026, 'text': "so let's go there now.", 'start': 2720.605, 'duration': 1.421}, {'end': 2723.147, 'text': 'here is the problem.', 'start': 2722.026, 'duration': 1.121}, {'end': 2726.45, 'text': 'uh, we have the javascript logo working, but the read logo is not working.', 'start': 2723.147, 'duration': 3.303}, {'end': 2733.434, 'text': 'so a quick fix for this is and this is something to keep in mind when you have in a different path,', 'start': 2726.87, 'duration': 6.564}, {'end': 2737.817, 'text': 'and so this currently it has a relative path and this will not work.', 'start': 2733.434, 'duration': 4.383}, {'end': 2746.241, 'text': 'because the reason for this is this is, if I click on this and open this in a new tab, This is basically not using wheat-github here.', 'start': 2737.817, 'duration': 8.424}, {'end': 2748.041, 'text': 'So the issue here is the wrong path.', 'start': 2746.481, 'duration': 1.56}, {'end': 2753.323, 'text': 'And the fix for this is if I do wheat-github and then forward slash, now this works.', 'start': 2748.401, 'duration': 4.922}, {'end': 2759.124, 'text': 'So to fix this, what we can do is we can make this an absolute path like this and save this.', 'start': 2753.683, 'duration': 5.441}, {'end': 2763.865, 'text': 'We start with server, make the build again, and then again do preview.', 'start': 2759.504, 'duration': 4.361}, {'end': 2766.65, 'text': "And let's see this now.", 'start': 2765.569, 'duration': 1.081}, {'end': 2767.53, 'text': 'So now this works.', 'start': 2766.75, 'duration': 0.78}, {'end': 2772.053, 'text': 'So that is to keep in mind that it should be absolute path, not the relative path.', 'start': 2767.911, 'duration': 4.142}, {'end': 2776.376, 'text': 'The reason that JavaScript Cocoa works is that because we are using import here.', 'start': 2772.734, 'duration': 3.642}, {'end': 2778.437, 'text': 'We just tested our build version locally.', 'start': 2776.436, 'duration': 2.001}, {'end': 2779.918, 'text': 'So everything works good.', 'start': 2778.778, 'duration': 1.14}, {'end': 2781.239, 'text': "So let's stop this.", 'start': 2780.058, 'duration': 1.181}, {'end': 2782.68, 'text': 'Get add.', 'start': 2782.22, 'duration': 0.46}, {'end': 2785.082, 'text': 'And then we just updated the path.', 'start': 2783.36, 'duration': 1.722}, {'end': 2786.523, 'text': 'Updated path.', 'start': 2785.822, 'duration': 0.701}, {'end': 2788.924, 'text': 'And then get push origin main.', 'start': 2787.303, 'duration': 1.621}, {'end': 2793.427, 'text': 'Get push origin main.', 'start': 2791.005, 'duration': 2.422}, {'end': 2797.577, 'text': 'whoops, get push origin main.', 'start': 2795.796, 'duration': 1.781}, {'end': 2803.12, 'text': 'yeah, this is because we did not copy this.', 'start': 2797.577, 'duration': 5.543}, {'end': 2808.703, 'text': 'so we have to set this and then get push origin main.', 'start': 2803.12, 'duration': 5.583}, {'end': 2814.086, 'text': "now let's go back here, refresh this and we have our project here.", 'start': 2808.703, 'duration': 5.383}, {'end': 2818.848, 'text': "so let's uh talk about how can we now make a github page here.", 'start': 2814.086, 'duration': 4.762}, {'end': 2831.821, 'text': 'so go to settings and then go to pages and then here we are gonna go with github actions and here in this case, since this is a static html file,', 'start': 2818.848, 'duration': 12.973}, {'end': 2835.062, 'text': 'so we will go with this option static html configure.', 'start': 2831.821, 'duration': 3.241}, {'end': 2836.143, 'text': 'now, here are.', 'start': 2835.062, 'duration': 1.081}, {'end': 2842.466, 'text': "we have to do couple of things here and if, in case you forget this, you can always get this in the whatever changes i'm making.", 'start': 2836.143, 'duration': 6.323}], 'summary': 'Modifying base path to fix path issues, using absolute path for javascript logo to ensure functionality, and updating path for github page setup.', 'duration': 167.62, 'max_score': 2674.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2674846.jpg'}, {'end': 2778.437, 'src': 'embed', 'start': 2753.683, 'weight': 6, 'content': [{'end': 2759.124, 'text': 'So to fix this, what we can do is we can make this an absolute path like this and save this.', 'start': 2753.683, 'duration': 5.441}, {'end': 2763.865, 'text': 'We start with server, make the build again, and then again do preview.', 'start': 2759.504, 'duration': 4.361}, {'end': 2766.65, 'text': "And let's see this now.", 'start': 2765.569, 'duration': 1.081}, {'end': 2767.53, 'text': 'So now this works.', 'start': 2766.75, 'duration': 0.78}, {'end': 2772.053, 'text': 'So that is to keep in mind that it should be absolute path, not the relative path.', 'start': 2767.911, 'duration': 4.142}, {'end': 2776.376, 'text': 'The reason that JavaScript Cocoa works is that because we are using import here.', 'start': 2772.734, 'duration': 3.642}, {'end': 2778.437, 'text': 'We just tested our build version locally.', 'start': 2776.436, 'duration': 2.001}], 'summary': 'Switch to absolute path, test build, and use import for javascript cocoa.', 'duration': 24.754, 'max_score': 2753.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2753683.jpg'}, {'end': 2887.519, 'src': 'embed', 'start': 2856.929, 'weight': 5, 'content': [{'end': 2861.31, 'text': 'if this was a simple HTML project, then we do not need to make any changes here.', 'start': 2856.929, 'duration': 4.381}, {'end': 2868.552, 'text': 'but this is a wheat project and it has some configuration, basically npm install and wheat build and wheat preview.', 'start': 2861.31, 'duration': 7.242}, {'end': 2870.172, 'text': 'that you can see here.', 'start': 2868.552, 'duration': 1.62}, {'end': 2872.313, 'text': 'so we need to add these things.', 'start': 2870.172, 'duration': 2.141}, {'end': 2880.436, 'text': 'so for that, what we need to do is let me zoom this a bit so that we can see this maybe just a little bit more.', 'start': 2872.313, 'duration': 8.123}, {'end': 2882.016, 'text': 'and yeah.', 'start': 2880.436, 'duration': 1.58}, {'end': 2887.519, 'text': 'so what we need to do here is we need to add a few more actions here.', 'start': 2882.016, 'duration': 5.503}], 'summary': 'Wheat project requires npm install, wheat build, and wheat preview configurations.', 'duration': 30.59, 'max_score': 2856.929, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2856929.jpg'}], 'start': 2446.601, 'title': 'Deploying applications and websites', 'summary': 'Covers deploying applications to github, netlify, and versa, including project setup, installation, and production version building. it also explains deploying a website on github pages, involving repository creation, path modification, and github actions setup for a project with npm dependencies.', 'chapters': [{'end': 2550.959, 'start': 2446.601, 'title': 'Deploying applications: github, netlify, versa', 'summary': 'Discusses deploying applications to github, netlify, and versa, covering topics such as project setup, installation, and building a production version using npm commands.', 'duration': 104.358, 'highlights': ['The chapter covers deploying applications to GitHub, Netlify, and Versa, with a focus on project setup, installation, and building a production version using npm commands.', 'Demonstrates the process of making a production version using the npm build command, resulting in the creation of a disk folder with the static website content.', 'Explains how to preview the production version using the npm run preview command and how to customize the server port for testing, such as changing it to port 8080.']}, {'end': 3042.121, 'start': 2550.959, 'title': 'Deploying website on github pages', 'summary': 'Explains the process of deploying a website on github pages, involving creating a repository, modifying paths, fixing relative paths, and setting up github actions for a wheat project with npm dependencies.', 'duration': 491.162, 'highlights': ['Creating a GitHub repository and pushing code The process involves creating a new repository on GitHub, initializing git, adding and committing code, and pushing it to the main branch.', 'Modifying paths for deployment Involves creating a V config file to define the base path for deployment, modifying the base path to match the repository name, and ensuring the correct path for deployment.', 'Fixing relative paths for assets Changing relative paths to absolute paths for assets to ensure proper functionality, as relative paths may not work when deploying in a different path.', 'Setting up GitHub actions for a wheat project The process includes adding actions for setting up node, installing dependencies, and building the project, along with specifying the repository path for deployment.']}], 'duration': 595.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ2446601.jpg', 'highlights': ['Covers deploying applications to GitHub, Netlify, and Versa, with a focus on project setup, installation, and building a production version using npm commands.', 'Demonstrates the process of making a production version using the npm build command, resulting in the creation of a disk folder with the static website content.', 'Explains how to preview the production version using the npm run preview command and how to customize the server port for testing, such as changing it to port 8080.', 'Creating a GitHub repository and pushing code The process involves creating a new repository on GitHub, initializing git, adding and committing code, and pushing it to the main branch.', 'Modifying paths for deployment Involves creating a V config file to define the base path for deployment, modifying the base path to match the repository name, and ensuring the correct path for deployment.', 'Setting up GitHub actions for a wheat project The process includes adding actions for setting up node, installing dependencies, and building the project, along with specifying the repository path for deployment.', 'Fixing relative paths for assets Changing relative paths to absolute paths for assets to ensure proper functionality, as relative paths may not work when deploying in a different path.']}, {'end': 3628.518, 'segs': [{'end': 3092.165, 'src': 'embed', 'start': 3042.481, 'weight': 0, 'content': [{'end': 3048.425, 'text': "So let's go back to the actions and click on this update actions, and then click on this link.", 'start': 3042.481, 'duration': 5.944}, {'end': 3051.187, 'text': 'And here we can see our web page.', 'start': 3048.965, 'duration': 2.222}, {'end': 3053.148, 'text': 'And this is successfully working.', 'start': 3051.627, 'duration': 1.521}, {'end': 3056.05, 'text': 'And we also have the Vite logo as well as the JavaScript logo.', 'start': 3053.208, 'duration': 2.842}, {'end': 3060.513, 'text': 'That is how you can deploy your Vite application to GitHub using GitHub actions and GitHub pages.', 'start': 3056.09, 'duration': 4.423}, {'end': 3063.515, 'text': "So now let's move on towards the Netlify version.", 'start': 3060.953, 'duration': 2.562}, {'end': 3067.909, 'text': "All right, let's talk about how to deploy our code to Netlify, just like we did it on GitHub.", 'start': 3063.786, 'duration': 4.123}, {'end': 3069.41, 'text': 'And for this, I made a new project.', 'start': 3068.029, 'duration': 1.381}, {'end': 3075.194, 'text': 'And this is, again, a template and a static JavaScript project.', 'start': 3069.51, 'duration': 5.684}, {'end': 3084.24, 'text': 'So for that, what we need to do first is I have to install, I have to initialize Git, and I have to commit all those files.', 'start': 3075.594, 'duration': 8.646}, {'end': 3088.823, 'text': 'So initialize, or maybe initial commit.', 'start': 3084.6, 'duration': 4.223}, {'end': 3092.165, 'text': 'And whoops, I have to put.', 'start': 3090.023, 'duration': 2.142}], 'summary': 'Deploy vite app to github using github actions & pages, and netlify similarly.', 'duration': 49.684, 'max_score': 3042.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3042481.jpg'}, {'end': 3211.608, 'src': 'embed', 'start': 3181.953, 'weight': 2, 'content': [{'end': 3187.135, 'text': 'And once installation completes, it can move on with the next steps.', 'start': 3181.953, 'duration': 5.182}, {'end': 3188.736, 'text': 'All right, it is installed.', 'start': 3187.596, 'duration': 1.14}, {'end': 3191.737, 'text': "So let's try Netlify in it.", 'start': 3188.756, 'duration': 2.981}, {'end': 3196.539, 'text': 'But before that, what you need to do is you need to do Netlify login.', 'start': 3192.417, 'duration': 4.122}, {'end': 3203.443, 'text': 'If I just do Netlify, it will probably give us commands.', 'start': 3197.519, 'duration': 5.924}, {'end': 3204.423, 'text': "so it's going.", 'start': 3203.443, 'duration': 0.98}, {'end': 3208.626, 'text': 'i will have to do sudo netrify, because i installed this using sudo.', 'start': 3204.423, 'duration': 4.203}, {'end': 3211.608, 'text': 'so yeah, it gives us other commands that we can use.', 'start': 3208.626, 'duration': 2.982}], 'summary': 'After installation, netlify login is required to proceed with further commands.', 'duration': 29.655, 'max_score': 3181.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3181953.jpg'}, {'end': 3341.836, 'src': 'embed', 'start': 3316.179, 'weight': 3, 'content': [{'end': 3322.812, 'text': 'and if i go back to my, uh, If I go back to my Netlify, I can see that here at all the lights.', 'start': 3316.179, 'duration': 6.633}, {'end': 3328.113, 'text': 'And you can see last published was 11.21.', 'start': 3323.392, 'duration': 4.721}, {'end': 3332.414, 'text': 'So yeah, which means that we have successfully deployed our application to Netlify.', 'start': 3328.113, 'duration': 4.301}, {'end': 3338.615, 'text': 'And this is very simple as compared to using GitHub Actions and GitHub Pages.', 'start': 3332.814, 'duration': 5.801}, {'end': 3341.836, 'text': 'So yeah, our website is live and here it is.', 'start': 3338.975, 'duration': 2.861}], 'summary': 'Successfully deployed application to netlify with last published on 11.21.', 'duration': 25.657, 'max_score': 3316.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3316179.jpg'}, {'end': 3628.518, 'src': 'embed', 'start': 3593.658, 'weight': 4, 'content': [{'end': 3595.079, 'text': 'read Vercel.', 'start': 3593.658, 'duration': 1.421}, {'end': 3602.004, 'text': 'and here, to confirm this, we have v-versa-log.versa.app.', 'start': 3595.079, 'duration': 6.925}, {'end': 3607.048, 'text': 'and this is the same link v-versa.log.versa.app.', 'start': 3602.004, 'duration': 5.044}, {'end': 3613.432, 'text': 'so yeah, that is the same thing, and this was created one minute ago by me.', 'start': 3607.048, 'duration': 6.384}, {'end': 3620.477, 'text': 'so that is how to deploy your website to Versa, and pretty simple, pretty easy and very straightforward.', 'start': 3613.432, 'duration': 7.045}, {'end': 3626.255, 'text': 'so that was about deployment, all right.', 'start': 3620.477, 'duration': 5.778}, {'end': 3628.518, 'text': 'so by now, we have covered a lot of things.', 'start': 3626.255, 'duration': 2.263}], 'summary': 'Demonstrated deploying a website to versa, a simple and straightforward process created one minute ago.', 'duration': 34.86, 'max_score': 3593.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3593658.jpg'}], 'start': 3042.481, 'title': 'Deploying vite applications', 'summary': 'Details deploying a vite application to github using github actions and pages, deploying code to netlify, emphasizing automation and simplicity, with the last published date of 11.21, and then demonstrates deployment to vercel, highlighting the straightforward process and recent website creation.', 'chapters': [{'end': 3286.896, 'start': 3042.481, 'title': 'Deploying vite and netlify', 'summary': 'Outlines the process of deploying a vite application to github using github actions and github pages, and then moves on to deploying code to netlify, detailing the installation and initialization process and the necessary commands for the deployment.', 'duration': 244.415, 'highlights': ['The chapter details the deployment of a Vite application to GitHub using GitHub actions and GitHub pages, successfully demonstrating the deployment process with the Vite and JavaScript logos present on the web page.', 'The process of deploying code to Netlify is explained, including the installation and initialization steps, such as initializing Git, committing files, creating a new repository, and installing the necessary Netlify CLI npm package.', "The installation of Netlify CLI is demonstrated using npm with the '-g' flag for global install, and the completion of installation is confirmed before moving on to the next steps."]}, {'end': 3628.518, 'start': 3286.896, 'title': 'Deploying vite application to netlify and vercel', 'summary': 'Covers the process of deploying a vite application to netlify, emphasizing the simplicity and automation aspects, including the last published date of 11.21, and then proceeds to demonstrate the deployment of the same application to vercel, highlighting the straightforward process and the creation of the website one minute ago.', 'duration': 341.622, 'highlights': ['The chapter covers the process of deploying a Vite application to Netlify, emphasizing the simplicity and automation aspects, including the last published date of 11.21.', 'It demonstrates the deployment of the same application to Vercel, highlighting the straightforward process and the creation of the website one minute ago.']}], 'duration': 586.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3042481.jpg', 'highlights': ['The chapter details the deployment of a Vite application to GitHub using GitHub actions and GitHub pages, successfully demonstrating the deployment process with the Vite and JavaScript logos present on the web page.', 'The process of deploying code to Netlify is explained, including the installation and initialization steps, such as initializing Git, committing files, creating a new repository, and installing the necessary Netlify CLI npm package.', "The installation of Netlify CLI is demonstrated using npm with the '-g' flag for global install, and the completion of installation is confirmed before moving on to the next steps.", 'The chapter covers the process of deploying a Vite application to Netlify, emphasizing the simplicity and automation aspects, including the last published date of 11.21.', 'It demonstrates the deployment of the same application to Vercel, highlighting the straightforward process and the creation of the website one minute ago.']}, {'end': 4466.914, 'segs': [{'end': 3767.141, 'src': 'embed', 'start': 3741.502, 'weight': 4, 'content': [{'end': 3753.831, 'text': 'We talked about base and we talked about how to deploy our project when the path is not just the username.github.io, but username.github.io.', 'start': 3741.502, 'duration': 12.329}, {'end': 3755.412, 'text': 'forward slash repository name.', 'start': 3753.831, 'duration': 1.581}, {'end': 3759.275, 'text': 'So in that case, what we did was we added a base URL.', 'start': 3755.693, 'duration': 3.582}, {'end': 3760.716, 'text': 'We added base.', 'start': 3759.736, 'duration': 0.98}, {'end': 3767.141, 'text': 'So in that case, if you remember, we used something that is known as define config.', 'start': 3761.096, 'duration': 6.045}], 'summary': 'Discussed adding base url using define config.', 'duration': 25.639, 'max_score': 3741.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3741502.jpg'}, {'end': 3938.818, 'src': 'embed', 'start': 3910.07, 'weight': 0, 'content': [{'end': 3915.033, 'text': 'the difference here is, with defined config, Things get pretty much easy.', 'start': 3910.07, 'duration': 4.963}, {'end': 3921.95, 'text': 'things get super easy because we have the entire entire sense, giving us, giving us suggestions and all right.', 'start': 3915.033, 'duration': 6.917}, {'end': 3927.933, 'text': 'so which means that in this case we in this tutorial, we are going to use the define config,', 'start': 3921.95, 'duration': 5.983}, {'end': 3932.015, 'text': 'but feel free to go with the other basic configuration as well.', 'start': 3927.933, 'duration': 4.082}, {'end': 3933.996, 'text': "it's totally up to you, all right.", 'start': 3932.015, 'duration': 1.981}, {'end': 3938.818, 'text': 'so we already discussed base, and base is something that you already know.', 'start': 3933.996, 'duration': 4.822}], 'summary': 'Using defined configuration makes things super easy with entire sense and suggestions.', 'duration': 28.748, 'max_score': 3910.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3910070.jpg'}, {'end': 4364.498, 'src': 'embed', 'start': 4335.911, 'weight': 2, 'content': [{'end': 4345.55, 'text': 'so yeah, that is about conditional config, and based on these settings are, based on these modes, you can do conditional things, Alright.', 'start': 4335.911, 'duration': 9.639}, {'end': 4348.131, 'text': 'the next thing is async config.', 'start': 4345.55, 'duration': 2.581}, {'end': 4357.475, 'text': 'So you can use async config, for example, calling a third party API to get some data that can be used in configuration and how exactly to do that.', 'start': 4348.191, 'duration': 9.284}, {'end': 4364.498, 'text': 'So that is what you can do here is you can make this function async.', 'start': 4358.436, 'duration': 6.062}], 'summary': 'The discussion covers conditional config and async config for utilizing third-party apis.', 'duration': 28.587, 'max_score': 4335.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ4335911.jpg'}], 'start': 3628.518, 'title': 'Configuring vite projects and defined config', 'summary': 'Covers configuring a vite project by creating a feed.config.js file, adding base urls for deployment, and comparing basic configuration with defined config. it also explores the ease of using defined config, setting up conditional configurations based on different modes, and utilizing async config for third-party api calls.', 'chapters': [{'end': 3910.07, 'start': 3628.518, 'title': 'Configuring vite project', 'summary': 'Covers the configuration of a vite project, including creating a feed.config.js file, adding base urls for deployment, and comparing basic configuration with define config.', 'duration': 281.552, 'highlights': ['The chapter covers the configuration of a Vite project, including creating a feed.config.js file, adding base URLs for deployment, and comparing basic configuration with define config.', 'To configure a Vite project, a new file named feed.config.js needs to be created with basic configuration exported as default, and running npm run dev verifies the configuration.', 'Adding base URLs for deployment in GitHub pages involves using define config and modifying the base path to the desired value, with the option of using basic configuration as an alternative.', 'Comparing basic configuration with define config, the latter provides intelligence and suggestions while typing, aiding in understanding the base path functionality and its use in deployment.']}, {'end': 4466.914, 'start': 3910.07, 'title': 'Configuration tutorial: defined config', 'summary': "Covers the ease of using defined config, the concept of 'base' for hosting projects, setting up conditional configurations based on different modes, and the utilization of async config for third-party api calls.", 'duration': 556.844, 'highlights': ['Using Defined Config for Ease Defined config provides ease by offering suggestions and options for configurations, making the process super easy and convenient.', "Understanding 'Base' for Hosting Projects The 'base' parameter is used for specifying the hosting path of a project, allowing customization of the hosting location, such as localhost and specific paths (e.g., /read).", 'Implementing Conditional Configurations Conditional configurations can be set based on the development or production mode, allowing dynamic adjustments to the base path and other specific settings depending on the mode selected.', 'Utilizing Async Config for Third-Party API Calls Async config enables the incorporation of third-party API calls within the configuration process, facilitating the retrieval and utilization of data from external sources in the configuration setup.']}], 'duration': 838.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ3628518.jpg', 'highlights': ['Comparing basic configuration with define config, the latter provides intelligence and suggestions while typing, aiding in understanding the base path functionality and its use in deployment.', 'Using Defined Config for Ease Defined config provides ease by offering suggestions and options for configurations, making the process super easy and convenient.', 'Implementing Conditional Configurations Conditional configurations can be set based on the development or production mode, allowing dynamic adjustments to the base path and other specific settings depending on the mode selected.', 'Utilizing Async Config for Third-Party API Calls Async config enables the incorporation of third-party API calls within the configuration process, facilitating the retrieval and utilization of data from external sources in the configuration setup.', 'Adding base URLs for deployment in GitHub pages involves using define config and modifying the base path to the desired value, with the option of using basic configuration as an alternative.']}, {'end': 5461.637, 'segs': [{'end': 4491.831, 'src': 'embed', 'start': 4466.914, 'weight': 0, 'content': [{'end': 4472.557, 'text': 'to give you a good idea of how to get started with uh configuration and how to do the basic configurations.', 'start': 4466.914, 'duration': 5.643}, {'end': 4478.021, 'text': "All right, let's talk about how to load environment variables in your configuration file.", 'start': 4473.257, 'duration': 4.764}, {'end': 4483.144, 'text': "So for example, if we need the files for some reason, so let's see how can we do that.", 'start': 4478.061, 'duration': 5.083}, {'end': 4491.831, 'text': 'For that, maybe first thing is we need to make an environment variable file r.env so that we have something to import.', 'start': 4483.585, 'duration': 8.246}], 'summary': 'The transcript discusses getting started with configuration, loading environment variables, and creating an environment variable file for import.', 'duration': 24.917, 'max_score': 4466.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ4466914.jpg'}, {'end': 4744.017, 'src': 'embed', 'start': 4713.835, 'weight': 1, 'content': [{'end': 4720.978, 'text': 'And then apart from that, in the environment variable, the default prefix is wheat underscore, that is what what is expected.', 'start': 4713.835, 'duration': 7.143}, {'end': 4722.979, 'text': 'But if you want, you can also change that.', 'start': 4721.318, 'duration': 1.661}, {'end': 4728.442, 'text': "So let's say I want this to be rather than wheat, I want this to be app.", 'start': 4722.999, 'duration': 5.443}, {'end': 4730.523, 'text': 'And for this one as well app.', 'start': 4729.062, 'duration': 1.461}, {'end': 4735.465, 'text': 'But for that, we need to figure configure that in V dot config.', 'start': 4730.963, 'duration': 4.502}, {'end': 4744.017, 'text': 'and this is env prefix, and then here i can, i can do app underscore and save this.', 'start': 4736.045, 'duration': 7.972}], 'summary': "In the environment variable, the default prefix is 'wheat_', but it can be changed to 'app' in v.config, allowing 'app_' as the new prefix.", 'duration': 30.182, 'max_score': 4713.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ4713835.jpg'}, {'end': 4993.588, 'src': 'embed', 'start': 4966.838, 'weight': 2, 'content': [{'end': 4972.04, 'text': 'So if I stop this and if I now do npm run, dev what we get here, we get 3000..', 'start': 4966.838, 'duration': 5.202}, {'end': 4981.924, 'text': 'So what do you understand from this? The understanding here is that this server has a port that is set to 3000.', 'start': 4972.04, 'duration': 9.884}, {'end': 4985.085, 'text': 'And then we have preview, which has a part of 8080.', 'start': 4981.924, 'duration': 3.161}, {'end': 4990.407, 'text': 'So this means that whenever we execute npm run dev, it will use this port.', 'start': 4985.085, 'duration': 5.322}, {'end': 4993.588, 'text': 'And whenever we do npm run preview, it will use this port.', 'start': 4990.587, 'duration': 3.001}], 'summary': 'The server uses port 3000 for npm run dev and port 8080 for npm run preview.', 'duration': 26.75, 'max_score': 4966.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ4966838.jpg'}, {'end': 5046.044, 'src': 'embed', 'start': 5018.112, 'weight': 3, 'content': [{'end': 5023.654, 'text': 'so what you can do here is you can add strict port equals to true.', 'start': 5018.112, 'duration': 5.542}, {'end': 5033.736, 'text': 'so if you do this, this means that if this 8080 is not available, so do not search for the next port and just exit,', 'start': 5023.654, 'duration': 10.082}, {'end': 5035.997, 'text': 'close the project or close the server.', 'start': 5033.736, 'duration': 2.261}, {'end': 5039.379, 'text': 'so yeah, that is what it means.', 'start': 5036.957, 'duration': 2.422}, {'end': 5044.342, 'text': 'so maybe what i can do is i can start another server in the background and then we can.', 'start': 5039.379, 'duration': 4.963}, {'end': 5046.044, 'text': 'we can try this again.', 'start': 5044.342, 'duration': 1.702}], 'summary': "Setting 'strict port' to true ensures no port searching beyond 8080, forcing server closure if not available.", 'duration': 27.932, 'max_score': 5018.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ5018112.jpg'}, {'end': 5413.089, 'src': 'embed', 'start': 5385.26, 'weight': 4, 'content': [{'end': 5395.944, 'text': 'so if i again do this and yep, you can see this here it automatically switch, switch the focus to the chrome browser and to that specific tab.', 'start': 5385.26, 'duration': 10.684}, {'end': 5403.227, 'text': 'so, and you can also set this here as well, you can set the open here as well with index.html or whatever file you want to use,', 'start': 5395.944, 'duration': 7.283}, {'end': 5406.928, 'text': 'and with that that is.', 'start': 5403.847, 'duration': 3.081}, {'end': 5413.089, 'text': 'those are the basic commands for those are the basic configurations for vid.js.', 'start': 5406.928, 'duration': 6.161}], 'summary': 'Vid.js allows automatic focus switching and basic configurations for files.', 'duration': 27.829, 'max_score': 5385.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ5385260.jpg'}], 'start': 4466.914, 'title': 'Environment variable configurations and vid.js overview', 'summary': "Covers loading environment variables, changing variable prefix, using source maps, and configuring server and preview ports in vid.js. it also discusses managing log levels and environment directories, along with the 'open' command for browser launch.", 'chapters': [{'end': 4713.295, 'start': 4466.914, 'title': 'Configurations and environment variables', 'summary': "Discusses loading environment variables in a configuration file, including creating an environment variable file and using 'load env' to import and access the variables. it also covers options such as 'clear screen' to control console output.", 'duration': 246.381, 'highlights': ["Loading environment variables using 'load env' and accessing them The process involves creating an environment variable file, using 'load env' to import the variables, and accessing them in the code, as demonstrated by setting up and accessing the database name and password.", "Using 'clear screen' option to control console output The 'clear screen' option, when set to false, prevents the console from clearing the output, allowing previous logs to remain visible, providing control over console display behavior.", 'Creating a simple object for configuration options The chapter discusses simplifying the configuration object by converting it into a simple object, eliminating the need for a function.']}, {'end': 4905.339, 'start': 4713.835, 'title': 'Changing environment variable prefix and using source map', 'summary': "Explains how to change the environment variable prefix from 'wheat' to 'app', demonstrating the change in the prefix and the usage of source maps in css for debugging purposes.", 'duration': 191.504, 'highlights': ["Changing the environment variable prefix to 'app' The chapter explains how to change the environment variable prefix from 'wheat' to 'app', demonstrating the change in the prefix and its usage in the code.", "Demonstrating the usage of source maps in CSS for debugging purposes The chapter explains the purpose of source maps in CSS, enabling the tracing of specific properties back to their original SCSS or SAS files for debugging, by enabling the 'dev source map' property and setting it to two."]}, {'end': 5461.637, 'start': 4905.739, 'title': 'Vid.js configuration overview', 'summary': "Explains how to configure the server and preview ports, manage log levels, and set environment directories in vid.js. it also covers the 'open' command for automatic browser launch and provides a brief overview of available configurations.", 'duration': 555.898, 'highlights': ["The server has a default port of 3000, while the preview has a default port of 8080, and executing 'npm run dev' uses the server port and 'npm run preview' uses the preview port. The server default port is 3000 and the preview default port is 8080, impacting the execution of 'npm run dev' and 'npm run preview'.", "Setting 'strict port' to true ensures that the server or preview closes if the specified port is unavailable, whereas the default behavior is to find the next available port. Setting 'strict port' to true results in the server or preview closing if the specified port is unavailable, altering the default behavior.", "The 'log level' can be set to 'info', 'warn', 'error', or 'silent', with 'info' being the default, allowing control over the messages displayed in the logs. Setting the 'log level' controls the type of messages displayed in the logs, with options including 'info', 'warn', 'error', and 'silent'.", "The 'open' command can be used to automatically launch and focus the browser on a specified file, simplifying the development process. The 'open' command streamlines the development process by automatically launching and focusing the browser on a specified file.", 'The section provides guidance on setting environment directories and explains how the priority of environment variables is determined. Guidance is provided on setting environment directories and determining the priority of environment variables.']}], 'duration': 994.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VAeRhmpcWEQ/pics/VAeRhmpcWEQ4466914.jpg', 'highlights': ["Loading environment variables using 'load env' and accessing them", "Changing the environment variable prefix to 'app'", 'The server has a default port of 3000, while the preview has a default port of 8080', "Setting 'strict port' to true ensures that the server or preview closes if the specified port is unavailable", "The 'open' command can be used to automatically launch and focus the browser on a specified file"]}], 'highlights': ['Vite is significantly faster than Create React App, taking only a few seconds to make the project structure compared to the time-consuming process of downloading many dependencies, including webpack, with Create React App.', "Vite's minimal dependencies and efficient use of browser features result in quick project setup, development server spin-up, and hot reloading, regardless of the app size.", 'The process of integrating Tailwind CSS into a ReactJS application is detailed, including stopping the server, installing necessary packages like Derwent CSS, post CSS, and auto prefixer, and adding configuration files.', 'Covers deploying applications to GitHub, Netlify, and Versa, with a focus on project setup, installation, and building a production version using npm commands.', 'The chapter details the deployment of a Vite application to GitHub using GitHub actions and GitHub pages, successfully demonstrating the deployment process with the Vite and JavaScript logos present on the web page.', 'Comparing basic configuration with define config, the latter provides intelligence and suggestions while typing, aiding in understanding the base path functionality and its use in deployment.', "Loading environment variables using 'load env' and accessing them", 'The server has a default port of 3000, while the preview has a default port of 8080']}