Gerenciando Assets do Bootstrap no CodeIgniter 4 com Composer

Ao desenvolver aplicações web com CodeIgniter 4 e gerenciar dependências de frontend como o Bootstrap via Composer, surge a necessidade de disponibilizar esses arquivos (CSS, JavaScript, fontes, etc.) para acesso público através das views. A pasta vendor, onde o Composer instala as dependências, não deve ser diretamente acessível pela web por questões de segurança e organização. A melhor prática para lidar com isso no CodeIgniter 4 é utilizando a biblioteca Publisher.

Por que usar a Biblioteca Publisher?

A biblioteca Publisher do CodeIgniter 4 [1] foi projetada especificamente para resolver o desafio de copiar arquivos de bibliotecas instaladas via Composer (ou de qualquer outra origem) para um diretório acessível publicamente, como a pasta public do seu projeto. Suas principais vantagens incluem:

  • Gerenciamento de Versões: Facilita a atualização de dependências, pois você pode simplesmente reexecutar o comando de publicação após uma atualização do Composer.
  • Organização e Segurança: Mantém a pasta vendor protegida e garante que apenas os assets necessários sejam expostos publicamente.
  • Automação: Permite automatizar o processo de cópia de arquivos, integrando-o ao fluxo de trabalho de desenvolvimento e deploy.
  • Flexibilidade: Oferece controle granular sobre quais arquivos e diretórios devem ser copiados e para onde.

Implementação com a Biblioteca Publisher

A seguir, detalhamos os passos para integrar o Bootstrap 5.3.8, instalado via Composer, em suas views do CodeIgniter 4 usando a biblioteca Publisher.

1. Criar uma Classe Publisher Personalizada

É recomendável criar uma classe Publisher personalizada para o Bootstrap. Isso permite que você defina a origem e o destino dos arquivos de forma organizada. Crie um novo arquivo, por exemplo, app/Publishers/BootstrapPublisher.php:

<?php

namespace App\Publishers;

use CodeIgniter\Publisher\Publisher;

class BootstrapPublisher extends Publisher
{
    /**
     * Define o caminho de origem dos assets do Bootstrap.
     * Normalmente, é o diretório `vendor/twbs/bootstrap`.
     *
     * @var string
     */
    protected $source = ROOTPATH . 'vendor/twbs/bootstrap';

    /**
     * Define o caminho de destino dos assets do Bootstrap.
     * Normalmente, é o diretório `public/assets/bootstrap`.
     *
     * @var string
     */
    protected $destination = FCPATH . 'assets/bootstrap';

    public function publish(): bool
    {
        return $this
            ->addPath('dist') // Copia todo o conteúdo da pasta 'dist' do Bootstrap
            ->merge(true); // Mescla os arquivos, sobrescrevendo se existirem
    }
}

Explicação:

  • $source: Aponta para o diretório raiz do pacote Bootstrap dentro da pasta vendor.
  • $destination: Define o diretório onde os arquivos do Bootstrap serão copiados dentro da sua pasta public. Recomenda-se public/assets/bootstrap para manter a organização.
  • publish(): Este método é onde você define quais arquivos ou diretórios serão copiados. No exemplo, addPath('dist') instrui o Publisher a copiar todo o conteúdo da pasta dist do Bootstrap (que contém CSS, JS, etc.). merge(true) garante que os arquivos sejam mesclados e sobrescritos se já existirem, o que é útil para atualizações.

2. Executar o Comando Spark Publish

Após criar a classe Publisher, você pode executar o comando spark publish no terminal para copiar os assets. O CodeIgniter 4 irá descobrir automaticamente sua classe BootstrapPublisher.

php spark publish

Este comando copiará os arquivos do Bootstrap da pasta vendor/twbs/bootstrap/dist para public/assets/bootstrap/dist.

3. Incluir os Assets nas Views

Com os arquivos do Bootstrap agora disponíveis na pasta public/assets/bootstrap/dist, você pode incluí-los em suas views (por exemplo, app/Views/layout.php ou app/Views/welcome_message.php) da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Aplicação CI4 com Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="<?= base_url('assets/bootstrap/dist/css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Olá, Bootstrap no CodeIgniter 4!</h1>
        <button class="btn btn-primary">Botão de Exemplo</button>
    </div>

    <!-- Bootstrap JS e dependências (Popper.js) -->
    <script src="<?= base_url('assets/bootstrap/dist/js/bootstrap.bundle.min.js') ?>"></script>
</body>
</html>

Utilize a função base_url() do CodeIgniter para gerar os caminhos corretos para seus assets, garantindo que eles funcionem independentemente da URL base da sua aplicação.

Alternativas (Menos Recomendadas)

Embora existam outras maneiras de lidar com assets de bibliotecas, elas são geralmente menos recomendadas:

  • Symlinks (Links Simbólicos): Criar links simbólicos da pasta vendor para public pode funcionar, mas pode ser problemático em alguns ambientes de hospedagem e menos portável.
  • Acesso Direto (via .htaccess): Tentar configurar o servidor web para acessar diretamente a pasta vendor é uma má prática de segurança e não é recomendado.
  • Cópia Manual: Copiar os arquivos manualmente é propenso a erros e inviável para projetos com muitas dependências ou atualizações frequentes.

Conclusão

A biblioteca Publisher é a solução mais robusta e recomendada pelo CodeIgniter 4 para gerenciar assets de bibliotecas instaladas via Composer. Ela oferece uma abordagem automatizada, segura e organizada para disponibilizar seus arquivos de frontend, como o Bootstrap, em suas views, seguindo as melhores práticas do framework.

Referências

[1] Publisher — CodeIgniter 4.7.0 documentation

XDebug no VSCode para CodeIgniter 4

A junção do PHP com o XDebug permite a depuração do código em passos com a visualização dos valores das variáveis em tempo real.

Para quem tem projetos CI4, a configuração abaixo deve ser inserida no arquivo launch.json do VSCode.

{
    "name": "CI4 Spark XDebug",
    "type": "php",
    "request": "launch",
    "runtimeArgs": [
        "spark",
        "serve",
        "-dxdebug.mode=debug",
        "-dxdebug.start_with_request=yes",
        "-S",
        "localhost:8080",
    ],
    "env": {
        "XDEBUG_MODE": "debug",
        "XDEBUG_SESSION": "factor",
    },
    "externalConsole": false,
    "program": "",
    "cwd": "${workspaceRoot}",
    "port": 9003,
    "serverReadyAction": {
        "action": "openExternally",
        "killOnServerStop": false
}

Configurando Apache/PHP no Scoop para CodeIgniter

O Scoop é um sistema de gerenciamento de pacotes para Windows similar ao APT para Linux e BREW para MacOS onde a manutenção do processo de instalação/remoção de aplicativos é feito diretamente no prompt de comando com poucos ou apenas um único comando.

CodeIgniter é um framework PHP para desenvolvimento de aplicativos WEB.

Com o scoop é possível instalar o Apache Web Server junto com uma versão específica do PHP para configurar um ambiente de desenvolvimento.

A instalação do Scoop pode ser feita seguindo essa documentação: https://scoop-docs.vercel.app/

Importante habilitar os buckets php, extras e versions no scoop:

  • scoop bucket add extras
  • scoop bucket add php
  • scoop bucket add versions

Após a instalação os seguintes comandos são utilizados para instalar Apache/PHP:

  • scoop install apache php7.4
  • scoop install sudo
  • iex (new-object net.webclient).downloadstring('https://gist.githubusercontent.com/nilkesede/c98a275b80b6d373131df82eaba96c63/raw/apache-php-init.ps1')
  • sudo httpd -k install -n Apache2.4
  • sudo net start apache

A configuração do PHP através do arquivo php.ini deve ser feita dentro da pasta persist\php7.4 do scoop para que as modificações permaneçam inalteradas após atualizações do PHP.

Por padrão, o apache não  configurou o caminho do php.ini para a pasta persist, então, troque a linha

PHPIniDir "D:\Aplicativos\Scoop\apps\php7.4\current"

por

PHPIniDir "D:\Aplicativos\Scoop\persist\php7.4"

no httpd.conf de acordo com o caminho na sua máquina.

Dicas:

  1. é necessário reiniciar o Windows para receber as alterações  feitas no PATH do sistema durante o processo
  2. qualquer alteração em  httpd.conf ou php.ini, o serviço do apache deve ser reiniciado
  3. para ver algum erro de configuração no php, use o phpinfo e também o comando php -v no prompt
  4. inclua o caminho do php corrente no path do sistema (necessário para a carga das extensões). ex: D:\Aplicativos\Scoop\apps\php7.4\current
  5. carregue a extensão intl (necessária para o CodeIgniter)

Apache

Em httpd.conf da pasta persist, habilite o módulo rewrite e remove o comentário da linha

Include conf/extra/httpd-vhosts.conf

para habilitar a leitura dos hosts virtuais em httpd-hosts.conf da pasta persist.

Adicionar a linha abaixo no http.conf dentro de <IfModule dir_module>

 DirectoryIndex index.php

Exemplo de vhost para um projeto:

<VirtualHost *:80>
ServerAdmin rdconsolo@gmail.com

ErrorLog "D:\Projetos\logs\error_log"
CustomLog "D:\Projetos\logs\access_log" common

Alias "/project-root" "D:\Projetos\project-root\public"
<Directory "D:\Projetos\project-root">
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted

RewriteEngine On
RewriteBase /project-root/index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
</Directory>
</VirtualHost>