Front Render Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require chris13/front-render-bundle "~1"
   

   Add to config/bundles.php:

   return [
       // ...
       Chris13\FrontRenderBundle\Chris13FrontRenderBundle::class => ['all' => true],
   ];
   

2. Basic Configuration Edit app/config/config.yml:

   chris13_front_render:
       base_url: "http://localhost:3000"  # Your frontend app URL
       assets_version: "1.0"             # Cache-busting version
   

3. First Use Case In a controller, render a frontend route:

   use Chris13\FrontRenderBundle\Controller\FrontRenderController;
   
   class MyController extends FrontRenderController
   {
       public function indexAction($route, $params = [])
       {
           return $this->renderFront($route, $params);
       }
   }
   

   Route it in routes.yml:

   my_front_route:
       path: /frontend/{route}
       defaults: { _controller: App\Controller\MyController::indexAction }
   

Implementation Patterns

Common Workflows

1. Frontend Route Proxying Use renderFront() to proxy requests to your frontend app (e.g., Angular/Backbone):

   return $this->renderFront('dashboard', ['userId' => 123]);
   

   URL generated: /frontend/dashboard?userId=123

2. Asset Management Bundle static assets (JS/CSS) with versioning:

   {{ asset('bundles/frontrender/js/app.js', {'version': chris13_front_render.assets_version}) }}
   

3. Hybrid Rendering Mix Symfony and frontend templates:

   {% extends 'base.html.twig' %}
   {% block content %}
       {{ parent() }}
       {{ renderFront('partials/header') }}
   {% endblock %}
   

4. API Integration Fetch frontend data via Symfony controllers:

   $frontendData = $this->renderFront('api/data', [], true); // `true` for raw response
   

Integration Tips

• Caching: Leverage Symfony’s cache system for frontend responses:

  chris13_front_render:
      cache_enabled: true
      cache_lifetime: 3600
  

• Authentication: Pass Symfony user data to frontend:

  $params = ['user' => $this->getUser()->getRoles()];
  return $this->renderFront('dashboard', $params);
  

• Error Handling: Customize 404/500 responses for frontend routes:

  chris13_front_render:
      error_handler: App\Handler\FrontErrorHandler
  

Gotchas and Tips

Pitfalls

1. Outdated Package

   • Last release in 2016; test thoroughly for compatibility with modern Symfony/Laravel.
   • May conflict with newer Symfony components (e.g., HTTP client changes).

2. CORS Issues

   • Ensure base_url in config matches frontend’s CORS allowed origins.
   • Debug with browser dev tools if frontend assets fail to load.

3. Cache Invalidation

   • Manually clear cache when assets_version changes:

     php bin/console cache:clear
     

4. Route Collisions

   • Avoid naming Symfony routes identical to frontend routes (e.g., /login).

Debugging

• Logs: Enable debug mode to log frontend requests:

  chris13_front_render:
      debug: true
  

• Raw Responses: Use renderFront($route, [], true) to inspect raw HTTP responses.

Extension Points

1. Custom Handlers Override FrontRenderController to modify behavior:

   class CustomFrontRenderController extends FrontRenderController
   {
       protected function getFrontUrl($route, array $params)
       {
           // Custom logic (e.g., add auth token)
           return parent::getFrontUrl($route, $params) . '&token=' . $this->getAuthToken();
       }
   }
   

2. Middleware Add Symfony middleware to preprocess frontend requests:

   # config/packages/framework.yaml
   framework:
       http_client:
           middleware:
               - Chris13\FrontRenderBundle\Middleware\FrontRequestMiddleware
   

3. Twig Extensions Extend Twig for dynamic frontend rendering:

   // src/Twig/FrontExtension.php
   class FrontExtension extends \Twig\Extension\AbstractExtension
   {
       public function getFunctions()
       {
           return [
               new \Twig\TwigFunction('render_front', [$this->container->get('front_renderer'), 'render']),
           ];
       }
   }
   

   Usage in Twig:

   {{ render_front('partials/sidebar', {'user': user}) }}