load and enable bootstrap framework

app/.env

@@ -25,5 +25,6 @@ APP_SECRET=0751e183ea472eb11c19f21f66a2543c
 #
 # DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
 # DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=8&charset=utf8mb4"
-DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=15&charset=utf8"
+# DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=14&charset=utf8"
+DATABASE_URL="postgresql://postgres:secret@db:5432/postgres?serverVersion=12&charset=utf8"
 ###< doctrine/doctrine-bundle ###

app/assets/app.js

@@ -6,7 +6,7 @@
  */
 
 // any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.css';
+import './styles/app.scss';
 
 // start the Stimulus application
-import './bootstrap';
+import './stimulus/bootstrap';

app/assets/stimulus/controllers/hello_controller.js

@@ -11,6 +11,6 @@ import { Controller } from '@hotwired/stimulus';
  */
 export default class extends Controller {
     connect() {
-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/stimulus/controllers/hello_controller.js';
     }
 }

app/assets/styles/_variables.scss

@@ -0,0 +1 @@
+$h1-font-size: 3.5rem; //bigger

app/assets/styles/app.css

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

app/assets/styles/app.scss

@@ -0,0 +1,16 @@
+// override bootstrap variables
+@import "_variables";
+
+// import Bootstrap 5 styles
+@import "~bootstrap/scss/bootstrap";
+
+
+body {
+    //background-color: lightgray;
+    //padding: 3em;
+    div#boum {
+      //background-color: white;
+      padding: 1em;
+      border: 1px solid grey;
+   }
+}

app/assets/vue/components/App.vue

@@ -0,0 +1,21 @@
+<template>
+   <div id="boum">
+      <div>hello <b>{{ username }}</b></div>
+      <div><b>{{ age }}</b> ans</div>
+      <input v-model="username">
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'app',
+   props: ['dataset'],
+   data() {
+      return {
+         user: this.dataset.user,
+         username: this.dataset.user.username,
+         age: this.dataset.user.age,
+      }
+   }
+}
+</script>

app/assets/vue/index.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './components/App.vue'
+
+const div = document.querySelector('div#app');
+console.log(div);
+
+const vue = createApp({
+    template: `<app :dataset="this.dataset" ></app>`,
+    data() {
+        return {
+            dataset: JSON.parse(div.dataset.app),
+        }
+    },
+})
+.component('app', App)
+.mount('#app');

app/config/packages/doctrine.yaml

@@ -4,7 +4,7 @@ doctrine:
 
         # IMPORTANT: You MUST configure your server version,
         # either here or in the DATABASE_URL env var (see .env file)
-        #server_version: '15'
+        #server_version: '13'
     orm:
         auto_generate_proxy_classes: true
         naming_strategy: doctrine.orm.naming_strategy.underscore_number_aware
@@ -26,7 +26,6 @@ when@prod:
     doctrine:
         orm:
             auto_generate_proxy_classes: false
-            proxy_dir: '%kernel.build_dir%/doctrine/orm/Proxies'
             query_cache_driver:
                 type: pool
                 pool: doctrine.system_cache_pool

app/config/packages/twig.yaml

@@ -1,5 +1,6 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
+    form_themes: ['bootstrap_5_layout.html.twig']
 
 when@test:
     twig:

app/config/packages/webpack_encore.yaml

@@ -25,10 +25,14 @@ webpack_encore:
 
     # If you have multiple builds:
     # builds:
+        # pass "frontend" as the 3rg arg to the Twig functions
+        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
         # frontend: '%kernel.project_dir%/public/frontend/build'
 
-        # pass the build name as the 3rd argument to the Twig functions
+    # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
-        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+    # Put in config/packages/prod/webpack_encore.yaml
+    # cache: true
 
 framework:
     assets:

app/docker-compose.yml

@@ -3,19 +3,19 @@ version: '3'
 services:
 ###> doctrine/doctrine-bundle ###
   database:
-    image: postgres:${POSTGRES_VERSION:-15}-alpine
+    image: postgres:${POSTGRES_VERSION:-14}-alpine
     environment:
       POSTGRES_DB: ${POSTGRES_DB:-app}
       # You should definitely change the password in production
       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-!ChangeMe!}
       POSTGRES_USER: ${POSTGRES_USER:-app}
     volumes:
-      - database_data:/var/lib/postgresql/data:rw
+      - db-data:/var/lib/postgresql/data:rw
       # You may use a bind-mounted host directory instead, so that it is harder to accidentally remove the volume and lose all your data!
       # - ./docker/db/data:/var/lib/postgresql/data:rw
 ###< doctrine/doctrine-bundle ###
 
 volumes:
 ###> doctrine/doctrine-bundle ###
-  database_data:
+  db-data:
 ###< doctrine/doctrine-bundle ###

app/package.json

@@ -5,6 +5,7 @@
         "@hotwired/stimulus": "^3.0.0",
         "@symfony/stimulus-bridge": "^3.2.0",
         "@symfony/webpack-encore": "^4.0.0",
+        "bootstrap": "^5.2.1",
         "core-js": "^3.23.0",
         "regenerator-runtime": "^0.13.9",
         "webpack": "^5.74.0",
@@ -18,5 +19,14 @@
         "dev": "encore dev",
         "watch": "encore dev --watch",
         "build": "encore production --progress"
+    },
+    "dependencies": {
+        "sass": "^1.55.0",
+        "sass-loader": "^13.0.2",
+        "vue": "^3.2.40",
+        "vue-cli": "^2.9.6",
+        "vue-loader": "^17.0.0",
+        "vue-resource": "^1.5.3",
+        "vue-template-compiler": "^2.7.10"
     }
 }

app/src/Controller/VueController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class VueController extends AbstractController
+{
+    /**
+     * @Route("/vue", name="app_vue")
+     */
+    public function index(): Response
+    {
+        return $this->render('vue/index.html.twig', [
+            'controller_name' => 'VueController',
+            'data' => [
+               'user' => [
+                  'username' => 'Charles',
+                  'age' => 31
+               ]
+            ]
+        ]);
+    }
+}

app/symfony.lock

@@ -17,7 +17,7 @@
             "repo": "github.com/symfony/recipes",
             "branch": "main",
             "version": "2.4",
-            "ref": "013b823e7fee65890b23e40f31e6667a1ac519ac"
+            "ref": "da713d006953b90d1c085c1be480ecdd6c4a95e0"
         },
         "files": [
             "config/packages/doctrine.yaml",
@@ -184,7 +184,7 @@
             "repo": "github.com/symfony/recipes",
             "branch": "main",
             "version": "1.10",
-            "ref": "eff2e505d4557c967b6710fe06bd947ba555cae5"
+            "ref": "51fec8b86251b9bfc126ebc1827c9a02fa81ee81"
         },
         "files": [
             "assets/app.js",

app/templates/base.html.twig

@@ -7,10 +7,12 @@
         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
         {% block stylesheets %}
             {{ encore_entry_link_tags('app') }}
+            {{ encore_entry_link_tags('vue') }}
         {% endblock %}
 
         {% block javascripts %}
             {{ encore_entry_script_tags('app') }}
+            {{ encore_entry_script_tags('vue') }}
         {% endblock %}
     </head>
     <body>

app/templates/vue/index.html.twig

@@ -0,0 +1,13 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{'My VueJS template'}}{% endblock %}
+
+{% block body %}
+<div class="container">
+    <h1>{{'My VueJS template'}}</h1>
+
+    <div id="app" data-app="{{ data | json_encode() | escape('html_attr') }}"></div>
+
+
+</div>{{ dump() }}
+{% endblock %}

app/webpack.config.js

@@ -11,7 +11,7 @@ Encore
     .setOutputPath('public/build/')
     // public path used by the web server to access the output path
     .setPublicPath('/build')
-    // only needed for CDN's or subdirectory deploy
+    // only needed for CDN's or sub-directory deploy
     //.setManifestKeyPrefix('build/')
 
     /*
@@ -22,8 +22,11 @@ Encore
      */
     .addEntry('app', './assets/app.js')
 
+    // start VueJS application
+    .addEntry('vue', './assets/vue/index.js')
+
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
-    .enableStimulusBridge('./assets/controllers.json')
+    .enableStimulusBridge('./assets/stimulus/controllers.json')
 
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()
@@ -57,7 +60,10 @@ Encore
     })
 
     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()
+
+    // enable VueJS support
+    .enableVueLoader()
 
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()

docker_build/php/Dockerfile

@@ -57,7 +57,7 @@ RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local
 RUN curl -sS https://get.symfony.com/cli/installer -o /usr/local/bin/installer | bash  \
    && chmod a+x /usr/local/bin/installer \
    && /usr/local/bin/installer \
-   && mv /root/.symfony5/bin/symfony /usr/local/bin/symfony \
+   && mv /root/.symfony/bin/symfony /usr/local/bin/symfony \
    && chmod a+x /usr/local/bin/symfony
 
 # Add users/groups with uid 1000