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 💡
- To initialize a React project in a specified directory using the default package manager (pnpm):
./friday.sh -d /path/to/project-directory
- To initialize a React project using a specific package manager (e.g., npm):
./friday.sh -d /path/to/project-directory -p npm
- To display the help message:
./friday.sh -h
Script Breakdown 🛠️
Here’s a step-by-step breakdown of what the script does:
- Directory Check: ✅ Ensures that the target directory is specified and created if it doesn’t exist.
- Package Manager Verification: 🔍 Checks whether the specified package manager is installed on your system.
- Project Initialization: 🖥️ Creates a new React project using Vite with TypeScript and SWC.
- Dependency Installation: 📦 Installs Panda CSS, Axios, and React Router DOM.
- CSS Configuration: 🎨 Updates the index.css file to import Panda CSS layers.
- Package JSON Update: 📝 Adds a script to package.json for Panda CSS code generation.
- Panda CSS Configuration: 🐼 Updates panda.config.ts to include jsxFramework: "react".
- 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.