create-React-Vite/createVite at main · Wolf-Root/create-React-Vite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
#!/bin/bash

clear

# Step 1: Create React App with Vite (React + SWC)
read -p "Enter Project Name: " project_name
npm create vite@latest "$project_name" -- --template react-swc
cd "$project_name" || exit
npm install

# Step 2: Edit README.md
cat <<EOF > README.md
# React $project_name

A live Markdown previewer built with Vite React and Tailwind CSS.

## Table of Contents

- [Overview](#overview)
  - [Screenshot](#screenshot)
  - [Links](#links)
- [My Process](#my-process)
  - [Built With](#built-with)
- [Author](#author)

## Overview

### Screenshot

![App Screenshot](/public/screenshot.png)

### Links

- [Live Site](https://wolf-root.github.io/Markdown-Previewer/)
- [React Documentation](https://react.dev/)
- [Tailwind CSS](https://tailwindcss.com/)

## My Process

### Built With

- [React](https://react.dev/) v19.1
- [Tailwind CSS](https://tailwindcss.com/) v4.1

## Author

- Portfolio – [yousseffed.vercel.app](https://yousseffed.vercel.app/)
- Frontend Mentor – [@Wolf-Root](https://www.frontendmentor.io/profile/Wolf-Root)
- Twitter – [@wolf_R00T](https://x.com/wolf_R00T)
EOF

# Step 3: Cleanup assets and default files
rm src/assets/react.svg
rm public/vite.svg
rm src/App.css

# Step 4: Replace App.jsx content
cat > src/App.jsx <<EOF
function App() {
    return <><h1 className="text-7xl text-red-600 font-bold">test</h1></>;
}

export default App;
EOF

# Step 5: Create Components folder
mkdir -p src/Components

# Step 6: Install gh-pages
npm install --save-dev gh-pages

# Step 7: Install Tailwind CSS + PostCSS (Optional)
read -p "Do you want to install PostCSS and Tailwind CSS? (yes/no): " Tailwind
if [ "$Tailwind" = "yes" ]; then
    npm install -D tailwindcss postcss autoprefixer cssnano postcss-preset-env @tailwindcss/postcss
    cat > postcss.config.mjs <<EOF
export default {
    plugins: {
        '@tailwindcss/postcss': {},
        autoprefixer: {},
        cssnano: {},
        'postcss-preset-env': {},
    },
};
EOF

    echo '@import "tailwindcss";' > src/index.css
fi

# Step 8: Install Font Awesome (Optional)
read -p "Do you want to install Font Awesome? (yes/no): " FontAwesome
if [ "$FontAwesome" = "yes" ]; then
    npm i --save @fortawesome/fontawesome-svg-core

    read -p "Do you want to install the Solid Package? (yes/no): " Solid_Package
    [ "$Solid_Package" = "yes" ] && npm i --save @fortawesome/free-solid-svg-icons

    read -p "Do you want to install the Regular Package? (yes/no): " Regular_Package
    [ "$Regular_Package" = "yes" ] && npm i --save @fortawesome/free-regular-svg-icons

    read -p "Do you want to install the Brands Package? (yes/no): " Brands_Package
    [ "$Brands_Package" = "yes" ] && npm i --save @fortawesome/free-brands-svg-icons

    npm i --save @fortawesome/react-fontawesome@latest
fi

# Step 9: Run Dev Server or open in VS Code
read -p "Do you want to open the project in VS Code? (yes/no): " dev
if [ "$dev" = "yes" ]; then
    code .
    echo " run the dev server === npm run dev "
    sleep 3
    exit
else
    echo "✅ Setup finished. You can open the project later with:"
    echo "   cd \"$project_name\""
    echo "   code . && npm run dev"
    exit
fi