How scripting made setting up Vite + React projects 100x easier for me
How it all began
Well, one afternoon at work, I had a couple of projects to set up and trust me, I’m no fan of the grueling process involved in setting up a folder/file structure for a project after initializing one. So I thought to myself…”why not automate the entire thing?”. Then again, it would be helpful to others who come across such a script, I mean, I can’t be the only one who feels this way about the process of creating a new project.
Yes, that there was the deciding factor I needed to start poking around the topic of scripting.
The First Step: Automating the Setup Process
One of my initial goals was simple: take the repetitive task of setting up a new Vite + React project and turn it into a streamlined process. The idea was born out of frustration, but the solution quickly became a fun technical challenge.
The first version of the script was in JavaScript using Node.js. This made sense because I was already comfortable with JavaScript, and Node.js provided the perfect environment for automating tasks with file system manipulation and child process execution.
The JavaScript Version
The Node.js script begins by asking for the project name. Then, it creates a Vite + React project using bun , a blazing-fast JavaScript runtime. Next, the script installs additional dependencies like @nextui-org/react, antd, framer-motion, and others that I frequently use in my projects.
it didn’t stop there. The script also create a standard folder structure that I always use, such as:
Public: For
fontsandimages.Src: With subfolders like
components/common,layouts,ui, and more.
Lastly, the script sets up Tailwind CSS by running bunx tailwindcss init to generate the tailwind.config.js file. it populates the configuration with my preferred setup, including integration with NextUI for themes and styles. To ensure the PostCSS plugins were ready, it also created a postcss.config.js file.
Here’s a snippet of the folder creation section:
folders.forEach((folder) => {
fs.mkdirSync(folder, { recursive: true });
});
And here’s the part where Tailwind CSS is initialized:
execSync('bunx tailwindcss init', { stdio: 'inherit' });
You can view the full Node.js script here.
Evolving into a Bash Script
While the Node.js script was powerful, I wanted a version that could run directly from the terminal without needing node . Enter the Bash script—a lightweight, terminal-based alternative for automating the process of creating Vite + React projects.
Here’s how you would initialize the Bash script.
./setup-vite-project.sh
Upon running the command, the script will prompt you for the project name:
Enter the name of your project:
Let’s say you enter:
my-awesome-project
From this point, the script takes over, automating the following steps:
Setp 1: Initialize the Vite + React Project
The script uses the following command to create a new Vite project with the React template:
bun create vite my-awesome-project --template react
This command scaffolds the basic structure of a Vite + React project in a directory named my-awesome-project.
Step 2: Install Dependencies
After the project is initialized, the script navigates into the newly created project directory:
cd my-awesome-project
It runs:
bun install
This installs the default dependencies and devDependencies specified in the package.json file created by Vite.
Next, the script installs additional dependencies I frequently use in my projects, such as @nextui-org/react, antd, framer-motion, and more:
bun add @nextui-org/react antd framer-motion prop-types react-icons react-router react-router-dom
It also installs development dependencies like tailwindcss, postcss, and autoprefixer:
bun add -d tailwindcss postcss autoprefixer
Step 3: Create the Folder Structure
To save time and maintain consistency across projects, the script automatically creates my preferred folder structure:
public/fonts
public/images
src/components/common
src/components/layouts
src/components/ui
src/components/utils
src/constants
src/lib
src/pages
The script uses the mkdir -p command to create all necessary folders in one go:
mkdir -p public/fonts public/images src/components/common src/components/layouts src/components/ui src/components/utils src/constants src/lib src/pages
Step 4: Configure Tailwind CSS
The script sets up Tailwind CSS by first initializing it with:
bunx tailwindcss init
This generates a tailwind.config.js file. The script then replaces its content with my customized configuration:
/** @type {import('tailwindcss').Config} */
import { nextui } from "@nextui-org/react";
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {},
colors: {
brand: {},
},
},
},
plugins: [nextui()],
};
Similarly, it creates a postcss.config.js file with the required plugins:
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Step 5: Final Message
Once all these steps are completed, the script prints:
Project setup complete with Tailwind CSS configuration!
At this point, I have a fully configured Vite + React project with my preferred folder structure and tools, ready for development.
Conclusion
This level of automation transformed what was once a tedious process into an efficient and repeatable workflow. The simplicity of running ./setup-vite-project.sh and having all the heavy lifting done for me was a game-changer.
However, this is just the beginning. There’s so much more this script could achieve beyond project initialization. Imagine integrating additional features like setting up a CI/CD pipeline, adding custom ESLint configurations, pre-configuring API services, or even scaffolding reusable components—all tailored to streamline development workflows further.
To encourage collaboration and innovation, this script is open source. Contributions from developers who share a similar passion for automation are more than welcome. Whether it's refining existing functionality, adding support for other frameworks, or optimizing the script for broader use cases, every contribution will make this tool even more versatile.
This journey into scripting has also sparked ideas for automating other aspects of productivity. From automating documentation generation to setting up entire environments for testing or deploying projects, the possibilities are endless. I’m excited to explore and share new tools that can save time and reduce repetitive tasks in the future.
If you’re interested in contributing or want to share feedback, head over to the repository here and join in. Let’s make automation work for us, one script at a time and I’ll catch you legends in the next one!