#

Compiling PrettyBlocks

If you wish, you can help us make the user experience even more enriching. You can compile and extend the functionalities of PrettyBlocks

It uses the following technologies:

• Vue 3
• Tailwind CSS
• ViteJS (bundler)

Go to the _dev folder of the PrettyBlocks module

then install the dependencies: npm install

Next, launch the development server

npm run dev

And finally, to use HMR (hot module reload)

For versions 3.1 and above: Modify the parameters in your .env: PRETTYBLOCKS_VITE_DEV=true and if needed, the VITEJS url which by default is: PRETTYBLOCKS_VITE_HOST=http://localhost:3002/'

For versions after 3.1, use this method Modify the view: modules/prettyblocks/views/templates/admin/index.html.twig

and set the variable {% set vitedev = false %}

to true

{% set vitedev = true %}

If the server returns an address other than http://localhost:3002

Replace this url in the following lines with the development server url:

1{% if vitedev %}
2    <script type="module" src="http://localhost:3002/@vite/client"></script>
3{% endif %}
4<div id="app"></div>
5{% if vitedev %}
6    <script type="module" src="http://localhost:3002/src/main.js"></script>
7{% endif %}

replace {% set vitedev = false %}

Finally, (for all versions) once you have finished your modifications, run:

npm run build

You can submit a pull request to us, and we would be delighted to discuss it with you! :)