programacion

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2)

Video de Youtube
URL de Video remoto
Texto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

      Ya que hemos aprendido cómo configurar Contenta CMS de Drupal, para que pueda escuchar nuestra API de Nuxt.js, es el momento de hacer lo mismo desde el otro lado.

   Paso 2 - Configuración de Nuxt.js

     Para obtener datos de la aplicación nuxtapp, usaremos la biblioteca de javascript axios y, específicamente, usaremos la biblioteca axios creada para Nuxt: @nuxt/axios. Si eres desarrollador de PHP, puedes pensar en axios como el Guzzle del mundo de JavaScript. En la Parte 1 de este artículo, cuando instalamos la aplicación mynuxt, extrajimos la biblioteca axios.

   Configuración Variables de entorno ( .env)

  Si queremos conectar nuxtapp con el backend de contenta-drupal, primero tendremos que informarle acerca de algunas variables de entorno, así sabrá hacia dónde podrá realizar las peticiones de datos que quiere obtener.

  Dentro de nuestra aplicación nuxtapp, crearemos un archivo con el nombre .env y dentro pegaremos el siguiente código:

APP_ENV=lando
API_URL=http://contenta-drupal.lndo.site/
CONSUMER_ID={{ Copiaremos aquí el ID Consumer de Drupal en //admin/con

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Después de agregar este archivo, deberá reconstruir la aplicación nuxtapp,  para cargar las variables de entorno en los contenedores de la aplicación; para ello, colocados en la carpeta de nuestrra aplicación de Nuxt.js, ejecutaremos el siguiente comando:

lando rebuild

Configuración de axios ( nuxt.config.js )

   A pesar de que hemos seleccionado la opción Axios, en el momento de realizar la descarga de las dependencias para nuxtapp, si abrimos el archivo de configuración, en el apartado de móldulos, sólo vemos bootstrap-vue/nuxt, al igual que si exploramos la carpeta node_modules, por lo tanto tendremos que descargar axios y luego añadirlo en el listado de módulos dentro del archivo nuxt.config.js.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Para ello, nos aseguraremos de estar en la carpeta nuxtapp y ejecutaremos el siguiente comando para que se descarguen los archivos de axios:

lando yarn add @nuxtjs/axios

 

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Una vez descargado, abriremos el archivo de configuración de Nuxt.js llamado nuxt.config.js y en el apartado de módulos, sutituiremos el código actual por el siguiente:


// Modules: https://go.nuxtjs.dev/config-modules
modules: [
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  // https://go.nuxtjs.dev/bootstrap
  'bootstrap-vue/nuxt',
],
/*
  ** Axios module configuration
  */
axios: {
  // See https://github.com/nuxt-community/axios-module#options
  debug: process.env.APP_ENV !== "production"
},

   Para ver todas las opciones disponibles puedes leer la URL en el comentario. Para nuestros propósitos, activaremos la depuración con la advertencia de que nuestro APP_ENV no es producción.

   Configuración de la ( baseURL )

     También en el archivo nuxt.config.js, agregaremos un bloque de código env para configurar la baseURL que indica a axios dónde realizar las llamadas API a Contenta. En la parte inferior del archivo, después de la sección build, agregue las siguientes líneas:


// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
},
env: {
  baseURL: process.env.API_URL,
  CONSUMER_ID: process.env.CONSUMER_ID
}

      Después de realizar cambios en los archivos .env o nuxt.config.js, deberá reconstruir la aplicación Lando lando rebuild -y para permitir que la aplicación nuxtapp cargue esos cambios.


lando rebuild -y

   ¡Eso configura nuestra configuración de axios para que ahora podamos realizar solicitudes desde nuestra aplicación mynuxt de regreso a Contenta nuxtapp!

   Hacer una llamada a la API

     Hagamos una ruta de página llamada posts con un archivo index.vue para volver a consultar a Contenta en busca de una publicación. Agregué un tipo de contenido a Contenta con el nombre de la máquina post y consultaré el endpoint /api/node/post/{uuid} para los datos json.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   En Nuxt hay un directorio pages y todo lo que pongas en él, Nuxt creará automáticamente rutas Vue para nosotros. En este caso, crearemos un directorio posts dentro del directorio de páginas:


sudo mkdir pages/posts

   Entonces deberías terminar con una estructura de directorios como esta:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Observe la estructura del archivo pages/posts/index.vue. Tiene tres secciones: <template><script> y <style>. Como probablemente pueda adivinar, la sección <template> contendrá nuestro html, <script> contendrá nuestro javascript y <style> contendrá nuestro css.

   Ahora añadiremos algunos datos para nuestra plantilla. En la sección <script> de pages/posts/index.vue, agreguemos una función data() para que la plantilla sepa qué datos esperamos. En este caso, nuestro tipo de contenido posts consta de los campos title y body. Abriremos pages/posts/index.vue en nuestro editor de código. En la sección <scripts> y a continuación, agregaremos la función data():


<template>
  <section class="container">
  </section>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: "PLACEHOLDER TITLE",
      body: "PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT"
    }
  }
}
</script>

<style scoped>
</style>

   Ahora nuestra sección<template> tiene acceso a data() y podemos comenzar a construir nuestra plantilla. Agregue a la sección de su plantilla referencias a los marcadores de posición para el title y el body:


<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: 'PLACEHOLDER TITLE',
      body: 'PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT'
    }
  }
}
</script>

<style scoped>
</style>

     En la línea 5, hemos hecho referencia a la clave title de nuestra función data() y hemos representado el contenido del marcador de posición predeterminado en nuestra plantilla. De manera similar, en la línea 12 hemos hecho referencia a la propiedad body, esta vez en una directiva vue v-html. Hemos usado v-html para demostrar el paso de datos que pueden contener html. Podríamos haberlo referenciado de la misma manera que hicimos referencia al título.

     Si ahora visitamos la url de nuestra aplicación: http://nuxtapp.lndo.site/posts deberíamos ver un resultado como el siguiente:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Ahora reemplacemos los datos del marcador de posición con datos reales de contenta-drupal.

   Dentro de la sección <script> agregaremos una nueva función llamada asyncData que devolverá la llamada a nuestra aplicación contenta-drupal con llamadas asyncData y obtendremos los datos e intercambiará los datos del marcador de posición con datos reales.


<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  async asyncData({app}) {
    const data = await app.$axios
      .get('/api/node/post/c6b24529-0d69-4cbb-a966-ab2d6ac5a59b', {})
      .then(res => {
        console.log(res)
        return {
          title: res.data.data.attributes.title,
          body: res.data.data.attributes.body.value
        }
      })
      .catch(err => {
        if (err) {
          return err
        }
      })

    return data
  }
}
</script>

<style scoped>
</style>

   Aquí, en la línea 22, hemos cambiado la función data() por asyncData(). La función asyncData se pasa en el contexto de la aplicación que tiene acceso al objeto $axios a través del trabajo que hicimos en los archivos .env y nuxt.config.js. Usamos este objeto $axios para realizar una solicitud GET de regreso a contenta-drupal y obtener el nodo de publicación con uuid=c6b24529-0d69-4cbb-a966-ab2d6ac5a59b en este ejemplo que uuid está codificado para una publicación específica.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1)

Video de Youtube
URL de Video remoto
Texto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Ahora que hemos aprendido a instalar y configurar, utilizando Lando, una aplicación con Nuxt.js y la distribución optimizada para el sistema headless de Drupal 9, llamada Contenta CMS; es el momento de pasar a la siguiente fase, en la que conectaremos ambas aplicaciones para mostrar los datos servidos desde Drupal, en nuestra aplicación de Nuxt.js.

   Paso 1 - Configuración de Contenta CMS

     Como podrás ver en el capítulo sobre Simple OAuth, para que Drupal pueda escuchar las peticiones desde la API; primero tendremos que configurar tres partes, que nos permitirán realizar esa conexión:

  • Rol para la API:

         La idea es crear un rol, al que le otorgaremos los permisos para relizar las conexiones con la API. Para ello, nos iremos a la url "/admin/people/roles" y allí, añadiremos un nuevo Rol, al que llamaremos vue_role, haciendo clic en el botón de añadir nuevo rol.
         Recuerda que Contenta CMS, es un Drupal "vitaminado", por lo que hay ciertas diferencias si queremos acceder a las secciones a través del menú de administración. En este caso, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Role, para encontrar el botón de Add Rol.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Configurar un usuario de API

     Lo siguiente que haremos es, después de haber creado el rol para nuestra API, tendremos que crear un nuevo usuario, al que le añadiremos el  vue_role que acabamos de crear, para esta operación, podremos ir a la url "/admin/people" o si preferimos hacerlo por el menú, al igual que en caso anterior, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Users, para encontrar el botón de Add user.
     En este caso, una vez hagamos clic en el botón para añadir a nuestro usuario, completaremos los campos necesarios como con cualquier otro usuario, le pondremos el nombre de usuario vue_user, y a continuación marcaremos el rol vue_role.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Configurar un consumidor

   El último eslabón de esta cadena de requermientos será el Consumer, que será quien nos permitirá realizar la conexión entre Contenta CMS y la API de Nuxt.js. Para ello, iremos a la url "/admin/config/services/consumer".
   O también podremos acceder a través del menú de administración, esta vez, tal y como lo haríamos desde un Drupal normal y corriente.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Esta vez, al hacer clic en el botón de Add Consumer, nos aseguraremos de rellenar los campos del formulario con el nombre vue_consumer, para el Consumer, el usuario será vue_user y el rol será vue_role. Asegúrate de aprenderte o dejar apuntado el New Secret, porque será la clave que necesitarás en caso de conectarme con el Consumer, en algunos Headless, como por ejemplo, con Gatsby.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Fantástico, una vez rellenado el formulario, haz clic en guardar para concluir la configuración de nuestra API Drupal Contenta CMS.
A continuación, vamos a configurar la otra parte de este proyecto, o sea, nuestra aplicación de Nuxt.js.

Drupal 9 Headless con Vue.js | Requerimientos

     Para poder realizar este curso, será necesario cumplir previamente con varios de los requerimientos de instalación del proyecto; estos son:

  1. Tener instalado y funcionando un proyecto Drupal. HAZ CLIC AQUI
     
  2. Tener conocimientos básicos de Nuxtjs, para realizar el curso HAZ CLIC AQUI
     
  3. Descargar, activar y configurar el módulo de autenticación Simple Oauth. HAZ CLIC AQUI

     Una vez hayas completado estos requermientos, podrás continuar con el resto del curso siguiendo los pasos de los siguientes capítulos.

Drupal 9 Headless con Vue.js | Presentación

Video de Youtube
URL de Video remoto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Al final de este curso, tendrás los conocimientos básicos para instalar un proyecto desacoplado (Headless), utilizando Nuxt.js para el frontend o presentación de tus datos, extraídos desde Drupal 9, que se encargará del backend.

Symfony 2 CRUD | Entidades

Texto

     En este capítulo comenzaremos a preparar nuestra aplicación, para que podamos interactuar con la base de datos através de lo que se conoce en Symfony, como Entidades y Modelo de datos.

     Gracias a que hemos optado por utilizar Lando, ver o modificar los detalles de conexión con nuestra base de datos es bastante sencillo, podemos verlo en el archivo de configuración de lando, .lando.yml, donde encontraremos rápidamente la siguiente configuración:

services:
  phpmyadmin:
    type: phpmyadmin
    hosts:
      - symfony2.symfony2app.internal
  symfony2:
    type: mariadb
    portforward: true
    creds:
      user: symfony2
      password: symfony2
      database: symfony2

     Como puedes ver, además del acceso a la herramienta PhpMyAdmin, con la cual podrás manipular tus tablas y base de datos, mediante interfaz gráfica; tienes también el nombre tipo de motor de base de datos mariadb y los detalles para el usuario, clave y base de datos.

     Pero si lo prefieres, también podrás ver toda la información relacionada con la base de datos, ejecutando el comando siguiente:

lando info

     El resultado será parecido a la siguiente imagen:

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para que podamos conectar nuestra aplicación de Symfony, con esta base de datos, tendremos que modificar el archivo parameters.yml, que se encuentra en la ubicación app/config/parameters.yml

     En realidad, este archivo se puede configurar automáticamente, cuando comenzamos con la instalación de nuestra aplicación de Symfony, pero hemos preferido dejarlo para este momento, ya que tendría más sentido mecionarlo, ahora que trabajaremos con las entidades y los datos.

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     En el caso de que no tuviéramos creada la base de datos para nuestra aplicación, sólo necesitaríamos ejecutar el siguiente comando para que Symfony se encargara de hacerlo por nosotros (Recuerda que trabajamos con Lando, por eso hemos añadido la palabra al principio del comando):

lando php app/console doctrine:database:create

     Pero como nosotros ya teníamos la base de datos creada desde el principio, lo que tendremos que hacer es decirle a Symfony que la borre y luego vuelva a configurarla, y así podremos interactuar con ella.

lando php app/console doctrine:database:drop --force

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Así, podremos volver a crear nuestra base de datos con el siguiente comando:

lando php app/console doctrine:database:create

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Ahora, para trabajar con nuestro modelo de datos (blog de noticias), tendremos que crear algo llamado Entidad. Esta es básicamente una clase de PHP que define toda la información sobre nuestras páginas de noticias. Symfony tiene una ingeniosa herramienta de línea de comandos para esto que usaremos y otra buena para crear las tablas de base de datos reales que coincidan con este modelo de datos.

     Para generar nuestra entidad, a la que llamaremos noticia, vamos a ejecutar el siguiente comando de Symfony 2, con la ayuda de Lando:

lando php app/console doctrine:generate:entity

     Al igual que nos pasó cuando generamos el Bundle, Symfony nos presentará en pantalla una serie de preguntas relacionadas con nuestra entidad, que debermos ir completando hasta terminar el proceso; sin en algún punto de la generación de la entidad nos equivocamos, podremos hacer clic en la combinación de las teclas Ctrl + C y podremos comenzar nuevamente desde cero.

     En nuestro ejemplo, la entidad tendrás los siguientes campos y se guardará dentro de nuestro Bundle, por eso, en la primera pregunda, para el shortcut o atajo, escribiremos el nombre del bundle seguido de dos puntos y luego el nombre para nuestra entidad. Ej.: NewsBundle:News, el resto de la información será la siguiente:

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Una vez terminado el proceso, podremos echarle un vistazo a nuestra entidad, ubicada dentro de nuestro bundle, en la carpeta Entity, con el nombre News.php, su aspecto será como la siguiente imagen:

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     En este momento, ya estamos listos para que Symfony se encargue de generar la tabla equivalente, con los datos de nuestra entidad, para ello, ejecutaremos el siguiente código en la consola:

lando php app/console doctrine:schema:update --force

     Como sólo tendremos una entidad, el proceso Symfony tardará muy poco en crear nuestra tabla y mostrarnos en pantalla el mensaje de confirmación, indicándonos el resultado:

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Gracias a Lando, podremos verificar los datos de nuestra tabla, accediendo a PhpMyAdmin, para ello, si no recuerdas la url, sólo tendremos que escribir el comando de información de lando:

lando info

     Y buscar la url que nos permitirá acceder a la interfaz gráfica de PhpMyAdmin:

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Dentro de PhpMyAdmin, podrás comprobar, que han sido generados correctamente, la tabla News y sus respectivos campos, coincidiendo con el modelo que hemos planteado en nuestra Entidad.

CRUD Symfony 2  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Bundle - Creación y personalización

Texto

     Los datos con los que trabajaremos son páginas de un Blog de noticias. Crearemos una entidad (que sirve como nuestro modelo de datos para las páginas del blog) y aprenderemos a leerla y mostrarla. Durante todo el curso, aprenderemos cómo realizar las otras operaciones, es decir, agregar, actualizar y eliminar las páginas de noticias. Pero primero, necesitaremos crear un Bundle o paquete.

     En symfony un Bandle es el equivalente a los conocidos como Plugins en otras aplicaciones. La diferencia principal con respecto a estos, es que dentro de un Bundle de Symfony podremos encontrar, tanto la funcionalidad del propio Framework central, como el código escrito para nuestra aplicación personalizada. Esto le brinda la flexibilidad de usar funciones preconstruidas empaquetadas en paquetes de terceros o para distribuir sus propios paquetes. Hace que sea fácil seleccionar y elegir qué funciones habilitar en su aplicación y optimizarlas de la manera que desee.

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

      Un Bundle o paquete en Symfony, es un directorio donde guardas todos los archivos necesarios, para una funcionalidad específica en tu aplicación. En esta pequeña aplicación donde configuraremos para nuestro Modelo de datos, las operaciones básicas que implican un CRUD (Create, Read, Update, Delete ), necesitaremos crear un Bundle, antes de poder generar las entidades que nos ayudarán con los datos.

     Para generar un Bundle, nos colocaremos en la carpeta raiz de nuestra aplicación y ejecutaremos el siguiente código en consola, y dejaremos que Symfony 2 haga el trabajo por nosotros, como estamos trabajando con Lando, añadiremos lando, como parte del comando:

lando php app/console generate:bundle

     Entonces veremos en consola, el mensaje de bienvenida de symfony al sistema para generar nuestro Bundle:

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     En este ejemplo, he decidido añadir los siguientes datos, pero puedes cambiarlos por los tuyos, en cuanto aprendas a trabajar con la generación de un Bundle:

Bundle name: NewsBundle

Target Directory [src/]: yes

Configuration format (annotation, yml, xml, php) [annotation]: yes

     Al finalizar, veremos un mensaje de confirmación, y a la vez uno de error, ya que en esta versión de Symfony 2, tendremos que añadir manualemente una línea, dentro de nuestro archivo composer.json y a continuación ejecutar nuevamente el comando de composer update, en este caso utilizando LANDO:

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Una vez añadida la línea con el nombre de nuestro NewsBundle, que es el que usamos para el ejercicio, ejecutaremos en pantalla el comando que permitirá a Composer actualizar en Syfmony nuestro Bundle.

lando composer update

     Al terminar la actualización de Composer, deberíamos ver un mensaje de confirmación, parecido al siguiente:

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Comprobación de que el NewsBundle funciona

     En este caso, el NewsBundle, que acabamos de generar, nos permitierá acceder a una página con el mensaje por defecto que viene en el Twig, generada por Symfony 2. 

     Para comprobarlo, primero abriremos el archivo DefaaultController.php, donde podremos comprobar la URL para nuestra página, en el apartado de las anotaciones, (Los comentarios que se muestran justo encima de la función).

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Podemos coprobar que nuestro nuevo NewsBundle funciona correctamente, accediendo a la url de desarrollo:

http://symfony2-app.lndo.site/app_dev.php

 

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Dónde se encuentra esta plantilla que vemos en pantalla?

     Para encontrar desde dónde se está imprimiendo este mensaje en pantalla, tendremos que abrir el archivo index.html.twig, que es la plantilla twig, llamada desde el controlador.

CRUD Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

Symfony 2 | Instalación con Lando

Video de Youtube
URL de Video remoto
Texto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     A pesar de que en la actualidad, todas las aplicaciones y lenguajes de programación, siguen evolucionado para mejorar sus características y funcionalidades, relacionadas sobretodo, con la seguridad o escalabilidad; facilitándonos cada vez más, las tareas de desarrollo e implementación, en cualquier proyecto o aplicación.

     En la vida real, nos encontramos con una gran cantidad de empresas, que se resisten a dicha evolución y pretenden continuar con versiones obsoletas e inseguras, en lugar de invertir tiempo y dinero en su actualización.

     Muchos de los casos con los que me he encontrado, a lo largo de estos últimos meses, tienen relación con proyectos desarrollados, utilizando el framework PHP, Symfony, que actualmente ha lanzado la versión 6, pero en lugar de utilizar ésta, la mayoría funciona todavía con la versión Symonfy 2.

     Por esta razón, he decidido compartir una guía rápida, para que puedas configurar un entorno local, utilizando Lando, en lugar de hacerlo con Docker puro, que suele ser un poco más complejo, para tus proyectos de Symfony 2.

   Instalación de Symfony 2 utilizando Lando

    Incompatibilidades:

          Lo primero que debes tener en cuenta, son las posibles incompatibilidades con las que te encontrarás, ya que Symfony 2 funciona correctamente, sólo con las versiones PHP 5.3 hasta la 7.2, a partir de entonces experimentarás diversos fallos. 

          Symfony 2, tampoco funciona con las versiones actuales de Composer, por lo que en caso de que estés tratando de instalar un proyecto de Symfony 2, deberás utilizar versiones anteriores a la 2.0

   Paso 1 - Instalar el lando

Si todavía no lo haz instalado, puedes ver el video y leer las instrucciones HAZ CLIC AQUÍ

git clone https://github.com/drupaladicto/symfony2-lando.git

   Paso 2 - Descargar las actualizaciones de Symfony

     Para ello, nos moveremos dentro de la carpeta del proyecto y ejecutaremos el comando para que comience a funcionar Lando:

lando start

     A continuación, ejectuaremos el comando de Composer, para comenzar con la descargas de las dependencias de Symfony 2

lando composer update

   Paso 3 - Acceder a la página de bienvenida de Symfony

     Para acceder a la página de bienenida de Symfony2, añadiremos a la url /app_dev.php:

http://symfony2-app.lndo.site/app_dev.php

 

Curso Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

Detalles de la instalación:

     El proyecto incluye un archivo de configuración para lando que activará, La versión 1.10.1 de Composer y PHP 7.2, para evitar errores de compatibilidad en esta versión Obsoleta de Symfony, además de PhpMyAdmin con una base de datos completamente configurable:

name: symfony2-app
recipe: symfony
config:
  php: 7.2
  webroot: web
  composer_version: '1.10.1'

services:
  phpmyadmin:
    type: phpmyadmin
    hosts:
      - symfony2.symfony2app.internal
  symfony2:
    type: mariadb
    portforward: true
    creds:
      user: symfony2
      password: symfony2
      database: symfony2

Guardaremos los cambios y continuaremos con el siguiente paso.

   Descarga de las dependencias

        Una vez descargados los archivo del repositorio, necesitarás ejecutar el comando de composer para que terminen de descargarse todas las dependencias de Symfony definida en el archivo composer.json. Para ello el comando que deberás utilizar es el siguiente:

lando composer update

 

Curso Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Desactivación de las comprobaciones en el navegador

     Cuando realizamso una instalación de Symfony 2, tendremos que realizar un pequeña modificación en dos archivos (app_dev.php y config.php), se trata de un trozo de código que se encarga de comprobar los accesos de las ips en entornos locales, pero que podremos modificar ya que estaremos trabajando en nuestro ordenador.

     Antes de realizar ningún cambio más, vamos a comprobarlo. Arrancaremos el proyecto, ejecutando el comando de lando:

lando rebuild

   Posibles Fallos

        Según la documentaicón oficial de esta versión, podremos comprobar si nos falta algo en la configuración inicial del proyecto, accediendo a la url http://nuestrositio/config.php, pero debido a la comprobación del navegador dentro de este mismo arhivo, es posible que veamos un error en pantalla como el siguiente:

Curso Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Ahora que estamos seguros de que no funciona, vamos a ejecutar los cambios necesarios para continuar.

   Config.php

     El primer archivo que deberíamos corregir y ejecutar, tan pronto arranque nuestro proyecto es config.php y nos confirmará si todo ha ido bien en la instalación del proyecto.

     Está ubicado en '/web/config.php' y las líneas que tenemos que comentar, para no tener que borrarlas, están al principio del archivo, son las siguientes:

<?php

if (!isset($_SERVER['HTTP_HOST'])) {
    exit('This script cannot be run from the CLI. Run it from a browser.');
}

if (!in_array(@$_SERVER['REMOTE_ADDR'], array(
    '127.0.0.1',
    '::1',
))) {
    header('HTTP/1.0 403 Forbidden');
    exit('This script is only accessible from localhost.');
}

Curso Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Una vez realizado el cambio, si ejecutamos el comando lando rebuild y accedemos a la url http://proyecto.lndo.site/config.php, deberíamos ver que todo funciona correctamente:

Curso Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

   app_dev.php

     El próximo arhivo está ubicado, al igual que el anterior, dentro de la carpeta '/web/app_dev.php', es el que nos muestra la pantalla de bienvenida de Symfony 2, al acceder a la url http://proyecto.lndo.site/app_dev.php. En este caso, las líneas que tendremos que comentar son las siguientes:

// This check prevents access to debug front controllers that are deployed by accident to production servers.
// Feel free to remove this, extend it, or make something more sophisticated.
if (isset($_SERVER['HTTP_CLIENT_IP'])
    || isset($_SERVER['HTTP_X_FORWARDED_FOR'])
    || !in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1','fe80::1', '::1'))
) {
    header('HTTP/1.0 403 Forbidden');
    exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');
}

 

Curso Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     En este caso, la pantalla que deberíamos ver una vez realizados los cambios y ejecutado el comando lando rebuild, sería la siguiente:

Curso Symfony 2 | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Trabajando con un proyecto Symfony 2 existente

     En el caso de que necesites trabajar en tu entorno local, con un proyecto desarrollado en Symfony 2, sólo sería necesario que tuvieras instalado lando en tu ordenador y una vez añadido el archivo de configuración .lando.yml, arrancar el servidor y ajustar los detalles de urls.

     Si quieres saber más sobre Symfony 2, visita su Documentación Oficial de Symfony 2

     Solución de problemasHAZ CLIC AQUÍ