🚀 Automating React Project Setup with Vite, TypeScript, and Panda CSS Using a Shell Script 🐼

As developers, we often find ourselves spending too much time repeatedly setting up new projects. While the steps to initialize a project may be simple, automating them can significantly speed up the process, allowing us to focus on what we love—coding! In this post, I’ll share a shell script I wrote to automate the setup of a React project with Vite, TypeScript, SWC, and Panda CSS.

Why Automate? ⚙️

Manually setting up new projects each time can be tedious, especially when you’re working with multiple technologies like React, TypeScript, and Panda CSS. To streamline this process, I wrote a script called friday.sh, which automates the entire setup for a new React app. 🎉 The script allows you to quickly initialize a new React project, install dependencies like Axios and React Router DOM, and configure Panda CSS—all with a single command.

What Does the Script Do? 📝

Here’s what friday.sh takes care of:

• 🖥️ Initializes a React project using Vite with TypeScript and SWC.

• 🐼 Installs Panda CSS, Axios, and React Router DOM.

• ✨ Updates the CSS file with layers for Panda CSS.

• 🔧 Configures package.json and panda.config.ts files.

• 🔄 Provides options to use your preferred package manager (pnpm, npm, or yarn).

Features 🌟

• Automatic Setup: 🚀 The script handles the full setup of your React project, from creating the project to installing all necessary dependencies.

• Package Manager Choice: You can choose between pnpm, npm, and yarn. By default, it uses pnpm, but you can specify a different one if needed.

• Panda CSS Integration: 🐼 Panda CSS is installed and integrated into the project. It even updates your index.css file to include Panda’s base CSS layers.

How to Use 🚀

Run the script with the following syntax:

./friday.sh -d <directory> [-p <package-manager>] [-h]

• -d : 📁 The directory where the React project will be created.


• -p : (Optional) The package manager to use (pnpm, npm, or yarn). Defaults to pnpm.


• -h: (Optional) Prints the help message and exits.

Example Usage 💡

1. To initialize a React project in a specified directory using the default package manager (pnpm):
   

./friday.sh -d /path/to/project-directory

1. To initialize a React project using a specific package manager (e.g., npm):
   

./friday.sh -d /path/to/project-directory -p npm

1. To display the help message:
   

./friday.sh -h

Script Breakdown 🛠️

Here’s a step-by-step breakdown of what the script does:

1. Directory Check: ✅ Ensures that the target directory is specified and created if it doesn’t exist.


2. Package Manager Verification: 🔍 Checks whether the specified package manager is installed on your system.


3. Project Initialization: 🖥️ Creates a new React project using Vite with TypeScript and SWC.


4. Dependency Installation: 📦 Installs Panda CSS, Axios, and React Router DOM.


5. CSS Configuration: 🎨 Updates the index.css file to import Panda CSS layers.


6. Package JSON Update: 📝 Adds a script to package.json for Panda CSS code generation.


7. Panda CSS Configuration: 🐼 Updates panda.config.ts to include jsxFramework: "react".


8. Final Setup: 🏁 Prints instructions to run the project.

Link to Github 🔗

Github : friday.sh

Conclusion 🎉

This script has saved me a significant amount of time when setting up new React projects, especially when integrating multiple technologies like Panda CSS. I encourage you to try it out and customise it for your own needs!

Feel free to share the feedback or leave a start on Github.