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.
Top comments (0)