Steve Kinney
Temporal
Vite
4 hours, 10 minutes CC
Course Description
Learn Vite, the fast build tool for modern web projects that lets you get up and running quickly, with almost no configuration whatsoever! Tour Vite's capabilities include bundling, optimizing static assets, hot module reloading, and its rich plugin ecosystem. Integrate Vite with popular frameworks like React and Svelte and leverage dynamic imports for code splitting. By the end of this course, you'll be proficient in using Vite to streamline your development process, improve performance, and build scalable applications. See what it's like to actually enjoy using your build tools!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 14 minutes
Steve Kinney introduces Vite, a front-end build tool, and shares their experience using it. They discuss the benefits of Vite, such as fast server start, hot module reloading, and a robust ecosystem of plugins. The topics that will be covered in the lesson, including getting started with Vite, integrating with frameworks like React and Svelte, optimizing static assets, building libraries, implementing module federation, and extending Vite's functionality, are also discussed in this segment.
Initial Setup
Section Duration: 26 minutes
Steve introduces the Vite framework and demonstrates how to get started with a Vite app. They show how to import files and modules, and how Vite automatically bundles and optimizes the code. They also discuss the production build and how Vite handles static assets.
Steve explains how to split an application into multiple chunks using ECMAScript modules. They demonstrate two ways to import files: one that immediately imports the file and one that returns a promise and dynamically fetches the module when the import statement is called. They also discuss the use of Vite Preview, a tool that spins up a web server to test the built production assets and verify the build process.
Steve challenges the students to dynamically load another JavaScript file called "banner.js" when a certain condition is met (e.g., when the counter goes below zero or above ten). Students are encouraged to experiment with dynamically loading the "banner.js" file and observe how it gets split into separate bundles during the build process.
Styling with Vite
Section Duration: 26 minutes
Steve discusses different options for pulling in CSS in a Vite project and how Vite resolves relative paths and bundles the CSS. They also demonstrate how to import CSS in JavaScript and explain how it can be useful for splitting out stylesheets. CSS modules and how to use them to scope styles to specific files is also covered in this segment.
Steve guides students through the process of creating a dynamically loaded banner using CSS modules. Students are encouraged to experiment with different approaches, such as using dynamic imports and different file extensions, to observe the impact on the build process and network tab. The goal is to develop an intuitive understanding of how code structure affects performance and to follow coding standards that result in performant JavaScript.
Steve discusses various ways to process CSS using post-CSS. They demonstrate how to set up post-CSS and configure it by adding plugins such as Tailwind, CSS Nano, and Auto Prefixer. They also show how to use SASS or SCSS in a Vite project by simply installing the SASS dependency.
TypeScript and Frameworks
Section Duration: 15 minutes
Steve explains that TypeScript is natively supported in Vite by simply changing the file extension to .ts. They also mention that Vite does not perform type checking, but tools like VS Code can handle that in the editor. They recommend running the TypeScript compiler separately before building to catch any compilation errors.
Steve demonstrates how to use templates in Vite to quickly set up a project with a specific framework, such as React. They explain how to configure Vite to support React by adding the "plugin-react" plugin and also mention other available plugins and resources for using Vite with different frameworks and tools.
Assets & Imports
Section Duration: 1 hour, 11 minutes
Steve discusses how to handle static assets in Vite, By default, anything in the public directory is copied over as is, while anything in the source directory can be accessed. They demonstrate how to import an image from the source directory and how Vite automatically adds a hash to the image URL to bust the cache if the image changes.
Steve asks students to grab a small image (favicon) and a large image and import them into their project. The learner is then asked to observe the differences in how Vite handles the two images. Vite will inline the small image, converting it into a base64 encoded image and including it directly in the file, while the large image will be split, hashed, and cached automatically.
Steve introduces Vite Image Tools and guides the students through the initial setup process, including installing the Vite Image Tools plugin and creating a configuration file. They also mention that there might be some issues with M1 MacBook users and provide a command to fix it if necessary.
Steve demonstrates the ability to resize images, change file formats, and access image metadata using various image tool directives. They also mention other query parameters available in Vite, such as importing raw text or CSS files. The lesson concludes by discussing the limitations of dynamic sources in Vite and mentioning a plugin that can provide more flexibility.
Steve discusses how import.meta can be used to access environment variables and provides examples of how to use them in development and production environments. They also demonstrate how to add environment files and customize environment variables in Vite. Additionally, they address how to handle import.meta in TypeScript and provide a solution for accessing environment variables in a TypeScript project.
Steve explains how Vite allows developers to import JSON files in Node and treat them like JavaScript objects. They discuss the limitations of using common JS and how Vite solves the problem by enabling tree shaking, which allows developers to selectively import only the necessary fields from a JSON file, reducing the bundle size.
Steve demonstrates how to use glob imports to match and import multiple files that match a specific pattern, such as importing all SVG files from a folder. They also show how to use eager loading to resolve all the promises at once, making it easier to work with the imported files.
Steve explains how to use the import.meta.glob function to import and iterate over JSON files in a directory. The goal is to generate tests based on the JSON data and ensure that the snapshots match. Various use cases for import.meta.glob, such as using it for fixture data or iterating over files based on the file system are also discussed in this segment.
Building Libraries
Section Duration: 54 minutes
Steve explains that Vite is great for creating open-source libraries, especially if you're working with TypeScript or different file types. How to configure Vite to build a library, including specifying the entry point, setting the library name, and configuring external dependencies, is demonstrated. They also show how to optimize the library build by excluding unnecessary dependencies like React.
Steve explains how to use vite-plugin-dts to generate declaration files for a TypeScript library. They discuss various options available with the plugin and show how to configure the Vite build options to exclude unnecessary files from the library build. Additionally, they mention the possibility of having multiple Vite configurations for different projects.
Steve explains how to inline CSS styles in a Vite project using a Vite plugin called "vite-plugin-lib-inject-css". They demonstrate how to install the plugin and import it into the project. By doing this, the CSS styles will be bundled together with the module, allowing users to easily import the module and automatically get the associated styles without any additional setup.
Steve walks through the process of adding additional information to the package.json file, including specifying the main file for CommonJS and ES modules, and pointing to the location of the types. They also discuss how to use the library in another Vite application.
Steve delves into the implementation of Module Federation using Vite. The process of building a library, hosting it on the internet, and allowing consuming apps to fetch and use the module at runtime is covered in this segment.
Steve explores the use of module federation, discussing the possibility of assigning a function to the exposed object and experimenting with programmatic manipulation. Practical demonstrations and addressing TypeScript-related issues are also covered in this segment.
Plugins
Section Duration: 31 minutes
Steve discusses that a Vite plugin is essentially a function that conforms to a specific shape and can be used to modify the code during the build process. They also mention that there are various hooks available in the plugin development process and provide examples of how plugins can be used to perform specific tasks, such as parsing YAML files or creating virtual modules.
Steve demonstrates how to create a Vite plugin that transforms Markdown files into HTML. They install the "markdown-it" package, create a helper function to read and render Markdown files, and then create the plugin function that intercepts the loading of Markdown files and returns the transformed HTML. They also mention that this technique can be extended to perform other custom transformations on files.
Steve explores the capabilities of Vite plugins and demonstrates how they can be used to manipulate and transform different file types. They show an example of converting a markdown file into JavaScript using a Vite plugin and discuss how plugins can be used to strip out certain attributes or perform other custom transformations during the build process.
Wrapping Up
Section Duration: 9 minutes
Steve wraps up the course by explaining the concept of returning null in JavaScript, discussing the maintainability of writing your own plugins, differentiating between micro front ends and module federation, and highlighting the benefits of using Vite as a build tool. They also share their thoughts on investing in learning the lower-level functionality of Rollup and provide closing remarks.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops