vite VS grunt

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).

This name has a funny background. Many years ago, I was in an IRC conversation with a developer who began describing a build tool he was making. I was a jerk and scoffed at the API, and began sketching out my own build tool. I named it grabthar after my favorite joke from Galaxy Quest. It didn't go anywhere, but I kept the source around. When it came time to write a tool for Matanuska, I decided to reuse the name. But anyway, it turns out I was talking to the author of Grunt, and boy did I look silly.

Grunt

Grunt: A JavaScript task runner.

Grunt is a JavaScript runner used to automate repetitive activities. It is useful for automating routine processes such as minification, compilation, unit testing, and linting. Grunt provides over 6k different plugins for installing and automating specific tasks with minimal effort.

Where to download the project and deploy it via AWS CloudFormation and the Grunt.js task runner.

Many web pages use CSS and JavaScript files to handle various features and styles. Each file, however, requires a separate HTTP request, which can slow down page loading. Concatenation comes into play here. It involves combining multiple CSS or JavaScript files into a single file. As a result, pages load faster, reducing the time spent requesting individual files. Gulp, Grunt, and Webpack are some of the tools that can assist you in speeding up the concatenation process. They enable seamless merging of many files during development, ensuring deployment readiness.

Once you build a simple Vite backend integration, try not to complicate Vite's configuration unless you absolutely must. Vite has become one of the most popular bundlers in the frontend space, but it wasn't the first and it certainly won't be the last. In my 7 years of building for the web, I've used Grunt, Gulp, Webpack, esbuild, and Parcel. Snowpack and Rome came-and-went before I ever had a chance to try them. Bun is vying for the spot of The New Hotness in bundling, Rome has been forked into Biome, and Vercel is building a Rust-based Webpack alternative.

Keep scripts independent: Keep your scripts independent of each other to avoid dependency issues. If you need to run one script after another, use a task runner like Gulp or Grunt to define tasks and their dependencies.

Browserify was great at bundling scripts, but what if we need to transform code - Say compile CoffeeScript to JavaScript, for this, a new group of tools for the web was born, which focussed on running code transforms. These are usually called task runners, and the most popular ones are Grunt and Gulp.

What we see, a decade ago, are that many of the "popular" libraries, frameworks, and methods, not surprisingly, have gone by the wayside, a lot that have remained in current code as difficult-to-removemodernize legacy cruft (Bower, Gulp, Grunt, Backbone, Angular 1, ...), and then we have the small minority that are still here. Some that remain have had their utility lessened/questioned by platform and language improvements (jQuery, lodash, ...), but very, very few exist that are the same now as they were then. Another fun historical reference: issue #118 of "JavaScript Weekly" (February 22, 2013) includes a first link out to asm.js.