parcel VS vite

Parcel is another alternative that requires zero configuration and is super fast. If you want a simple React setup without any hassle, Parcel is a great choice.

From its documentation [1] it looks a lot like a parceljs replacement [2], i.e. a zero config bundler which processes and bundles the dependencies in .html pages. So great for simple websites, not for replacing an entire Vite stack.

[1] https://bun.sh/docs/bundler/fullstack

[2] https://parceljs.org

Packagers are the ones we most frequently come into contact with, such as Webpack Vite and Parcel. The latter may not be commonly used, but it is also a well-established tool.

npm packages dramatically sped up the productivity of developers by being able to leverage other developers' work. However, it had a major disadvantage: cjs was not compatible with web browsers. To solve this problem, the concept of bundlers was born. browserify was the first bundler which essentially worked by traversing an entry point and "bundling" all the require()-ed code into a single .js file compatible with web browsers. As time went on, other bundlers with additional features and differentiators were introduced. Most notably webpack, parcel, rollup, esbuild and vite (in chronological order).

The AI Framework Debate

You will need a web bundler. You can use parcel.js

To run this script, we need a web bundler like parcel js.

Official Website

Someone even opened a discussion to ask if Parcel is dead. The official answer is no, Parcel is still alive, but it's in a we-are-working-on-a-large-refactor-and-no-time-for-minor-releases state. To us, it's like a "duck death": The latest version we can use is from more than a year ago, and we don't know when the next version will be released. It looks like it's dead, it acts like it's dead, so it's dead to us. Trust me, we tried.

Anima builds a React project using Vite. This was my first experience of using Anima so I will document and go through most of the prompts which I used for building this app. I think this is also a good introduction and proof of concept of how "prompt engineering" or "chain prompting" can be and how effective it is at building applications from an existing design.

// 📂 container/vite.config.js import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import federation from "@originjs/vite-plugin-federation" // https://vite.dev/config/ export default defineConfig({ plugins: [ react(), federation({ name: "container_app", remotes: { players: "http://localhost:5002/assets/remoteEntry.js" }, shared: { react: { singleton: true, requiredVersion: "^18.0.0" }, "react-dom": { singleton: true, requiredVersion: "^18.0.0" } } }) ], build: { modulePreload: false, target: "esnext", minify: false, cssCodeSplit: false } })

Looks like a lot of them are pinning to tags (which are not guaranteed to change) or SHA (https://github.com/vitejs/vite/blob/8da04227d6f818a8ad9efc00...) which is more hermetic.

We'll use Vite as a bundling solution as both Tailwind CSS and Daisy UI require importing CSS (the Get started with Tailwind CSS guide provides details on using Vite). The vite.config.ts file looks like:

Vite Documentation

The above repo contains a React 18 app created using Vite. The app’s home page displays framework logos and includes a button that tracks how many times it’s clicked:

Have you ever struggled to maintain persistent user data across your app, whether for authentication or other contexts? If so, you're not alone! In this post, I'll share my current approach to tackling this challenge in Next.js or Vite apps.

I began searching for a new test framework, and at the recommendation of Nuck, I gave Vitest a shot. It's by the developers of Vite, which I loved. I don't do a lot of frontend development, but when I do, Vite is often my choice. Unlike many other solutions to frontend builds I've tried in the past, Vite "just works" and involves minimal baggage (looking at you, Angular).