Front-end

• Dependencies
• Build
• Points of attention

The current Front-end of Lychee is using Tailwindcss, AlpineJS, TypeScript and Blade templates. In order to modify it you will need to recompile it.

Dependencies

In order to compile the front-end, you have to install the following dependencies:

• node Node.js v20.0.0 or later
• npm Node Packaged Modules

After installing Node.js you can use the included npm package manager to download all dependencies:

npm install

Build

In order to generate the front-end visual you will need to run the following:

npm run dev

This will create the files required to run Lychee.

When running in production, you should use instead:

npm run build

This will create a public/build folder with the associated files.

Points of attention

To ease your development, some pain points are to be considered:

• names of variables (attributes) in blade templates must use camelCase.
• try to keep the alpine components code in the .ts files.
• TailwindCSS is doing tree-shaking, this means that any unused css class will not be provided in the production build. When using classes programatically (e.g. in php), make sure to add them to tailwind.config.js

{tip} Caught a mistake or want to contribute to the documentation? Edit this page on Github!