ysugimoto/flame

Frontend Integration library for CodeIgniter4

v0.5.0 2024-08-11 22:11 UTC

This package is auto-updated.

Last update: 2025-03-12 16:32:13 UTC


README

flame is the frontend integration library for CodeIgniter4.

Collaborate with vite frontend

This library loads manifest file which is generated via vite with flame-vite-plugin. You can specify loading asset files like <script> and <link> by helper function.

sequenceDiagram
  autonumber
    Vite->>flame: Build with flame-vite-plugin
    CodeIgniter->>flame: Load Manifest
Loading

For the generating manifest file, see flame-vite-plugin documenration.

Installation

You can install via packagist.

composer require --dev ysugimto/flame

And then run the CodeIgniter's command.

php spark flame:setup

The above command generated package configuration in your app/Config/Flame.php. And also you need to load the flame helper. Modify configiration of your autoloader.

# app/Config/Autoload.php

class Autoload extends AutoloadConfig
{
    ...
    public $helpers = ["flame"];
    ...
}

Usage

Note

You need to genearte manifest file before.

After the setup, you can use the flame helper function in your view files.

<?php echo flame("[Asset Filename]");?>

We suggest to put this hepler calls inside the <head> tag or before the </body> tag.

Preload

To improve script/css loading performance, you can configrure the preload. To enable preloading, you can also use flame_preload helper function.

<?php echo flame_preload("[Asset Filename]");?>

This function displays <link rel="preload" ... /> tag so need to be called inside the <head> tag.

Alias

On developing backend, you might not consider about what asset file sould be loaded on view file. Then you can specify asset name as alias like:

<?php echo flame("@main");?>

On the above case, the @main alias will be resolved in the manifest file so you don't take care of the asset filename. To use the alias loading, see Alias section in the vite plugin.

DevServer / HMR

vite can runs dev server with HMR and the flame also can synchronize with it. For example, vite command will start dev server like http://localhost:5173, and also flame-vite-plugin generates manifest file as dev mode. The flame helper function automatically recognize the manifest is dev mode or not, and generates <script> tags with HMR mode. It is useful for developing frontend view with CodeIgniter. When you change the frontend file, the view that is displayed by CodeIgniter will reload automatically.

Manifest Loading

Currently we support a way of loading manifest file via:

  • Local FileSystem
  • HTTP Request

The default setting is Local FileSystem but sometimes your frontend will be served via Cloud Storage service like AWS S3, Google Cloud Storage for some Single-Page-Application.

On this case, you can use HTTP Request manifest loading by changind configuration file.

// app/Config/Flame.php

class Flame extends FlameConfig
{
    ...
    public FetchMode $mode = FetchMode::HTTP;
    public string $baseUrl = "https://[yourdomain]/";
    ...
}

See phpdocs in the configiuration file in detail.

Contribution

  • Fork this repository
  • Customize / Fix problem
  • Send PR :-)
  • Or feel free to create issues for us. We'll look into it

Author

Yoshiaki Sugimoto sugimoto@wnotes.net

License

MIT