umanit / front-bundle
Front Symfony Bundle
Installs: 14 623
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 8
Forks: 1
Open Issues: 1
Type:symfony-bundle
Requires
- php: ^8.1
- symfony/console: ^6.2
- symfony/framework-bundle: ^6.2
- symfony/webpack-encore-bundle: ^1.13
- symfony/yaml: ^6.2
README
Ce starter kit est à utiliser dans le cadre d'un projet symfony. Il embarque le starter kit
Avec des fonctionnalités en plus :
- un guide de style
- une route pour gérer des intégrations statiques
Pré-requis
- Utiliser Symfony 4
- Utiliser NVM pour installer node et yarn sur sa machine
Installation
À la racine du projet lancer la commande
composer require umanit/front-bundle
Une fois le bundle installé il faut supprimer le package.json et le webpack.config.js qui ont été rajoutés par la
recipe flex de webpack-encore-bundle
.
Ensuite, il faut lancer la commande suivante :
php bin/console umanit:front-bundle:init
Une fois terminée, il faut installer les dépendances front :
nvm exec yarn install
Enregistrer les routes
# app/config/routes/dev/umanit_front_bundle.yaml umanit_front_bundle: resource: "@UmanitFrontBundle/Resources/config/routes/dev/routes.yaml"
Le dossier et les fichiers du guide de style
Dans projet/templates
, créer le dossier style_guide
, puis structurer comme suit :
style_guide
|_ index.html.twig
|_ modules
|_ buttons.html.twig
index.html.twig
{% extends '@UmanitFront/style_guide/base.html.twig' %} {% block title %}{% endblock %} {% block body %} <table> {% include '@UmanitFront/style_guide/partials/progress.html.twig' with { template: 'block', title: 'Block', tags: ['layout'], description: 'Block description', progress: 30 } %} </table> {% endblock %}
Le {% include %}
est à répéter autant de fois qu'il y a d'éléments ajoutés dans le dossier.
Route d'intégration statique
La route /static/{path}
permet d'afficher les Twigs intégrés de manière statiques
La variable {path}
correspond au chemin d'accès d'un template Twig se trouvant dans templates/static/
, qu'importe
sa profondeur dans l'arborescence.
https://domain.wip/static/nom-du-twig.html
rendra la vue Twigtemplates/static/nom-du-twig.html.twig
https://domain.wip/static/sous-dossier/ma_vue.html
rendra la vue Twigtemplates/static/sous-dossier/ma_vue.html.twig
Utilisation
Pour toute la partie CSS l'utilisation est la même que le front kit.