Best of Vite — 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·1y

    Vite 6.0 is out! ​

    Vite 6.0 has been released with significant updates, including a new Environment API aimed at making development closer to production. The ecosystem has grown, with more companies using Vite and new frameworks joining. ViteConf highlighted various new projects and tools, including VoidZero's Rolldown and Oxc, and StackBlitz's bolt.new. Vite's new landing page is now at vite.dev. Important changes include Node.js support updates, extended support for asset references in HTML, and improvements like postcss-load-config. Migration to Vite 6 is generally straightforward with a detailed Migration Guide and Changelog available.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    Vite 5.1 is out!

    Vite 5.1 has been released with improvements in support for .css files, the addition of the Vite Runtime API, and various performance improvements.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    Vite PWA

    Vite PWA offers built-in default configurations for common use cases, simplifying setup for developers.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    How to Start & Setup a React project in 2024 (7 Different Ways Based on Use Cases)

    Learn about different ways to set up a React project in 2024, including React with Vite, Create React App, Next.js, Remix, Astro, Gatsby, and Docusaurus.

  5. 5
    Article
    Avatar of communityCommunity Picks·2y

    Installation • Tremor Raw

    Tremor Raw can be set up with React v18.2.0+ and Tailwind CSS v3.4+. It is compatible with frameworks like Next.js, Vite, and Remix. Additional resources include Tremor Blocks for production-ready components and a Figma UI Kit for design purposes. The Remix Icon set, licensed under Apache License 2.0, is recommended for use.

  6. 6
    Article
    Avatar of astro_sourceAstro·1y

    Astro 5.0

    Astro 5.0 introduces powerful features like the Astro Content Layer, which offers a unified, type-safe API for fetching and managing content from various sources. Additionally, Server Islands allow for a mix of static and dynamic content on the same page to optimize performance. Other highlights include simplified prerendering, type-safe environment variables with `astro:env`, integration with Vite 6, and several experimental features such as image cropping, responsive image layouts, and SVG component support. The update aims to make content-driven site building more efficient and flexible.

  7. 7
    Article
    Avatar of asayerasayer·2y

    Why Choose Vite over Create React App (CRA)

    Create React App (CRA) has been a popular tool for starting new React projects, but it struggles with performance as applications grow. Vite, a modern build tool utilizing Rollup bundler, addresses these limitations with features like native ECMAScript Modules and hot module replacement, resulting in faster build times and optimized performance. Vite's flexible configurations and extensive ecosystem offer a robust alternative to CRA. The post also details the migration process from CRA to Vite, providing a step-by-step guide for React developers.

  8. 8
    Article
    Avatar of hnHacker News·2y

    One, a React Framework

    One is a new React framework built on Vite that simplifies web and native app development with universal typed routing and an innovative data solution. It aims for simpler code and better cross-platform results by leveraging client-side databases, eliminating server boundaries, and enhancing offline functionality. The framework is designed to address web limitations such as small bundles and storage issues by partnering with Zero for data management.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    Vite + React + TS

    Combining Vite with React and TypeScript offers a powerful and efficient development setup. Vite provides a fast build tool while TypeScript enhances code quality in React applications. This combination ensures a smoother and more performant developer experience.

  10. 10
    Article
    Avatar of communityCommunity Picks·2y

    Motion Canvas

    Motion Canvas allows you to write animations in TypeScript, powered by Vite, and focus on duration, speed, and acceleration.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    Faster Pages with React ✨

    This post details the journey of transforming a React Single Page Application (SPA) homepage into a static-site generated page to improve performance and Lighthouse scores. Initially built with Parcel, the move to static-site generation with Vite resulted in a significant improvement in performance. Techniques such as restructuring the codebase, addressing various performance metrics, and specific optimizations in hydration strategies using island architecture style are highlighted. The post also covers detailed technical steps for optimizing the React components and transitions.

  12. 12
    Article
    Avatar of alternativetoAlternativeTo·2y

    Vite 6.0.0-beta.0 released

    Vite has launched its 6.0.0-beta.0 version, featuring the new Module Runner and Environment API. Users and developers are encouraged to experiment with these updates and provide feedback to ensure a smooth ecosystem upgrade.

  13. 13
    Video
    Avatar of communityCommunity Picks·2y

    How it starts - New portfolio - Devlog 1

    The post covers the setup and technical structures of a game development project. It details the use of Vite for building, Three.js for rendering, and Rapier for physics. The author discusses the implementation of singletons, event handling with EventEmitter, and the integration of physics and visuals using a debug-friendly approach. Inputs are managed via a custom Inputs class, and the project anticipates future visual and performance improvements.

  14. 14
    Article
    Avatar of collectionsCollections·2y

    The Power of Vite: A Visual Guide to the Modern Frontend Toolchain

    Vite is a fast and efficient frontend toolchain that offers features like native ES modules, hot module replacement, and optimized production builds. It has gained immense popularity among developers.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    Vite & Vue Powered Static Site Generator

    Effortlessly create beautiful documentation sites with Vite and Vue.

  16. 16
    Article
    Avatar of bytesdevBytes by ui.dev·2y

    The final boss of build tools

    Vite has rapidly become a key foundation for higher-level innovations in the web ecosystem, with many frameworks adopting it. The Vite team plans to create a unified toolchain for handling JavaScript and TypeScript from source to production. Meanwhile, Neon offers a managed Postgres service designed to simplify database management tasks. Additionally, recent tech updates include new JavaScript tools, TypeScript 5.6 beta features, and insights from the Stack Overflow 2024 Developer Survey.

  17. 17
    Article
    Avatar of trendyoltechTrendyol Tech·2y

    From Monolith to Micro Frontends: The Power of Vite and Svelte

    The post details the transition of Trendyol's Ad Management application from a monolithic to a micro frontend architecture using Svelte and Vite. It explains the reasons behind the change, the challenges faced, and how these were overcome. The team focused on improving scalability, velocity, flexibility, and CI/CD processes. They implemented Module Federation with Vite and ensured shared components were manageable through npm packages. The post also addresses caching issues and communication between microapps using Svelte stores.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    Announcing VoidZero - Next Generation Toolchain for JavaScript

    VoidZero Inc. has been founded to create a unified, high-performance development toolchain for the JavaScript ecosystem. Led by Accel, the company raised $4.6 million in seed funding. With significant expertise from core contributors to projects like Vite, VoidZero aims to address the inefficiencies and fragmentation in JavaScript tooling. The primary focus is to develop Rolldown, a new bundler for Vite, and to integrate Oxc for comprehensive tooling support. The company is committed to keeping their projects open-source while also catering to enterprise needs.

  19. 19
    Article
    Avatar of communityCommunity Picks·2y

    Utilizing Web Workers for Background Processing in React Hooks Applications.

    Using Web Workers in React applications allows for concurrent processing, enabling tasks such as complex calculations or data fetching to run in the background without affecting the UI's responsiveness. This guide demonstrates creating a sample React project utilizing custom hooks to implement web workers, ensuring the app remains interactive and smooth. The steps include setting up a React project with Vite, scaffolding the project, creating a custom hook for web workers, handling web worker states, and integrating the hook into the main application. Implementing Web Workers can significantly enhance performance, especially for CPU-intensive tasks.

  20. 20
    Article
    Avatar of communityCommunity Picks·2y

    create-tauri-ui

    Create modern Tauri desktop apps quickly using Tauri UI Templates. Start with create-tauri-ui or clone the repository. Easily scaffold projects with web technologies and customize with various templates. Features include component-based UI design with shadcn/ui, native window controls, support for dark/light modes, optimized bundle sizes, and cross-platform release support.

  21. 21
    Article
    Avatar of johnnyreillyJohn Reilly·2y

    Web Workers, Comlink, Vite and TanStack Query

    Discover how to use Web Workers with Comlink and TanStack Query in a Vite-built project. Learn to offload expensive computations to Web Workers, enhancing UI performance without blocking the main thread. The post details the setup, including using vite-plugin-comlink for smoother integration, and demonstrates using TanStack Query to manage async data interactions effectively.

  22. 22
    Article
    Avatar of PrismicPrismic·2y

    Vite vs. Next.js: Features, Comparisons, Pros & Cons, & More

    Vite and Next.js are popular tools for building React applications, each with distinct strengths. Vite, a build tool, is known for its blazing-fast development environment and on-demand file serving, making it ideal for small to medium-sized projects and SPAs. Next.js, a full-stack React framework, offers powerful features for high-performance, production-ready web applications, including server-side rendering, Incremental Static Regeneration (ISR), and advanced image optimization, making it suitable for larger, complex projects. The choice between them depends on your project's specific needs.

  23. 23
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Build a GitHub Template Repository for Scaffolding with React, Vite, and TailwindCSS

    Learn how to create a GitHub template repository for scaffolding React projects with Vite and TailwindCSS. Discover the benefits of using Vite for local development and how to configure TailwindCSS with Vite.

See all Vite archives