Guided: Modern JavaScript Build Tools

Table of Contents

1. Challenge

   Introduction and Setup

   Welcome to the lab Modern JavaScript Build Tools.

   In this code lab, you will assume the role of a software developer tasked with integrating Vite into a project to handle common build tasks. Through the course of this lab you will learn how to:

   • Set up a new TypeScript project using Vite.
   • Explore Vite's development server and Hot Module Replacement (HMR).
   • Manage JavaScript modules, CSS, and static assets in a Vite project.
   • Build a Vite project for production.
   • Identify and troubleshoot common issues when working with Vite.

   Modern Build Tools

   Modern web development involves more than writing HTML, CSS, and JavaScript. You often need tools that transpile TypeScript, bundle modules, process CSS, optimize assets, and provide a fast development experience.

   Traditional bundlers process entire codebases before serving an application, which can lead to slow startup times as projects grow. Modern build tools address these pain points by leveraging native browser capabilities and applying intelligent optimization strategies.

   Introducing Vite

   Vite is a next-generation build tool that prioritizes speed and developer experience. It achieves lightning-fast cold starts by using native ES modules in the browser during development, serving source files directly without bundling.

   For production, Vite uses Rollup to create optimized bundles. Vite's Hot Module Replacement (HMR) updates only the changed modules instantly, preserving application state. While alternatives like esbuild exist, Vite's plugin ecosystem and framework integrations make it a popular choice for modern web projects.

   Initial Project Structure

   The project includes the following files and directories:

   • package.json: A basic package.json file with Vite and TypeScript configured as dev dependencies.
   • tsconfig.json: TypeScript configuration file.
   • vite.config.js: Vite configuration file.
   • index.html: Application entrypoint.
   • src/main.ts: An empty TypeScript file ready to be populated.
   • src/style.css: A file containing basic styles.
   • public/: An empty directory ready to store static assets.
   • resources/: A directory containing image files for use in your application.

   How to Work On Tasks

   The tasks in this lab will instruct you to make changes to various files in the project. These files are ready for you to work with in the code editor.

   While working on a task, you can preview your changes to the application. On the Terminal tab, click Run to start the development server. Once the server starts, switch to the Web Browser tab and click the Refresh button on the left to load the application.

   Checking Your Work

   To check your work for a task, click the Validate button above the task steps.

   If validation fails, expand the failed check and review the Test Output for details on what is missing or incorrect.

   The solutions for each task can be found in the solution/ directory in the Filetree.

2. Challenge

   Install and Configure a Project with Vite

   Setting Up Vite

   Vite offers a fast and efficient development environment. Instead of bundling the entire project up front, you serve source files directly, allowing you to start the development server instantly.

   When you make edits, Vite updates only the affected modules in real time. Your changes appear in the browser immediately without a full page reload, which helps you iterate quickly during development.

3. Challenge

   Transpile TypeScript

   Vite's Built-in TypeScript Support

   Vite provides native support for TypeScript without requiring additional configuration. When you import .ts or .tsx files, Vite automatically transpiles them into browser-compatible JavaScript while preserving your code's functionality.

   During development, Vite handles transpilation but does not perform type checking during Hot Module Replacement updates. This design prioritizes speed, allowing changes to appear instantly in the browser while your IDE handles type checking in the background.

4. Challenge

   Import CSS and Static Assets

   Importing CSS in Vite

   Vite treats CSS files as first-class modules. When you import a CSS file into your TypeScript or JavaScript, Vite automatically processes the file and injects the styles into your application.

   This approach allows you to organize styles alongside your code, making it clear which styles belong to each modules. During development, Vite injects CSS directly into the page, and when you modify a CSS file, Hot Module Replacement (HMR) updates the styles instantly without a full page reload. ### Processing Static Assets

   Vite handles static assets like images, fonts, and other files using two primary mechanisms:

   1. When you import assets directly into your code, Vite processes them and generates hashed filenames for cache busting in production builds.
   2. When you place files in the public/ directory, Vite serves them at the root path and copies them to the build output without modification.

   This dual approach gives you flexibility. You use imports for assets that are part of your application logic, and use the public directory for assets referenced directly in HTML or that need to maintain their original filenames.

5. Challenge

   Build for Production

   Production Builds with Vite

   Vite uses Rollup for production builds, creating optimized bundles that are ready for deployment. The build process bundles your code, minifies JavaScript and CSS, processes assets with hashed filenames for cache busting, and generates a dist directory containing all the files needed to serve your application.

   This production build is significantly smaller and faster than your development code, optimized for real-world performance. ### Previewing Production Builds

   The preview command allows you to test the production build locally before deploying, ensuring everything works as expected in a production-like environment. This step is crucial for you to catch issues that might only appear in optimized builds, such as broken asset references or missing files. ### Configuring Vite

   Vite's behavior can be customized through a vite.config.js file in your project root. This configuration file allows you to adjust build settings, configure the development server, load plugins for additional functionality like React support, and much more.

   While Vite works well with defaults, understanding configuration gives you control over your build process and enables integration with other tools and frameworks.

6. Challenge

   Troubleshooting

   Configuring the Development Server Port

   The Vite development server defaults to port 5173. You may need to use a different port if that port is already in use by another process, as port conflicts can prevent the server from starting or cause unexpected behavior.

   By explicitly configuring the port in your vite.config.js file, you ensure consistent behavior and avoid conflicts. This is especially important in team environments or when running multiple development servers simultaneously. ### Debugging with Vite

   When you encounter issues, Vite provides a debug mode that outputs detailed information about the build process, environment variables, and configuration. This debug output helps you understand what Vite is doing behind the scenes, identify configuration issues, and troubleshoot problems.

7. Challenge

   Conclusion

   Congratulations! You've successfully integrated Vite into a TypeScript project and learned how to leverage modern build tools for efficient web development.

   In this lab, you:

   • Set up Vite in a new project and configured the development server.
   • Used Vite's Hot Module Replacement to see instant updates during development.
   • Transpiled TypeScript code with Vite's built-in support.
   • Imported and processed CSS files and static assets.
   • Generated optimized production builds.
   • Configured Vite and troubleshoot common issues.

   The application you've built demonstrates production-ready patterns for using Vite as a build tool. You experienced Vite's speed firsthand and learned how its innovative design—using native ES modules in development and Rollup for production—delivers both fast development and optimized builds.

   Experiment With Your New Skills

   To continue practicing, consider the following:

   1. Experiment with importing image files from within a TypeScript module.
   2. Modify the vite.config.js file to explore other configuration options, such as setting a custom base path or configuring asset handling.
   3. Test the production build with different optimization settings to see how they affect bundle size and performance.

   Continue Your Learning Journey

   • Course: Using Vite with React
   • Guided: Using Vite with React Lab