DEV Community

Bharat
Bharat

Posted on

๐Ÿš€ 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]
Enter fullscreen mode Exit fullscreen mode
  • -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
Enter fullscreen mode Exit fullscreen mode
  1. To initialize a React project using a specific package manager (e.g., npm):
./friday.sh -d /path/to/project-directory -p npm
Enter fullscreen mode Exit fullscreen mode
  1. To display the help message:
./friday.sh -h
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)