Scaffolding React Project using Bash scripting

What is Bash scripting?

As developers, we often find ourselves performing repetitive tasks while setting up new projects. This can include creating directories, installing dependencies, configuring tools, and more.

Bash scripting, a powerful scripting language available in most Unix-like operating systems, allows us to automate these tasks and create scripts that perform them consistently and efficiently.

By utilizing Bash scripting in the project scaffolding process, we can automate the steps required to set up a React project with Tailwind CSS using Vite and pnpm. This eliminates the need for manual intervention, reduces human error, and significantly saves time.

Scaffolding React Project

I will walk through the steps to scaffold a React project with Tailwind CSS using Vite and pnpm. I will also provide an example Bash script that automates the process, making it easier for you to get started with your projects.

Make sure you have Node.js and pnpm installed on your system. If you don't have them installed yet, you can follow the official documentation to get them set up.

To use pnpm instead of npm in the bash script for creating a new React project with Vite and Tailwind CSS, you can modify the script as follows:

Step 1 : Create a bash file

Create a bash script with the following code as shown below in in the folder where you want to setup the project.

The extension will be .sh

#!/bin/bash

# Create a new Vite project with React template
npm create vite@latest "$1" -- --template react

# Change directory to the new project
cd "$1"

# Install Tailwind CSS dependencies using pnpm
pnpm install -D tailwindcss postcss autoprefixer

# Initialize Tailwind CSS
pnpm dlx tailwindcss init -p

# Update the Tailwind CSS configuration file
cat << EOF > tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
EOF

# Update the index.css file
cat << EOF > src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF

# Install project dependencies using pnpm
pnpm install

Step 2 : Save the script

Save the script with a descriptive name, such as create-react-project.sh.

Step 3: Make the script executable

Make the script executable (for Unix-based systems only):

chmod +x create-react-vite-tailwind-pnpm.sh

Step 4: Run the script

Run the script followed by the desired name for your project:

./create-react-vite-tailwind-pnpm.sh my-project

React setup files

Congratulations! 🎉

Your React project is setup successfully!

Conclusion

By combining the power of Vite, pnpm, and Tailwind CSS with the automation capabilities of Bash scripting, you can boost your productivity, iterate faster, and focus more on developing outstanding React applications.

Embrace these tools and techniques in your workflow, and witness the efficiency and elegance they bring to your projects.

Thanks for reading! 😊

I hope it helps you next time you create your React Project 🚀