This article is part of the CakeDC Advent Calendar 2024 (December 6th 2024) Vite can be easily integrated to manage assets such as JavaScript, CSS, images, and fonts. This integration is particularly useful in modern applications where the frontend and backend work together. Advantages of Using Vite with CakePHP
- Development Optimization: HMR allows developers to see changes instantly in the browser, improving the development experience. There's no need to refresh the page constantly to view updates.
- Efficient Bundling: Production assets are minimized and optimized, reducing loading times.
- Modern Technology Adoption: It enables the integration of modern frontend tools like Vue.js, React, or TypeScript into traditional CakePHP projects.
- Applications with Dynamic Frontends: Ideal for CakePHP projects where the frontend requires interactive components built with React or Vue.js.
- Hybrid Applications: Integration of a SPA (Single Page Application) with a robust backend like CakePHP.
- Enterprise Applications: Management of dashboards with interactive charts and reports, leveraging modern frontend tools while using CakePHP for data handling and business logic.
1.- Create a new View:
src/View/ViteView.phpdeclare(strict_types=1);
namespace App\View;
use Cake\View\View;
class ViteView extends View
{
public function initialize(): void
{
$this->loadHelper('Vite');
}
}
2.- Create a new Trait
src/Traits/ViteResponseTrait.phpnamespace App\Traits;
use App\View\ViteView;
use Cake\Event\EventInterface;
trait ViteResponseTrait
{
public function beforeRender(EventInterface $event)
{
$this->viewBuilder()->setClassName(ViteView::class);
}
}
3.- Create a new Helper
src/View/Helper/ViteHelper.phpnamespace App\View\Helper;
use Cake\Routing\Router;
use Cake\View\Helper;
class ViteHelper extends Helper
{
public array $helpers = ['Html'];
public function loadAssets(): string
{
if (!file_exists(WWW_ROOT . 'hot')) {
$manifest = json_decode(
file_get_contents(WWW_ROOT . 'js' . DS . 'manifest.json'),
true
);
$path = Router::fullBaseUrl() . DS . 'js' . DS;
$firstBlock = [];
$secondBlock = [];
foreach($manifest as $key => $data){
$part = explode('.', $key);
$part = $part[count($part) - 1];
if ($part == 'css') {
$firstBlock[] = $this->Html->tag(
'link',
'',
['as' => 'style', 'rel' => 'preload', 'href' => $path . $data['file']]
);
$secondBlock[] = $this->Html->tag(
'link',
'',
['as' => 'style', 'rel' => 'stylesheet', 'href' => $path . $data['file']]
);
}
if ($part == 'js') {
$firstBlock[] = $this->Html->tag(
'link',
'',
['as' => 'style', 'rel' => 'preload', 'href' => $path . $data['css'][0]]
);
$secondBlock[] = $this->Html->tag(
'link',
'',
['as' => 'style', 'rel' => 'stylesheet', 'href' => $path . $data['css'][0]]
);
$firstBlock[] = $this->Html->tag(
'link',
'',
['rel' => 'modulepreload', 'href' => $path . $data['file']]
);
$secondBlock[] = $this->Html->tag(
'script',
'',
['type' => 'module', 'src' => $path . $data['file']]
);
}
}
return implode('', $firstBlock) . implode('', $secondBlock);
} else {
$domain = file_get_contents(WWW_ROOT . 'hot');
$head = $this->Html->script(
$domain . '/@vite/client',
['rel' => 'preload', 'type' => 'module']
);
$head .= $this->Html->css($domain . '/resources/css/app.css');
$head .= $this->Html->script(
$domain . '/resources/js/app.js',
['rel' => 'preload', 'type' => 'module']
);
return $head;
}
}
}
4.- Create function vite and add the trait to the controller
src/Controller/PagesController.phpuse App\Traits\ViteResponseTrait;
class PagesController extends AppController
{
use ViteResponseTrait;
public function vite()
{
$this->viewBuilder()->setLayout('vite');
}
}
5.- Add a new layout
templates/layout/vite.php
<!DOCTYPE html>
<head lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cake with Vite and Vue</title>
<?php echo $this->Vite->loadAssets();?>
</head>
<body class="antialiased">
<div id="app">
<example-component></example-component>
</div>
</body>
</html>
6 .- Install and configure Vite (using DDEV)
on .ddev/config.yaml add this new configuration and run ddev restartweb_extra_exposed_ports:
- name: vite
container_port: 5173
http_port: 5172
https_port: 5173
create package.json
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"laravel-vite-plugin": "^1.0.0",
"vite": "^5.0.0"
},
"dependencies": {
"@vitejs/plugin-vue": "^5.1.4",
"vue": "^3.5.8",
"vuex": "^4.0.2"
}
}
create vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
publicDirectory: 'webroot',
refresh: true,
}),
vue(),
],
build: {
outDir: 'webroot/js'
},
server: {
host: '0.0.0.0',
port: port,
strictPort: true,
origin: origin
},
});
create .env
APP_NAME=cakePHP
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL="https://advent2024.ddev.site"
to install and configure all run in console: ddev npm install
7. Create an Example App
resources/js/components/ExampleComponent.vue
<template>
<div class="text-center p-4 bg-blue-100 rounded-lg">
<h1 class="text-2xl font-bold">Hello from Vue 3!</h1>
<p class="mt-2">This is a Vue component integrated with CakePHP and Vite.</p>
<h2 class="mt-4">Counter: {{ count }}</h2>
<p class="mt-2">
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</p>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
name: 'ExampleComponent',
computed: {
...mapGetters(['getCount']),
count() {
return this.getCount;
},
},
methods: {
...mapActions(['increment', 'decrement']),
},
};
</script>
<style scoped>
button {
margin: 5px;
}
</style>
resources/js/app.js
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
import store from './store';
createApp(ExampleComponent).use(store).mount('#app');
resources/js/store.js
import {createStore} from 'vuex';
const store = createStore({
state: {
count: Number(localStorage.getItem('count')) || 0,
},
mutations: {
increment(state) {
state.count++;
localStorage.setItem('count', state.count);
},
decrement(state) {
state.count--;
localStorage.setItem('count', state.count);
},
},
actions: {
increment({ commit }) {
commit('increment');
},
decrement({ commit }) {
commit('decrement');
},
},
getters: {
getCount(state) {
return state.count;
},
},
});
8.- Launch
For development run Vite ddev npm run dev
For production run Vite build
ddev npm run build
This generates the assets directory inside webroot dir, the helper automatically load the files parsing the manifest.json
You can see in front the app
You can see a complete example in https://github.com/ACampanario/advent2024
Connection on client side
Conclusion
Using JWT is crucial for modern systems that require secure, efficient, and scalable communication. Its ability to encapsulate signed and verifiable information, along with its lightweight design and open standard, makes it a powerful tool for distributed architectures and applications reliant on robust authentication and authorization. Implementing JWT in an application ensures an optimal balance between security and performance.
You can see a complete example in 
Once the database has been created, bake models and controllers as normal using:
Generate new token for read and write and save apart the value of token generated
And in the live url + /hello.html you can see:
Create a specific runner for the project in the URL with registration token. Register GitLab Runner from the command line. It is important to use docker and privileged
That’s all bakers! I hope this article can be useful and you can improve your logs.
However, this is true if we are talking about hundreds of MB or even several GB, but sometimes we get into a situation where we have massive amounts of data (i.e Several tables with lots of longtext columns). At this point it becomes a concern because we need to increase the hard disk size, and find ourselves checking to see if the hard disk is full several times per day or week, etc.
Now, if you have faced a situation like this before, it's time to talk about database compression.
Compression is a technique, developed theoretically back in the 1940s but actually implemented in the 1970s. For this post we will focus on MySQL compression, which is performed using the open-source ZLib library. This library implements the LZ77 dictionary-based compression algorithm.
Before going into MySQL compression details, lets name some of the main DBMS and their compression techniques:
Firstly, you need to know that you CAN'T enable compression if:
Now with the middleware, we can use the method 
That’s it, we have migrated CSRF protection from CsrfComponent to CsrfProtectionMiddleware.
