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)