Latest Version: clicksetup-v2.2.1
📢 Click is a simple tool desktop app to quickly scaffold popular frontend projects like Next.js, React + Vite, and Vue + Vite, with options for TypeScript, ESLint, Tailwind CSS, and more.
Before running Click.exe, if you haven’t installed or configured the following tools on your system, don’t worry — Click.exe can automatically install and set them up for you. However, if you prefer to install them manually, please follow the instructions above.
-
Node.js and
npm— must be accessible from your system PATH.To check versions, run:
node --versionnpm --version
Currently supports only
npm. More package managers will be added in the future.
-
Flutter SDK — must be installed and added to your system PATH. ➡ Example Flutter SDK PATH:
C:\src\flutter\binTo check versions, run:
flutter --version
- Visual Studio Code — added to PATH with the
codecommand available. To check versions, run:code --version⚠️ Missing or misconfigured tools may cause errors during usage.
If any of the above are missing or incorrectly set up, you may encounter errors during use.
- Locate the
setupfolder in this project. - Run
clicksetup-2.0.0.exeto install the application. - If Windows Defender or another antivirus flags the file:
- This is a false positive caused by the app not being code-signed or registered with Microsoft.
- It is safe to proceed — simply choose "More info" → "Run anyway".
- You can also verify the installer’s source files in the
\setup\uifolder before proceeding.
- Create Next.js projects with options for TypeScript, ESLint, Tailwind CSS, and App Router.
- Create React + Vite or Vue + Vite projects with TypeScript support.
- Create Flutter App projects. 🔥
- Automatically runs
npm installand installstailwindcss @tailwindcss/vitefor Vite projects. 🔥 - Automatically configures
vite.config.tsorvite.config.js. 🔥 - Automatically imports
@import "tailwindcss";in CSS files for both React and Vue. 🔥 - Automatically installs Node.js if not found. 🔥
- Automatically installs Flutter SDK if not found. 🔥
- Opens the created project in Visual Studio Code.
- User-friendly GUI with progress logs and real-time feedback.
-
Set Project Name
Enter your desired project name (e.g.,my_first_app). -
Select Target Directory
Choose where you want the project folder to be created. -
Select Framework / Template
- Next.js
- React + Vite
- Vue + Vite
- Flutter 🔥
-
Configure Options
- Next.js: Toggle TypeScript, ESLint, Tailwind CSS, use
/srcdirectory, and enable App Router. - React + Vite / Vue + Vite: Option to enable TypeScript.
- Next.js: Toggle TypeScript, ESLint, Tailwind CSS, use
-
Create Project
Click the Create Project button. The tool will scaffold your project, install dependencies, and open it in Visual Studio Code. -
Monitor Progress
View real-time logs and progress updates in the log window.
- If the project folder already exists, you will be prompted to choose another name.
- Ensure
npx,npm, andcodecommands are accessible. - Check the log for any errors during project creation.
Important: When creating a Flutter project, use underscores (_) in the project name (e.g., my_first_app) instead of spaces or hyphens.
See the LICENSE.md file for details.
Created by: Mai Bunheng | maibunheng.site