De PHPhulp kroeg
Frontend en backend gescheiden houden met 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?
Gewijzigd op 25/08/2025 16:01:54 door - Ariën -
/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.
Gewijzigd op 26/08/2025 09:34:58 door Ivo P
Voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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,
},
})
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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'
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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
<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
Code (php)
1
2
2
npm i -D vite @rollup/plugin-inject
npm i admin-lte@^3 bootstrap@^4 jquery overlayscrollbars
npm i admin-lte@^3 bootstrap@^4 jquery overlayscrollbars