Frontend en backend gescheiden houden met Composer.

Door - Ariën - op 25-08-2025 15:55 gewijzigd op 25-08-2025 16:01

1.654 views

Ik heb een groots project gemaakt in PHP die afhankelijk is van Composer.
Normaal gesproken wil je de /vendor map buiten de webroot zetten. Echter heb ik een template-package (LTE Admin 3) in gebruik die ik ook via Composer binnenhaal maar deze moet wel juist publiekelijk staan vanwege de statische JS, CSS etc.. bestanden.

Wat zijn de beste manieren om dit seperaat te houden?

Symlinks kan, maar ik gebruik Windows bij het ontwikkelen. Dus daar moet ik wel rekening mee houden.

Hoe zouden jullie frontend en backend packages gescheiden houden met Composer?
Of zijn de meesten van het type dat ze npm voorbehouden aan frontend, en Composer als backend?

Ivo P

26-08-2025 09:34 gewijzigd op 26-08-2025 09:34

laat ik aannemen dat die files staan in

/LTE/css/
/LTE/js/

Dan zou je een rewriterule kunnen maken die zorgt dan je dan doorverwijst naar
/fix_lte.php

Daarin kijk je vervolgens of het gevraagde css/js bestand inderdaad te vinden is in de vendor-map vendor/LTE/css/foo.css
indien ja:
- Geef de juiste content-type header
- stuur de betreffende inhoud

Voorbeeld op https://www.php.net/manual/en/function.fpassthru.php

Dit geldt ook voor binaire bestanden ans jpegs etc.

- Ariën -

26-08-2025 10:38

Dat zou eigenlijk misschien geen slecht idee zijn. Als je dit verder doortrekt, zou je zelfs de boel nog kunnen minify'en.

Bas Kreleger

26-08-2025 14:30 gewijzigd op 28-05-2026 07:13

Andere optie is om Vite te gebruiken waarin je die plugins include (JS en CSS). Dan compile je dat naar CSS bestanden waar nodig en hoef je je vendor map niet in je pub dir te hebben.

Voorbeeld:

import { defineConfig } from 'vite'
import inject from '@rollup/plugin-inject'
import path from 'path'

export default defineConfig({
  root: '.', // index.html in project root
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  optimizeDeps: {
    include: ['jquery', 'bootstrap', 'admin-lte', 'overlayscrollbars'],
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
      },
      plugins: [
        // Inject $ / jQuery globals for AdminLTE & Bootstrap 4
        inject({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
        }),
      ],
      output: {
        manualChunks: {
          vendor: ['jquery', 'bootstrap', 'admin-lte', 'overlayscrollbars'],
        },
      },
    },
  },
  server: {
    port: 5173,
    strictPort: true,
  },
})

src/main.js

// jQuery global (for safety)
import $ from 'jquery'
window.$ = window.jQuery = $

// JS
import 'bootstrap/dist/js/bootstrap.bundle.js'
import 'overlayscrollbars/js/OverlayScrollbars.min.js'
import 'admin-lte'

// CSS (order matters!)
import 'bootstrap/dist/css/bootstrap.min.css'
import 'overlayscrollbars/css/OverlayScrollbars.min.css'
import 'admin-lte/dist/css/adminlte.min.css'
import './styles/app.css'

index.html (voorbeeld)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>AdminLTE 3 + Vite</title>
  <script type="module" src="/src/main.js"></script>
</head>
<body class="hold-transition sidebar-mini">
  <div class="wrapper">
    <!-- Your AdminLTE layout here -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <ul class="navbar-nav">
        <li class="nav-item d-none d-sm-inline-block">
          <a href="#" class="nav-link">Home</a>
        </li>
      </ul>
    </nav>
  </div>
</body>
</html>

NPM

npm i -D vite @rollup/plugin-inject
npm i admin-lte@^3 bootstrap@^4 jquery overlayscrollbars

Reageren

Inloggen om te reageren