All courses
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

Guided: Using Vite with React

Unlock the full potential of modern web development with this practical, hands-on Guided Code Lab that teaches you to build React applications with the lightning-fast build tool, Vite. You'll master setting up efficient React projects, applying stylish designs effortlessly using CSS, SCSS, and CSS Modules, and managing assets and environment variables seamlessly. Explore powerful features like Glob imports to efficiently handle multiple files, simplifying your workflow. Ideal for beginners or developers looking to transition smoothly to modern build tools, this lab offers step by step tasks that sharpen your skills, boost your productivity, and empower you to create fast, scalable, and maintainable React applications.

Get started Contact sales
Labs

Path Info

Level
Clock icon Beginner
Duration
Clock icon 46m
Published
Clock icon May 08, 2025

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Introduction

    Welcome to the Guided: Using Vite With React lab. This hands-on Code Lab is perfect for beginners and web developers who want to harness the power of Vite, a modern, lightning-fast build tool, to efficiently create React applications. Throughout this lab, you’ll engage in structured, practical tasks to set up and optimize your React development workflow, style components using modern CSS techniques, manage environment variables, and handle assets and data seamlessly using Vite's powerful built-in features.

    By the end of this Code Lab, you’ll be proficient in building React apps with Vite, significantly speeding up your development process while improving maintainability and scalability. You’ll gain confidence in handling real-world development scenarios using modern best practices. ### Key Takeaways

    • Master the basics of Vite for React to create and manage high performing web applications.

    • Learn how to efficiently style React components using CSS Modules, SCSS, and standard CSS.

    • Understand how to manage environment variables securely and effectively for multiple environments.

    • Discover powerful Vite features like Glob imports for effortlessly handling multiple assets and structured data. ### Prerequisites

    Basic React Awareness

    • You should understand fundamental React concepts, such as components, JSX syntax, props, and basic state management.

    Foundational Web Development Knowledge

    • You should have a basic understanding of web development, such as HTML, CSS, build tools, etc.

    • You should have a basic understanding of JavaScript, including fundamental concepts like variables, functions, and ES6+ syntax.

    Text Editor, Terminal, & Browser Experience

    • You should have comfort using a text editor or IDE.

    • You should have experience with basic command-line operations, such as navigating directories, running scripts, and installing npm packages.

    • You should be able to open, test, and debug React applications in modern web browsers (e.g., Chrome or Firefox).

    Pizza Store App

    You have been provided with a simple pizza store React application as the starting point for this lab. Throughout the lab, you’ll progressively build and enhance the application step by step. Each step is designed to demonstrate key concepts and practical applications using Vite with React. ### __solution Folder

    • code: The final code for each step is stored in the __solution/code folder. For instance, the final code for Step 2 is available in the __solution/code/Step02 directory.

    • images: This folder contains images depicting the lab's final state for each step. For example, __solution/images/Step02 contains images depicting the final state of Step 2.

  2. Challenge

    Configure Server Settings and Test HMR

    In this step, you'll configure Vite’s development and preview servers and explore the powerful Hot Module Replacement (HMR) feature. Vite enables fast development by instantly updating your changes without fully reloading the browser, significantly speeding up your workflow.

    Note: Do not manually refresh your browser when testing HMR in this step.

    Explanation

    • port: 8080: Sets the development and preview servers to run on port 8080 instead of the default port (5173)

    • host: true: Configures the server to listen on all network interfaces, including LAN and public addresses

    • allowedHosts: ['{{hostname}}--8080.pluralsight.run']:

      • This setting allows the server to respond only to requests from the specified hostname.
      • By default, Vite only responds to localhost, domains under .localhost, and all IP addresses. When using HTTPS, this check is skipped.
      • If a string starts with ., it will allow that hostname without the dot and all its subdomains. For example, .example.com will allow example.com, foo.example.com, and foo.bar.example.com.

        Warning: If allowedHosts is set to true, the server will respond to requests from any host. This can expose your development server to DNS rebinding attacks, allowing malicious websites to access your source code and content. Therefore, you should never set allowedHosts: true unless you fully understand the risks. Additionally, you should never add broad top-level domains like .com to the allowed hosts list.

    • These configurations are applied to both the development and preview servers to ensure consistent behavior.

    Before continuing, navigate to your **Terminal** and execute the `npm` command to start the development server: 
    npm run dev

    Once the development server has started, open {{localhost}} in your browser to view the application. You’ll notice that the application currently lacks some features, which you’ll complete in subsequent lab steps.

    In the browser, navigate to the Food Rating section located in the application's sidebar. Then, type your name and add some ratings.

    Note: Do not manually refresh your browser to properly test the Hot Module Replacement (HMR) feature. Navigate back to the browser tab you opened earlier. Without refreshing the page, you’ll immediately see the new changes appear. This instant updating without a full page reload is known as Hot Module Replacement (HMR). Notice that your previous ratings remain unchanged, demonstrating how HMR preserves the application state during updates.

    You can verify the results by visiting: {{localhost}}/completed-steps/Step02/step2-completed.png

    Great work! You’ve successfully configured your Vite development and preview servers, and experienced the efficiency of HMR in action.

  3. Challenge

    Styling with CSS and CSS Preprocessors

    In this step, you'll explore how to style your React components using plain CSS, CSS Modules, and SCSS in a Vite-powered application. Vite supports importing plain CSS, CSS Modules, and preprocessors like SCSS without requiring extra configuration, making styling simple, scalable, and efficient.

    Explanation
    • Importing a CSS file into your component applies these styles globally across your React application.
    • Vite automatically handles importing and bundling CSS files, simplifying the styling process and improving development efficiency.
    Explanation

    • CSS Modules provide locally scoped styles, ensuring styles apply only to the component where they are imported, preventing global style conflicts.

    • When imported, CSS Modules generate unique class names behind the scenes, accessible through the imported styles object.

    • Vite includes built-in support for CSS Modules, automatically handling the generation of unique class names during the build process.

    • The hex color #888888 gives the paragraph a neutral gray appearance, enhancing readability without being too bold.

    > **Note**: The `sass` package must be installed to process SCSS files. It has already been installed for this lab by executing the following command: `npm i -D sass`.
    Explanation
    • The variable $light-background-color is set to a subtle, very light red color (#fff1f2) for the background.
    • SCSS allows you to define variables, improving consistency, maintainability, and readability across your application’s styles.
    • Importing an SCSS file applies the compiled styles globally, enabling you to use advanced CSS features seamlessly.
    • Vite provides native support for SCSS preprocessing, automatically compiling .scss files into standard CSS without additional configuration.
    To view the updated changes from this step, navigate to: {{localhost}}

    You can verify the results by visiting: {{localhost}}/completed-steps/Step03/step3-completed.png

    Congratulations! You’ve successfully learned how to style your React components using plain CSS, CSS Modules, and SCSS in a Vite-powered application. You are now ready to confidently manage styles in your React applications, leveraging Vite's built-in support for modern CSS workflows.

  4. Challenge

    Add Environment Variables

    In this step, you'll learn how to manage sensitive information and project-wide variables using environment variables in a Vite-powered React application. Vite supports environment variables through special .env files, allowing secure and easily configurable data management. Additionally, it provides built-in constants through the import.meta.env object, giving you convenient access to environment details such as the development mode, base URL, and more.

    Explanation

    • Environment variables let you store data that can change between different environments (development, staging, and production).

    • In Vite, environment variables must start with the VITE_ prefix to be exposed to the client-side application. This ensures that only explicitly intended variables are available in your frontend code, helping maintain security and clarity.

    Explanation
    • Vite automatically exposes environment variables under the import.meta.env object as strings.
    • Replacing hardcoded text with environment variables makes your application more flexible, maintainable, and easier to configure across different environments.

    There is also a dev panel in the app, which is not yet visible due to some issues. You'll fix it in the next task using Vite’s built-in constants.

    Explanation

    Vite exposes several built-in constants through the import.meta.env object:

    • import.meta.env.MODE: The current mode in which the application is running (e.g., development or production).
    • import.meta.env.BASE_URL: The base URL from which the app is served, which is determined by the base configuration option
    • import.meta.env.PROD: A boolean indicating whether the app is running in production mode.
    • import.meta.env.DEV: A boolean indicating whether the app is running in development mode.
    • import.meta.env.SSR: A boolean indicating whether the app is running on the server (Server-Side Rendering).

    These built-in constants allow you to conditionally render components or logic based on the environment. For example, the app can display a developer panel only when running in development mode.

    To view the updated changes from this step, navigate to: {{localhost}}

    You can verify the results by visiting: {{localhost}}/completed-steps/Step04/step4-completed.png

    Congratulations! You’ve successfully integrated environment variables into your Vite-powered React application and leveraged Vite’s built-in constants. This knowledge will help you securely manage configuration and improve your application's adaptability across different environments.

  5. Challenge

    Adding Images to Your Application

    In this step, you will learn how to add and manage image assets in a Vite-powered React application by referencing images from the public folder and importing images from the assets directory. Each method has distinct benefits and is suitable for different scenarios. Understanding when and how to use each approach will help you manage images effectively while keeping your application maintainable and optimized.

    Explanation

    • The public folder is used for static assets that should be served exactly as they are.

    • Files in the public folder are copied as-is to the root of the build directory. They retain their exact filenames and are not processed by Vite.

    • These assets are accessed using absolute URLs, such as /react.svg.

    • Typical use cases for the public folder include:

      • Files that must be served from the root (e.g., /robots.txt, /favicon.ico)
      • Assets not directly referenced in the source code
      • Files that need to retain their original names and structure (e.g., for SEO or metadata purposes)
    Explanation
    • When you import an image in Vite, it becomes part of the application’s dependency graph.
    • Vite automatically optimizes, versions (adds a hash), and includes the image in the build output.
    • This method ensures better performance, improved caching, and more control over bundled assets.
    • Benefits of importing images:
      • Assets are versioned using file hashes, reducing caching issues.
      • Images are optimized and only included in the build if they are actually used.
      • Improve consistency and modularity by keeping assets close to the components that use them.
    • Compared to using the public folder, this approach is better for assets that are directly referenced in code and benefit from build-time optimization.
    To view the updated changes from this step, navigate to: {{localhost}}

    You can verify the results by visiting: {{localhost}}/completed-steps/Step05/step5-completed.png

    Congratulations! You have learned how to use the public folder for root-level static files that should remain unprocessed in the application. You have also learned how to import images from the assets folder that are part of your component logic and should be optimized and bundled with your application.

  6. Challenge

    Importing JSON Data

    In this step, you'll discover how easily you can import data into your React components using JSON files and Vite's powerful Glob import functionality. These techniques simplify handling structured data and multiple file imports within your application.

    Explanation

    • Vite provides seamless support for importing JSON files and assets directly into your JavaScript components without requiring additional configuration.

    • JSON imports are handled automatically, making it easy and convenient to manage structured data separately from your JSX or JavaScript logic.

    • It is also possible to import only the required keys from the JSON file, as shown below:

    import { startDate, owner } from '../assets/data/companyInfo.json';
    • You can import the raw content of a text file by appending ?raw to the import path, as shown below:
    import introText from '../assets/data/intro.txt?raw';
    • If you omit the ?raw query, text files (and other static assets) are imported as URLs, as shown below:
    import aboutUsUrl from '../assets/data/about-us.txt';
    Explanation

    • Vite's Glob import functionality allows you to dynamically import multiple files that match a specific pattern (such as *.json) using the import.meta.glob() method.

    • This approach automatically creates an object (testimonialsModules) where the keys are file paths and the values are the imported file contents.

    • The { eager: true } option instructs Vite to import all matched files immediately at build time, instead of lazy-loading them later.

    • Glob imports help significantly reduce boilerplate code, especially when working with multiple files that share a common structure or purpose, such as testimonials, blog posts, or product details.

    To view the updated changes from this step, navigate to: {{localhost}}

    You can verify the results by visiting: {{localhost}}/completed-steps/Step06/step6-completed.png

    Congratulations! You’ve successfully learned how to import data from JSON files and efficiently load multiple files using Vite’s Glob import feature. These powerful techniques will streamline your workflow, making your code cleaner, more maintainable, and highly scalable.

  7. Challenge

    Build Your Application

    In this step, you'll learn how to prepare your React application for a production environment by setting environment variables specifically for production, building the application, and previewing the final build using Vite.

    Explanation

    • Vite allows you to manage environment-specific variables through .env files. These files are automatically loaded based on the current environment (mode):

      .env                # loaded in all cases
.env.local          # loaded in all cases, ignored by Git
.env.[mode]         # loaded only in the specified mode
.env.[mode].local   # loaded only in the specified mode, ignored by Git

    • You can use .env.production specifically for variables needed in the production environment, such as overriding security credentials or setting database connection strings.

    • Vite requires all variables exposed to the frontend to have a VITE_ prefix.

    Explanation

    • Running npm run build creates an optimized, minified production build of your application.

    • Vite compiles your code, bundles assets, optimizes images, and outputs everything into the dist directory—ready for deployment.

    After successfully building the application, execute the appropriate `npm` command in your **Terminal** to preview your production build locally. 
    npm run preview

    After running the preview command, to see your changes and verify the production build, navigate to: {{localhost}}

    You can verify the results by visiting: {{localhost}}/completed-steps/Step07/step7-completed.png Excellent job! You’ve successfully learned how to set production-specific environment variables, create an optimized production build of your React application, and preview the final build locally.

    Congratulations, you have successfully completed the lab!

Asmin Bhandari - Labs - Asmin B.
Author
Asmin Bhandari

Asmin Bhandari is a full stack developer with years of experience in designing, developing and testing many applications and web based systems.

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.
Ready to get started?
View individual plans View team plans