vite VS astro

Frontend Vue with Vite, PrimeVue for components, unDraw for illustrations

I used Spring Initializr to generate the starting point of my Spring Boot application, using their MySQL guide to set up a database in Docker. I also created a React+Vite app to consume the API I plan on creating.

Why are there so many JavaScript build tools? Gulp, Grunt, Webpack, Laravel Mix, Rollup.js, and now Vite. And these are just the ones that I've worked with. Haven't we solved this problem? And why build a new tool? Why not improve existing tools?

Vite Documentation Next.js Documentation React Docs

Vite + React for the frontend

When I first set up my project, I chose TailwindCSS 3.4.17 because it was stable, reliable, and packed with all the utilities I needed to build a sleek, responsive design. Paired with Vite 6.3.2 for its blazing-fast development server and autoprefixer 10.4.21 to handle browser compatibility, my workflow felt smooth and efficient. However, as the web development landscape evolves, so do the tools we rely on. Recently, TailwindCSS 4.1 was released, and after reading through the official announcement , I realized it’s time to take my project to the next level.

I’m always on the lookout for tools that can make my workflow faster, more efficient, and enjoyable. Recently, I decided to integrate Vite into my existing TailwindCSS CLI project, all-things-digital. My goal was to modernize my build process while keeping the simplicity of my current setup intact. In this blog post, I’ll walk you through the entire process—from creating a backup branch, integrating Vite into my current codebase and modularizing my code to take advantage of what Vite has to offer. By the end of this journey, you’ll have a clear understanding of how to upgrade your own project with Vite while maintaining modularity and performance.

Vite framework is an alternative to the React framework, Vue.js lovers love it. VitePress is an open-source framework to build static websites, most importantly, documentation websites, and heavily documented websites. Do check the website, VitePress, a static site generator using markdown extension to build beautiful docs as well.

Difference between Vite and Vue? Vite is just the tool that runs your Vue app behind the scenes. Vue handles the UI stuff, Vite handles the dev server and bundling.

Framework: Astro (using Astro endpoints for the full-stack API)

Many people I know use https://astro.build/ to create impressive landing pages for products or validation. It is fully static by default which is impressive.

For our storefront, we chose Astro.js. If you haven't heard of Astro, prepare to be amazed. Its core philosophy is "Ship less JavaScript," which translates directly to incredible page load speeds and a fantastic user experience.

Hackfolio is a modern, minimal, and fully responsive portfolio template built with Astro. Designed for developers and creators, it helps you showcase your skills, experience, and projects with a clean and professional look.

If you’ve just started creating your website with Astro and have no clue how to improve your SEO, you’re not alone here.

Astro

I've been digging Astro lately, I keep eyes on Nuxt, VitePress and similar though.

That’s exactly what we set out to do with Parcs Canins — a curated directory of secure, fenced dog parks in France, built entirely with Astro.js.

// Path: astro.config.mjs - Configuring SSR with an adapter import { defineConfig } from 'astro/config'; import vercel from '@astrojs/vercel/serverless'; import react from '@astrojs/react'; import vue from '@astrojs/vue'; // https://astro.build/config export default defineConfig({ // Enable SSR for dynamic rendering output: 'server', // Deploy to Vercel serverless functions adapter: vercel(), // Add support for multiple UI frameworks integrations: [react(), vue()] });