@mrbryan1502/create-symfony-vue 1.0.1

package/bin/index.js

@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, readdirSync, copyFileSync, readFileSync, writeFileSync, rmSync } from 'fs';
+import { join, resolve, dirname, basename } from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = resolve(__dirname, '..', 'template');
+const IGNORE = new Set([
+  '.git',
+  'node_modules',
+  'vendor',
+  'var',
+  'packages',
+  '.env.local',
+]);
+
+function copyRecursive(src, dest) {
+  if (!existsSync(src)) return;
+  const entries = readdirSync(src, { withFileTypes: true });
+  mkdirSync(dest, { recursive: true });
+
+  for (const entry of entries) {
+    if (IGNORE.has(entry.name)) continue;
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyRecursive(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function hasTool(cmd) {
+  try { execSync(`${cmd} --version`, { stdio: 'ignore' }); return true; }
+  catch { return false; }
+}
+
+function detectPackageManager() {
+  if (hasTool('pnpm')) return 'pnpm';
+  if (hasTool('yarn')) return 'yarn';
+  if (hasTool('bun')) return 'bun';
+  return 'npm';
+}
+
+function sanitizeName(name) {
+  return basename(name).toLowerCase().replace(/[^a-z0-9_-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+}
+
+function printBanner(name) {
+  console.log('');
+  console.log('  \x1b[38;2;74;144;226m\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510');
+  console.log(`  \x1b[38;2;74;144;226m\u2502  \x1b[0m\x1b[1mSymfony\x1b[0m  \x1b[38;2;74;144;226m+\x1b[0m  \x1b[1m\x1b[38;2;66;184;131mVue 3\x1b[0m  \x1b[38;2;74;144;226m\xB7  Plantilla moderna\x1b[38;2;74;144;226m  \u2502`);
+  console.log(`  \x1b[38;2;74;144;226m\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\x1b[0m`);
+  console.log('');
+  console.log(`  \u2728  Proyecto creado: \x1b[1m${name}\x1b[0m`);
+  console.log('');
+}
+
+function printDone(dir, pm) {
+  console.log('');
+  console.log('  \x1b[32m\u2714\x1b[0m  Dependencias instaladas correctamente');
+  console.log('');
+  console.log('  \x1b[1mPr\xf3ximos pasos:\x1b[0m');
+  console.log('');
+  console.log(`    $ \x1b[36mcd ${dir}\x1b[0m`);
+  console.log(`    $ \x1b[36m${pm} dev\x1b[0m`);
+  console.log('');
+  console.log('  \x1b[90m\xa1Disfruta codificando!\x1b[0m');
+  console.log('');
+}
+
+// --- Main ---
+
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.error('\n  \x1b[31mError:\x1b[0m Debes especificar un nombre para el proyecto');
+  console.error('');
+  console.error('  \x1b[1mUso:\x1b[0m');
+  console.error(`    $ npx @mrbryan1502/create-symfony-vue \x1b[33m<project-name>\x1b[0m`);
+  console.error(`    $ pnpm dlx @mrbryan1502/create-symfony-vue \x1b[33m<project-name>\x1b[0m`);
+  console.error('');
+  process.exit(1);
+}
+
+const projectDir = resolve(process.cwd(), projectName);
+
+if (existsSync(projectDir)) {
+  const entries = readdirSync(projectDir);
+  if (entries.length > 0) {
+    console.error(`\n  \x1b[31mError:\x1b[0m El directorio "${projectName}" ya existe y no est\xe1 vac\xedo\n`);
+    process.exit(1);
+  }
+}
+
+console.log(`\n  \x1b[90mCreando proyecto\x1b[0m ${projectName} \x1b[90m...\x1b[0m\n`);
+
+copyRecursive(TEMPLATE_DIR, projectDir);
+
+// Update composer.json name
+const composerJsonPath = join(projectDir, 'composer.json');
+try {
+  const content = readFileSync(composerJsonPath, 'utf-8');
+  const json = JSON.parse(content);
+  json.name = sanitizeName(projectName);
+  writeFileSync(composerJsonPath, JSON.stringify(json, null, 4) + '\n');
+} catch {}
+
+printBanner(projectName);
+
+// Install Composer dependencies
+const hasComposer = hasTool('composer');
+if (hasComposer) {
+  console.log('  \x1b[90mInstalando dependencias PHP (composer install) ...\x1b[0m');
+  execSync('composer install --no-interaction', { cwd: projectDir, stdio: 'inherit' });
+} else {
+  console.log('  \x1b[33m\u26a0\x1b[0m  \x1b[90mComposer no est\xe1 instalado. Ejecuta "composer install" manualmente.\x1b[0m');
+}
+
+// Install Node dependencies
+const pm = detectPackageManager();
+console.log(`  \x1b[90mInstalando dependencias frontend (${pm} install) ...\x1b[0m`);
+execSync(`${pm} install`, { cwd: projectDir, stdio: 'inherit' });
+
+// Clean up .git from template if present
+const templateGit = join(projectDir, '.git');
+if (existsSync(templateGit)) {
+  rmSync(templateGit, { recursive: true, force: true });
+}
+
+// Initialize new git repo
+try {
+  execSync('git init', { cwd: projectDir, stdio: 'ignore' });
+  execSync('git add .', { cwd: projectDir, stdio: 'ignore' });
+  execSync('git commit -m "Initial commit from create-symfony-vue"', { cwd: projectDir, stdio: 'ignore' });
+} catch {}
+
+printDone(projectName, pm);

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@mrbryan1502/create-symfony-vue",
+  "version": "1.0.1",
+  "description": "Scaffold a new Symfony 7 + Vue 3 project",
+  "author": "mrbryan1502",
+  "type": "module",
+  "bin": {
+    "create-symfony-vue": "bin/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "symfony",
+    "vue",
+    "vue3",
+    "symfony7",
+    "vite",
+    "scaffold",
+    "template"
+  ],
+  "license": "MIT"
+}

package/template/.editorconfig

@@ -0,0 +1,25 @@
+# editorconfig.org
+
+root = true
+
+[*.{php}]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{compose.yaml,compose.*.yaml}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{ts,vue,js,jsx,tsx}]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

package/template/.env

@@ -0,0 +1,48 @@
+# In all environments, the following files are loaded if they exist,
+# the latter taking precedence over the former:
+#
+#  * .env                contains default values for the environment variables needed by the app
+#  * .env.local          uncommitted file with local overrides
+#  * .env.$APP_ENV       committed environment-specific defaults
+#  * .env.$APP_ENV.local uncommitted environment-specific overrides
+#
+# Real environment variables win over .env files.
+#
+# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
+# https://symfony.com/doc/current/configuration/secrets.html
+#
+# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
+# https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
+
+###> symfony/framework-bundle ###
+APP_ENV=dev
+APP_SECRET=
+APP_SHARE_DIR=var/share
+###< symfony/framework-bundle ###
+
+###> symfony/routing ###
+# Configure how to generate URLs in non-HTTP contexts, such as CLI commands.
+# See https://symfony.com/doc/current/routing.html#generating-urls-in-commands
+DEFAULT_URI=http://localhost
+###< symfony/routing ###
+
+###> doctrine/doctrine-bundle ###
+# Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
+# IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
+#
+# DATABASE_URL="sqlite:///%kernel.project_dir%/var/data_%kernel.environment%.db"
+# DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=8.0.32&charset=utf8mb4"
+# DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=10.11.2-MariaDB&charset=utf8mb4"
+DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=16&charset=utf8"
+###< doctrine/doctrine-bundle ###
+
+###> symfony/messenger ###
+# Choose one of the transports below
+# MESSENGER_TRANSPORT_DSN=amqp://guest:guest@localhost:5672/%2f/messages
+# MESSENGER_TRANSPORT_DSN=redis://localhost:6379/messages
+MESSENGER_TRANSPORT_DSN=doctrine://default?auto_setup=0
+###< symfony/messenger ###
+
+###> symfony/mailer ###
+MAILER_DSN=null://null
+###< symfony/mailer ###

package/template/.env.dev

@@ -0,0 +1,4 @@
+
+###> symfony/framework-bundle ###
+APP_SECRET=a404597a4c578f89a32a7017305349c0
+###< symfony/framework-bundle ###

package/template/.env.test

@@ -0,0 +1,3 @@
+# define your env variables for the test env here
+KERNEL_CLASS='App\Kernel'
+APP_SECRET='$ecretf0rt3st'

package/template/.gitattributes

@@ -0,0 +1,9 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/node_modules/ export-ignore
+/packages/ export-ignore
+/var/ export-ignore
+/vendor/ export-ignore
+/.env.local export-ignore
+/.php-cs-fixer.cache export-ignore
+/phpunit.xml export-ignore

package/template/.prettierignore

@@ -0,0 +1,46 @@
+
+###> Symfony ###
+/src/
+/templates/
+/tests/
+/translations/
+/public/
+/migrations/
+/config/
+/bin/
+###< Symfony ###
+
+
+###> symfony/framework-bundle ###
+/.env.local
+/.env.local.php
+/.env.*.local
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+
+###> phpunit/phpunit ###
+/phpunit.xml
+/.phpunit.cache/
+###< phpunit/phpunit ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###
+
+###> node ###
+/node_modules/
+###< node ###
+
+###> Configuration ###
+/composer.json
+/composer.lock
+/*.yaml
+/*.yml
+/importmap.php
+/symfony.lock
+/.vscode/
+###< Configuration ###

package/template/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "endOfLine": "lf",
+    "vueIndentScriptAndStyle": true,
+    "semi": true,
+    "tabWidth": 2,
+    "bracketSpacing": true,
+    "useTabs": false
+}

package/template/.vscode/extensions.json

@@ -0,0 +1,17 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "EditorConfig.EditorConfig",
+        "usernamehw.errorlens",
+        "DEVSENSE.phptools-vscode",
+        "bmewburn.vscode-intelephense-client",
+        "bajdzis.vscode-twig-pack",
+        "Vue.volar",
+        "DEVSENSE.intelli-php-vscode",
+        "DEVSENSE.composer-php-vscode",
+        "xdebug.php-pack",
+        "xdebug.php-debug",
+        "zobo.php-intellisense"
+    ]
+}

package/template/.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "editor.quickSuggestions": {
+        "comments": "on",
+        "strings": "on",
+        "other": "on"
+    }
+}

package/template/README.md

@@ -0,0 +1,172 @@
+# Symfony + Vue 3 Template
+
+Plantilla moderna para aplicaciones web con **Symfony 7** en el backend y **Vue 3** + **TypeScript** en el frontend, integrados mediante Vite.
+
+## Stack
+
+| Capa     | Tecnología                                                   |
+| -------- | ------------------------------------------------------------ |
+| Backend  | [Symfony 7.4](https://symfony.com) + PHP 8.2+ / Doctrine ORM / PostgreSQL |
+| Frontend | [Vue 3](https://vuejs.org) + TypeScript + Pinia + Vue Router |
+| Build    | [Vite](https://vitejs.dev) + `vite-plugin-symfony` + `@vitejs/plugin-vue` |
+| Estilo   | CSS moderno con design system oscuro y gradientes            |
+
+## Instalación
+
+Puedes crear un nuevo proyecto de dos formas:
+
+### Via Composer (recomendado)
+
+```bash
+composer create-project mrbryan1502/symfony-vue mi-app
+```
+
+Esto instala automáticamente las dependencias de PHP **y** las de frontend (pnpm).
+
+### Via npx / pnpm dlx
+
+```bash
+# Con npm
+npx @mrbryan1502/create-symfony-vue mi-app
+
+# Con pnpm
+pnpm dlx @mrbryan1502/create-symfony-vue mi-app
+```
+
+Esto crea el proyecto e instala tanto las dependencias PHP (composer) como las de frontend (npm/pnpm/yarn automáticamente detectado).
+
+### Manualmente (clonando el repo)
+
+```bash
+git clone https://github.com/mrbryan1502/symfony-vue.git mi-app
+cd mi-app
+
+# Las dependencias se instalan automáticamente con cualquiera de estos:
+composer install    # instala PHP + dispara pnpm install
+pnpm install        # instala frontend + dispara composer install
+```
+
+## Requisitos
+
+- PHP >= 8.2
+- [Composer](https://getcomposer.org)
+- [pnpm](https://pnpm.io) >= 11.9 (o npm/yarn/bun)
+- [Symfony CLI](https://symfony.com/download) (recomendado para desarrollo)
+
+## Ejecución en desarrollo
+
+```bash
+cd mi-app
+pnpm dev
+```
+
+Esto lanza simultáneamente:
+
+- `symfony serve` — servidor PHP de desarrollo
+- `vite` — servidor de assets con HMR
+
+Abrir `https://localhost:8000` en el navegador.
+
+### Variables de entorno
+
+```bash
+cp .env .env.local
+# Editar DATABASE_URL y APP_SECRET en .env.local
+```
+
+### Comandos útiles
+
+| Comando              | Descripción                         |
+| -------------------- | ----------------------------------- |
+| `pnpm dev`           | Desarrollo con hot reload           |
+| `pnpm build`         | Build de producción para frontend   |
+| `pnpm format`        | Formatear código con Prettier       |
+| `pnpm lint`          | Verificar formato                  |
+| `composer run-script`| Scripts definidos en `composer.json`|
+
+## Estructura del proyecto
+
+```
+symfony-vue/
+├── assets/                  # Frontend (Vue 3 + TypeScript)
+│   ├── main.ts              # Punto de entrada
+│   ├── app.css              # Estilos globales
+│   ├── router/              # Configuración de Vue Router
+│   ├── src/
+│   │   └── App.vue          # Componente raíz (welcome page)
+│   ├── styles/              # Estilos adicionales
+│   └── vendor/              # Assets de vendor
+├── config/                  # Configuración de Symfony (YAML)
+├── migrations/              # Migraciones de Doctrine
+├── packages/
+│   └── create-symfony-vue/  # Paquete npm del CLI scaffold
+├── public/                  # Document root
+│   └── build/               # Build de Vite (generado)
+├── scripts/                 # Utilidades internas
+│   └── sync-template.mjs    # Sincroniza template con el CLI
+├── src/                     # Código PHP (App\ namespace)
+│   ├── Controller/
+│   ├── Entity/
+│   ├── Repository/
+│   └── ...
+├── templates/               # Twig templates
+│   ├── base.html.twig
+│   └── app.html.twig        # Template que monta Vue
+├── tests/                   # Tests PHPUnit
+├── translations/            # Traducciones
+├── vite.config.js           # Configuración de Vite
+├── tsconfig.json            # Configuración de TypeScript
+└── composer.json
+```
+
+## Integración Symfony + Vite
+
+La comunicación entre Symfony y Vite se maneja mediante:
+
+- [`vite-plugin-symfony`](https://github.com/lhapaipai/vite-plugin-symfony) — plugin de Vite
+- [`pentatrion/vite-bundle`](https://github.com/PentaTraITeam/vite-bundle) — bundle de Symfony
+
+Los entry points se definen en `assets/main.ts` y se referencian en Twig mediante:
+
+```twig
+{{ vite_entry_link_tags('app') }}
+{{ vite_entry_script_tags('app') }}
+```
+
+Para más información, consulta la [documentación de Symfony con Vite](https://pentatrion.github.io/vite-bundle/).
+
+## Producción
+
+```bash
+pnpm build
+composer dump-env prod
+```
+
+El servidor Symfony sirve los assets compilados desde `public/build/`.
+
+## Desarrollo del CLI
+
+```bash
+# Sincronizar los cambios del template al paquete npm
+node scripts/sync-template.mjs
+
+# Probar el CLI localmente
+node packages/create-symfony-vue/bin/index.js mi-app-test
+```
+
+## Publicación
+
+```bash
+# Publicar en Packagist (composer)
+# 1. Push a GitHub
+# 2. Crear release en GitHub
+# 3. Packagist detecta automáticamente
+
+# Publicar en npm
+cd packages/create-symfony-vue
+npm publish
+```
+
+## Licencia
+
+MIT

package/template/assets/app.css

@@ -0,0 +1,3 @@
+body {
+  background-color: #eeeeee;
+}

package/template/assets/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import { router } from './router/index.js';
+import App from '@/App.vue';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount('#app');

package/template/assets/router/index.ts

@@ -0,0 +1,13 @@
+import App from '@/App.vue';
+import { createRouter, createWebHistory } from 'vue-router';
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/app',
+      name: 'Home',
+      component: App,
+    },
+  ],
+});