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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay