Skip to content
Snippets Groups Projects
Commit 61b5e2fb authored by Laurent Lecluse's avatar Laurent Lecluse
Browse files

Ajout de paramètres pour dist.

Doc mise à jour et améliorée
parent d97686f3
No related branches found
No related tags found
No related merge requests found
<?php
return [
/* Configuration globale d'UnicaenVue */
'unicaen-vue' => [
// Chemin relatif de publication des fichiers compilés (à partir de la racine du projet)
'dist-path' => 'public/dist',
// URL relative d'accès, par rapport au répertoire public
'dist-url' => 'dist',
],
];
\ No newline at end of file
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
return [ return [
/* Configuration d'UnicaenVue */ /* Configuration d'UnicaenVue */
/* Fichier utile uniquement en mode DEV, pas en test ou en prod où Node.js ne sera pas installé */ // utile uniquement en mode DEV, pas en test ni en prod où Node ne sera pas utilisé
'unicaen-vue' => [ 'unicaen-vue' => [
// URL d'accès au serveur Node pour le hot-loading (inutile en prod ou en test)
'host' => 'http://localhost:5133', 'host' => 'http://localhost:5133',
// Activation du hot-loading ou non TRUE en mode développement, FALSE pour du test ou de la prod
'hot-loading' => true, 'hot-loading' => true,
], ],
]; ];
\ No newline at end of file
...@@ -18,7 +18,25 @@ UnicaenVue est disponible via le Packagist, comme les autres bibliothèques Unic ...@@ -18,7 +18,25 @@ UnicaenVue est disponible via le Packagist, comme les autres bibliothèques Unic
Lancez `composer update` Lancez `composer update`
## 2. Node.js ## 2. Module Laminas
UnicaenVue est un module Laminas.
Il faut donc l'ajouter à la liste des modules de votre application.
```php
$modules = [
...
'UnicaenVue',
...
];
```
Il faut aussi dupliquer dans config/autoload et paramétrer les fichiers de configuration suivants :
- [unicaen-vue.local.php](../config/unicaen-vue.local.php.dist)
- [unicaen-vue.global.php](../config/unicaen-vue.global.php.dist)
## 3. Node.js
UnicaenVue est aussi un module Node. UnicaenVue est aussi un module Node.
...@@ -51,7 +69,7 @@ Voici un exemple complet de fichier package.json : ...@@ -51,7 +69,7 @@ Voici un exemple complet de fichier package.json :
Lancez `npx npm update` depuis le répertoire racine de votre application. Lancez `npx npm update` depuis le répertoire racine de votre application.
## 3. Vite ## 4. Vite
Un fichier de configuration pour Vite est également à ajouter dans le répertoire racine du projet, dans le fichier `vite.config.js`. Un fichier de configuration pour Vite est également à ajouter dans le répertoire racine du projet, dans le fichier `vite.config.js`.
...@@ -72,6 +90,7 @@ export default unicaenVue.defineConfig({ ...@@ -72,6 +90,7 @@ export default unicaenVue.defineConfig({
root: 'front', root: 'front',
build: { build: {
// Répertoire où seront placés les fichiers issus du build et à ajouter au GIT // Répertoire où seront placés les fichiers issus du build et à ajouter au GIT
// à mettre en cohérence avec la config côté PHP (unicaen-vue/dist-path)
outDir: path.resolve(__dirname, 'public/dist'), outDir: path.resolve(__dirname, 'public/dist'),
}, },
server: { server: {
...@@ -87,7 +106,7 @@ export default unicaenVue.defineConfig({ ...@@ -87,7 +106,7 @@ export default unicaenVue.defineConfig({
Il n'est pas nécessaire de le modifier, à moins que vous ne souhaitiez ajouter des modules à Vite ou personnaliser votre configuration. Il n'est pas nécessaire de le modifier, à moins que vous ne souhaitiez ajouter des modules à Vite ou personnaliser votre configuration.
## 4. Répertoire front & fichier main.js ## 5. Répertoire front & fichier main.js
Créez un nouveau répertoire `front` à la racine de votre projet. Créez un nouveau répertoire `front` à la racine de votre projet.
Ce répertorie contiendra tous vos composants Vue. Ce répertorie contiendra tous vos composants Vue.
...@@ -102,7 +121,7 @@ import vueApp from 'unicaen-vue/js/Client/main' ...@@ -102,7 +121,7 @@ import vueApp from 'unicaen-vue/js/Client/main'
vueApp.init(vues); vueApp.init(vues);
``` ```
## 5. Lancement du front depuis le layout ## 6. Lancement du front depuis le layout
Enfin, dernière étape, vous devez démarrer la partie "front". Enfin, dernière étape, vous devez démarrer la partie "front".
Pour cela, vous devrez ajouter Vite au layout de votre application, dans le HEAD : Pour cela, vous devrez ajouter Vite au layout de votre application, dans le HEAD :
...@@ -119,8 +138,15 @@ Pour cela, vous devrez ajouter Vite au layout de votre application, dans le HEAD ...@@ -119,8 +138,15 @@ Pour cela, vous devrez ajouter Vite au layout de votre application, dans le HEAD
``` ```
lancer Vite lancer Vite en mode dev pour bénéficier du hot-loading:
- `npx vite dev`
C'est prêt!!! C'est prêt!!!
Il ne reste plus qu'à créer votre premier composant. Il ne reste plus qu'à créer votre premier composant.
Un premier tuto est disponible [ici](tuto1.md) Un premier tuto est disponible [ici](tuto1.md)
Une fois vos développements terminés, compilez et commitez le tout :
- `npx vite build` pour compiler
\ No newline at end of file
...@@ -15,6 +15,8 @@ class ViteViewHelper extends AbstractHtmlElement ...@@ -15,6 +15,8 @@ class ViteViewHelper extends AbstractHtmlElement
private $config = [ private $config = [
'host' => 'http://localhost:5133', 'host' => 'http://localhost:5133',
'hot-loading' => true, 'hot-loading' => true,
'dist-path' => 'public/dist',
'dist-url' => 'dist',
]; ];
...@@ -173,7 +175,7 @@ class ViteViewHelper extends AbstractHtmlElement ...@@ -173,7 +175,7 @@ class ViteViewHelper extends AbstractHtmlElement
protected function getManifest(): array protected function getManifest(): array
{ {
$content = file_get_contents(getcwd() . '/public/dist/manifest.json'); $content = file_get_contents(getcwd() . '/' . $this->config['dist-path'] . '/manifest.json');
return json_decode($content, true); return json_decode($content, true);
} }
...@@ -185,7 +187,7 @@ class ViteViewHelper extends AbstractHtmlElement ...@@ -185,7 +187,7 @@ class ViteViewHelper extends AbstractHtmlElement
$manifest = $this->getManifest(); $manifest = $this->getManifest();
return isset($manifest[$entry]) return isset($manifest[$entry])
? $this->getView()->basePath('/dist/' . $manifest[$entry]['file']) ? $this->getView()->basePath('/' . $this->config['dist-url'] . '/' . $manifest[$entry]['file'])
: ''; : '';
} }
...@@ -198,7 +200,7 @@ class ViteViewHelper extends AbstractHtmlElement ...@@ -198,7 +200,7 @@ class ViteViewHelper extends AbstractHtmlElement
if (!empty($manifest[$entry]['imports'])) { if (!empty($manifest[$entry]['imports'])) {
foreach ($manifest[$entry]['imports'] as $imports) { foreach ($manifest[$entry]['imports'] as $imports) {
$urls[] = $this->getView()->basePath('/dist/' . $manifest[$imports]['file']); $urls[] = $this->getView()->basePath('/' . $this->config['dist-url'] . '/' . $manifest[$imports]['file']);
} }
} }
...@@ -214,7 +216,7 @@ class ViteViewHelper extends AbstractHtmlElement ...@@ -214,7 +216,7 @@ class ViteViewHelper extends AbstractHtmlElement
if (!empty($manifest[$entry]['css'])) { if (!empty($manifest[$entry]['css'])) {
foreach ($manifest[$entry]['css'] as $file) { foreach ($manifest[$entry]['css'] as $file) {
$urls[] = $this->getView()->basePath('/dist/' . $file); $urls[] = $this->getView()->basePath('/' . $this->config['dist-url'] . '/' . $file);
} }
} }
......
...@@ -27,6 +27,8 @@ class ViteViewHelperFactory ...@@ -27,6 +27,8 @@ class ViteViewHelperFactory
$viteConfig = $config['unicaen-vue'] ?? []; $viteConfig = $config['unicaen-vue'] ?? [];
$viteConfig['host'] = $viteConfig['host'] ?? 'http://localhost:5133'; $viteConfig['host'] = $viteConfig['host'] ?? 'http://localhost:5133';
$viteConfig['hot-loading'] = $viteConfig['hot-loading'] ?? false; $viteConfig['hot-loading'] = $viteConfig['hot-loading'] ?? false;
$viteConfig['dist-path'] = $viteConfig['dist-path'] ?? 'public/dist';
$viteConfig['dist-url'] = $viteConfig['dist-url'] ?? 'dist';
$viewHelper = new ViteViewHelper($viteConfig); $viewHelper = new ViteViewHelper($viteConfig);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment