Skip to content

Primer Proyecto usando la suite de Roots

José Debuchy

José Debuchy

  • 7 min to read
Post thumbnail

Vamos a empezar esta serie explicando cómo instalar un sitio WordPress utilizando la suite de productos que ofrece Roots.

Para la serie, vamos a imaginar que estamos desarrollando la web de una Agencia imaginaria llamada “El Faro”.

El objetivo es tener un pantallazo general de los 3 principales productos, Trellis, Bedrock y Sage, y que funciones cumplen en el proceso.

Requisitos

  • Un mínimo conocimiento de WordPress
  • Idealmente, sistema operativo MacOS, aunque es posible adaptar los requerimientos en Windows siguiendo esta guía.

Introducción

Roots toma buenas prácticas de otros software y las lleva a WordPress. El proyecto comenzó en 2011 y es uno de los más populares en la comunidad.

Trellis

Estas son las principales características de Trellis:

– Paridad de entornos

Trellis permite crear idénticos entornos de desarrollo, staging y producción. Esto es muy útil porque nos permite asegurarnos que lo que vamos a ver localmente o en staging, va a coincidir con lo que se ve en producción. Misma versión de php, nginx, etc.

⚠️

A pesar de ser extremadamente útil la paridad de entorno local con producción, en donde Vagrant simula un servidor a través de una máquina virtual, esto viene de la mano con una utilización excesiva de espacio y de recursos en nuestro equipo. Es por eso que, para nuestros proyectos, utilizamos como alternativa Valet, que es súper sencillo y rápido de configurar y hacemos las pruebas de paridad staging <> producción.

– Generación automática de servidores

A través de Ansible, permite la configuración automática de servidores. En otra oportunidad, hablaremos en mayor detalle sobre esto.

– Deployment con un solo comando

Trellis trabaja con deployments atómicos, y mediante un simple comando, podemos deployar nuestros cambios con tiempo de caída cero.

– Trellis CLI

Tanto para la generación de servidores, deployment, generación de archivos .env (lo veremos más adelante) y otros features más, Trellis se basa en una command-line interface (CLI).

Bedrock

Estas son las principales características de Bedrock:

– Gestión de dependencias mediante Composer

Gracias a composer, toda la instalación de WordPress, junto con sus plugins se encuentra en un archivo composer.json lo que permite tener un repositorio liviano y fácil de compartir con otros desarrolladores que colaboren en los proyectos.

– Mejor estructura de proyecto

Organiza los archivos de un proyecto WordPress de forma similar a otras aplicaciones más modernas. A su vez, aisla los archivos sensibles de la raíz brindando mucho más seguridad.

– Archivos de configuración en Dotenv

Bedrock mueve todos los archivos fuera de wp-config.php gracias a las variables de entorno.

Sage

Estas son las principales características de Sage:

– Utilización de archivos Blade

Para seguir principio DRY (Don’t repeat yourself) Sage utiliza en sus templates archivos blade.php. Esto permite mantener ordenados los archivos y sus templates.

– Workflow moderno

Sage permite por default comenzar a trabajar con Sass, es6, gracias a su setup basado en Webpack.

Creación del Proyecto

Vamos a la práctica.

Creamos una carpeta con el nombre del proyecto y vamos allí. Lo ideal es que el nombre coincida con el dominio que vamos a querer asociar. En este caso elfaro.test

mkdir elfaro
cd elfaro

1. Instalación Trellis

Clonamos trellis y borramos la referencia a git

# .
git clone git@github.com:roots/trellis.git && rm -rf trellis/.git

2. Instalación Bedrock

Instalamos Bedrock mediante composer. También podríamos hacer algo similar al paso anterior con Trellis, si prefiriésemos, pero al instalarlo mediante composer, se corre el comando composer install automáticamente.

# .
composer create-project roots/bedrock site

De esta manera, sobre la raíz de nuestro proyecto, tendremos 2 carpetas: trellis y site

💡

Sugerimos crear el Workspace en el IDE que uno esté utilizando. En mi caso VSCode.

3. Generación de .env

Vamos a generar las variables de configuración de WordPress. Trellis nos permite generar un archivo .env basándonos en archivos .yml

Vamos a la carpeta /trellis/group_vars/development/wordpress_sites.yml y reemplazamos el nombre del dominio por el que deseemos. Hay muchas opciones ocultas que pueden ser modificadas y que se pueden ver en https://roots.io/docs/trellis/master/wordpress-sites/#normal-settings

wordpress_sites:
  elfaro.com:
    site_hosts:
      - canonical: elfaro.test
        redirects:
          - www.elfaro.test
    local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
    admin_email: admin@example.test
    multisite:
      enabled: false
    ssl:
      enabled: false
      provider: self-signed
    cache:
      enabled: false

Una vez que modificamos este archivo tenemos que modificar el archivo vault.yml en la misma carpeta, reemplazando el nombre del dominio por el que escribimos en el archivo anterior.

# Documentation: <https://roots.io/trellis/docs/vault/>
vault_mysql_root_password: devpw

# Variables to accompany `group_vars/development/wordpress_sites.yml`
# Note: the site name (`example.com`) must match up with the site name in the above file.
vault_wordpress_sites:
  elfaro.com:
    admin_password: admin
    env:
      db_password: example_dbpassword
📌

El resto de las variables también se pueden ajustar de la manera que uno desee.

Una vez que definimos estos valores estamos en condiciones de generar mediante la cli de trellis, el archivo .env, que se ubicará en la carpeta site

cd trellis
trellis dotenv
cd ..

Así debería verse el archivo .env

DB_HOST='localhost'
DB_NAME='elfaro_com_development'
DB_PASSWORD='example_dbpassword'
DB_USER='elfaro_com'
DB_USER_HOST='localhost'
DISABLE_WP_CRON='True'
DOMAIN_CURRENT_SITE='elfaro.test'
WP_DEBUG_LOG='/srv/www/elfaro.com/logs/debug.log'
WP_ENV='development'
WP_HOME='http://elfaro.test'
WP_SITEURL='http://elfaro.test/wp'

4. Creación de Base de Datos

Esto puede hacerse a través de un gestor de bases de datos MySQL o a través de la línea de comandos. Vamos a hacerlo con esto último.

mysql -u root
CREATE DATABASE elfaro_com_development;
CREATE USER 'elfaro_com'@'localhost' IDENTIFIED BY 'example_dbpassword';
GRANT ALL PRIVILEGES ON elfaro_com_development.* TO 'elfaro_com'@'localhost';

De esta manera, creamos la base de datos localmente, un usuario y le damos los permisos necesarios para que pueda conectarse e interactuar con ella.

5. Link Valet

Para que valet interprete correctamente los proyectos de Roots con trellis tenemos que instalar un driver de valet. https://github.com/danielroe/trellis-valet-driver

cd ~/.config/valet/Drivers/
nano TrellisValetDriver.php
cd -

Y copiamos el contenido de este archivo allí. https://github.com/danielroe/trellis-valet-driver/blob/master/TrellisValetDriver.php

Vamos a decirle a valet, que cuando escribimos elfaro.test en nuestro browser, queremos que mire a la raíz de la carpeta de nuestro proyecto.

# .
valet link

6. Instalación WordPress

Vamos al dominio, en nuestro caso http://elfaro.test/, y veremos el panel de instalación de WordPress. Pueden instalarlo de esa manera o, también, mediante la cli de WordPress con este comando.

Vamos a la carpeta site

# site
wp core install --url=elfaro.test --title=Example --admin_user=admin --admin_password=admin --admin_email=admin@admin.com
⚠️

A efectos de prueba, utilizamos admin como user y password. Sugerimos modificarlo a su preferencia.

Una vez que instalamos WordPress deberíamos poder ver el sitio 🎉

7. Instalación y activación del Theme

Instalamos Sage en la carpeta site/web/app/themes mediante git. Desde la raíz del proyecto. Podamos nombrar a la carpeta del themo como quisiéramos.

# .
git clone git@github.com:roots/sage.git site/web/app/themes/sage && rm -rf site/web/app/themes/sage/.git

Una vez instalado Sage tenemos que instalar los paquetes de composer y activar los paquetes de npm.

Dentro del theme (en este caso site/web/app/themes/sage)

cd site/web/app/themes/sage
composer install
yarn && yarn build

Vamos a activar el theme. Podemos hacerlo a través del admin de WordPress o, nuevamente, a través de la cli, desde la carpeta site

wp theme activate sage

Con esto, ya estamos en condiciones de empezar a trabajar con el theme de Sage 🙂

8. Commit inicial en Git

Hacemos el commit inicial en git y podemos hacer el push en nuestro servicio de preferencia.

# .
git init
git add .
git commit -m "Initial commit"
José Debuchy

José Debuchy

Industrial Engineer & Full Stack Developer. WordPress coder since 2010. Passionate about learning and sharing knowledge. While not coding, I love to play football and enjoy watching Lionel Messi.

Comments:

Leave a comment: