DEV Community

Bharat
Bharat

Posted on

1

๐Ÿš€ 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.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay