create-rex-app 1.0.0

package/index.js

@@ -0,0 +1,148 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { exec } from 'child_process';
+import util from 'util';
+import chalk from 'chalk';
+import ora from 'ora';
+import { confirm, select } from '@inquirer/prompts'; // <-- Imported select
+
+const execPromise = util.promisify(exec);
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectName = process.argv[2] || 'react-express-app';
+const currentDir = process.cwd();
+const targetPath = path.join(currentDir, projectName);
+
+console.log();
+console.log(`Creating a new Rex app in ${chalk.green(targetPath)}.`);
+console.log();
+
+// 1. The Safe Empty Check
+if (fs.existsSync(targetPath)) {
+  const files = fs.readdirSync(targetPath);
+  if (files.length > 0) {
+    console.error(chalk.red(`The directory ${chalk.green(projectName)} contains files that could conflict.`));
+    console.error(chalk.red('Either try using a new directory name, or remove the existing files.'));
+    process.exit(1);
+  }
+} else {
+  fs.mkdirSync(targetPath, { recursive: true });
+}
+
+// 2. Template Selection Prompt
+const templateChoice = await select({
+  message: 'Which Rex template would you like to use?',
+  choices: [
+    {
+      name: chalk.hex('#7C3AED')('Vanilla Rex (Standard)'), // Rex Purple
+      value: 'template',
+      description: 'The blazing fast, lightweight setup.',
+    },
+    {
+      name: chalk.hex('#F97316')('Mongo Rex (Standard + MongoDB + JWT Auth)'), // Rex Orange
+      value: 'template-mongo',
+      description: 'Includes Mongoose, Auth flow, and protected routes.',
+    }
+  ],
+  theme: {
+    prefix: chalk.hex('#F97316')('?'), // Changes the default green question mark
+    style: {
+      highlight: (text) => chalk.hex('#7C3AED')(text), // Changes the default cyan highlight pointer
+    }
+  }
+});
+
+// Set the path dynamically based on the user's choice!
+const templatePath = path.join(__dirname, templateChoice);
+
+console.log();
+
+// 3. Copy files with a clean spinner
+const copySpinner = ora(`Initializing ${templateChoice} files...`).start();
+const copyRecursiveSync = (src, dest) => {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  
+  if (isDirectory) {
+    fs.mkdirSync(dest, { recursive: true });
+    fs.readdirSync(src).forEach((childItemName) => {
+      if (childItemName === 'node_modules') return; 
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+};
+
+try {
+  copyRecursiveSync(templatePath, targetPath);
+  
+  const gitignorePath = path.join(targetPath, '_gitignore');
+  if (fs.existsSync(gitignorePath)) {
+    fs.renameSync(gitignorePath, path.join(targetPath, '.gitignore'));
+  }
+  
+  const envPath = path.join(targetPath, '_env');
+  if (fs.existsSync(envPath)) {
+    fs.renameSync(envPath, path.join(targetPath, '.env'));
+  }
+  
+  copySpinner.succeed(chalk.green('Initialized project files.'));
+} catch (error) {
+  copySpinner.fail(chalk.red('Failed to extract template.'));
+  console.error(error);
+  process.exit(1);
+}
+
+// 4. Interactive Prompt
+console.log(); 
+const shouldInstall = await confirm({ 
+  message: 'Would you like to install dependencies now?', 
+  default: true 
+});
+
+// 5. The Real Worker (Auto-Install)
+console.log();
+if (shouldInstall) {
+  const installSpinner = ora('Installing packages. This might take a couple of minutes...').start();
+  try {
+    await execPromise('npm install', { cwd: targetPath });
+    installSpinner.succeed(chalk.green('Installed dependencies.'));
+  } catch (error) {
+    installSpinner.fail(chalk.yellow('Installation failed. You can run `npm install` manually later.'));
+  }
+} else {
+  console.log(chalk.dim('Skipped dependency installation.'));
+}
+
+console.log();
+console.log(`${chalk.green('Success!')} Created ${chalk.cyan(projectName)} at ${chalk.cyan(targetPath)}`);
+console.log('Inside that directory, you can run several commands:');
+console.log();
+console.log(chalk.cyan(`  npm run dev`));
+console.log('    Starts the development server.');
+console.log();
+console.log(chalk.cyan(`  npm run build`));
+console.log('    Bundles the app into static files for production.');
+console.log();
+console.log('We suggest that you begin by typing:');
+console.log();
+
+if (projectName !== '.') {
+  console.log(chalk.cyan(`  cd ${projectName}`));
+}
+if (!shouldInstall) {
+  console.log(chalk.cyan(`  npm install`));
+}
+
+// Add a helpful reminder for Mongo template users
+if (templateChoice === 'template-mongo') {
+  console.log(chalk.yellow(`\n  ⚠️  Don't forget to configure your .env file with your MONGO_URI and JWT_SECRET!`));
+}
+
+console.log(chalk.cyan(`  npm run dev`));
+console.log();

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "create-rex-app",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "homepage": "https://rex-docs.vercel.app/",
+  "bin": {
+    "create-rex-app": "./index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "rex",
+    "react",
+    "express",
+    "vite",
+    "boilerplate",
+    "monolith",
+    "mern",
+    "template"
+  ],
+  "author": "Saumya Rawal",
+  "license": "MIT",
+  "description": "Scaffold a React + Vite + Express boilerplate ready for Vercel",
+  "dependencies": {
+    "@inquirer/prompts": "^8.2.1",
+    "chalk": "^5.6.2",
+    "ora": "^9.3.0"
+  }
+}

package/template/README.md

@@ -0,0 +1,71 @@
+# 🚂 React Express Boilerplate
+
+A robust, "Monolith-style" fullstack boilerplate that unifies **Vite (React)** and **Express** into a single development experience.
+
+> **One Terminal. One Port. Fullstack Power.**
+
+## 🚀 Features
+
+* **Unified Server:** `server.js` acts as the single entry point. It serves the API *and* the Frontend (via Vite middleware).
+* **Smart Watchdog:** Uses `nodemon` to restart the server **only** when backend files change, while Vite handles HMR for the frontend.
+* **API Ready:** Organized `api/` folder structure with Express Router.
+* **Data Fetching:** Pre-configured with **Axios** and **TanStack Query (React Query)** for professional-grade state management.
+* **Custom Hooks:** Clean separation of concerns with a `hooks/` directory pattern.
+
+## 🛠️ Tech Stack
+
+* **Frontend:** React, Vite
+* **Backend:** Express.js
+* **Utilities:** Axios, TanStack Query, Nodemon
+
+## 📂 Project Structure
+
+```text
+root/
+├── api/                # Backend API Routes
+│   └── routes.js       # Express Router definitions
+├── src/                # React Frontend
+│   ├── hooks/          # Custom React Hooks (e.g., useTest.js)
+│   ├── App.jsx         # Main Component
+│   └── main.jsx        # Entry point with QueryProvider
+├── server.js           # The Engine (Express + Vite Middleware)
+├── package.json        # Scripts and Dependencies
+└── ...
+```
+
+
+
+## 🏁 Getting Started
+
+### 1. Clone & Install
+```bash
+git clone [https://github.com/saumyarawal-webdev/react-express.git](https://github.com/saumyarawal-webdev/react-express.git)
+cd react-express-boilerplate
+npm install
+```
+### 2. Start the Engine 🚂
+Run the development environment. This starts the Express server and the Vite middleware together.
+
+```bash
+npm run dev
+```
+* **Frontend:** `http://localhost:5173`
+* **API Endpoint:** `http://localhost:5173/api/test`
+
+### 3. Build for Production
+When ready to deploy, build the React app. The server is configured to serve the static files in production (requires minor `dist` folder config in server.js for final deploy).
+
+```bash
+npm run build
+```
+## 🧩 How to Add a New API
+
+1. **Backend:** Add a new route in `api/routes.js`:
+    ```javascript
+    router.get('/users', (req, res) => { ... })
+    ```
+2. **Frontend:** Create a hook in `src/hooks/useUsers.js` using Axios + useQuery.
+3. **UI:** Import the hook in your component and display the data.
+
+---
+*Made with 💙 by Saumya*

package/template/_gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+.env
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template/api/routes.js

@@ -0,0 +1,9 @@
+import express from 'express'
+const router = express.Router()
+
+// Just '/test' here. The '/api' part happens in server.js
+router.get('/test', (req, res) => {
+  res.json({ message: 'Hello from backend....!!' })
+})
+
+export default router

package/template/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

package/template/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/rex.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rex - One House Partner</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>