Plusieurs fronts dans une même application

wkup
PHP Symfony

Bonsoir à tous,

J'ai une application symfony qui doit avoir 3 IHM différentes : un public, un portail et un admin.
Chacun de ces fronts doit avoir son propre design et utilise des librairies différentes (vue.js, ...).

Comment organiseriez-vous cette application ?

Je vous remercie du coup de main.

3 réponses

Gulivert
Réponse acceptée

Hello,

Pour ma part dans le dossiers assets, je crée l'arborescence avec les 3 dossiers correspondants aux 3 front.

  • assets/public
    • scss
    • js
    • ...
    • index.tsx
  • assets/portail
    • scss
    • js
    • ...
    • index.tsx
  • assets/admin
    • scss
    • js
    • ...
    • index.tsx

Dans webpack-encore je crée 3 entrée de script :

.addEntry('app-public', ['core-js/stable', 'regenerator-runtime/runtime', './assets_encore/public/index.tsx'])
.addEntry('app-portail', ['core-js/stable', 'regenerator-runtime/runtime', './assets_encore/portail/index.tsx'])
.addEntry('app-admin', ['core-js/stable', 'regenerator-runtime/runtime', './assets_encore/admin/index.tsx'])

Ensuite au niveau du twig dans le dossier templates je crée un fichier base.html.twig qui ressemble à ceci :

<!DOCTYPE html>
<html lang="{{ app.request.locale|split('_')[0] }}">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="App description">
        <meta name="author" content="Cédric Bapst">

        <title>{% block title %}Mon app{% endblock %}</title>

        <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">

        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

Puis toujours dans le dossier templates je crée à nouveau 3 répertoires, un public, un portailet un admin dans lesquels j'ajoute pour chacun un fichier layout.html qui étend le fichier base.html.twiget depuis là j'injecte la feuille de style et fichier javascript, un ex. pour le fichier layout.html.twig qui serait dans le dossier admin :

{% extends 'base.html.twig' %}

{% block title %}App - Admin{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('app-admin') }}
{% endblock %}

{% block body %}
    {% block content %}{% endblock %}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app-admin') }}
{% endblock %}
Gulivert
Réponse acceptée

Avec ce que je te propose tu peux le faire sans problème, vue que chaque dossier front à son point d'entrée (dans mon ex. index.tsx => j'utilise React / Typescript).

assets/portail/index.tsx => tu pars avec ton dev React

assets/admin/index.tsx => tu renomme le fichier en index.ts (ou l'extension que tu souhaites / as besoin),, tu adaptes l'entrée de webpack-encore et tu démarres depuis ici ton dev VueJS / Typescript

Ne pas oublié dans webpack-encore d'injecter le support de React, VueJS et Typescript et d'installer les dépendances.

  .enableReactPreset()
  .enableVueLoader()
  .enableTypeScriptLoader()
wkup
Auteur

Super merci, belle proposition. Ca fonctionne.

Question subsidiaire : comment gérer pour qu'un dossier utilise vue.js en typescript (par exemple l'admin) et un autre en react (par exemple le portail) ?