En esta segunda parte veremos cómo instalar y configurar Frontity utilizando el tema que nos provee el framework por defecto. Terminaremos esta parte mostrando los libros que hemos creado anteriormente como ejemplo en nuestro backend de WordPress.
Instalando Frontity
Instalar el framework es una tarea muy sencilla: en nuestro terminal favorito escribimos lo siguiente:
npx frontity create donalibros
Automáticamente comenzará la instalación de todos los archivos necesarios, y se ejecutará la instalación de nuestro primer proyecto, con una estructura de carpetas que puedes consultar en la documentación. Éste proceso puede tardar algunos minutos, así que no desesperes.
Una vez finalizada la instalación podemos lanzar nuestro servidor local y arrancar el proyecto de prueba escribiendo en nuestro terminal accedemos a la carpeta de nuestro proyecto, en este caso «donalibros» y escribimos lo siguiente en la consola:
npx frontity dev
Esto arranca un servidor en modo desarrollo que nos permite editar «en caliente» nuestro proyecto, por lo tanto cualquier cambio que hagamos en los archivos de nuestro proyecto se verán reflejados en el navegador automáticamente.
Aunque pueden crearse temas desde cero para Frontity, para este ejemplo vamos a utilizar el theme por defecto que se usa en el proyecto de Frontity, el denominado como Mars Theme. Una vez se ha cargado aparecerá en nuestro navegador en locahost:3000 nuestro proyecto. Si comienzas a navegar por el sitio puedes comprobar la velocidad con la que cargan todas las páginas.
Pero….¿y todo éste contenido que se está mostrando? ¿De dónde sale?
Ahora mismo nuestro proyecto está «conectado» a un servidor de pruebas con una instalación de WordPress de la gente de Frontity. Éstos son los datos que se están mostrando. Para comenzar a mostrar los datos de nuestra instalación de WordPress tenemos que comenzar a configurar nuestro proyecto de Frontity.
Configurando nuestro proyecto
Para configurar nuestro proyecto de Frontity nos tenemos que dirigir al archivo frontity.settings.js. Y en él podremos realizar las siguientes modificaciones:
- cambiar las url de nuestro proyecto, así como el título y la descripción.
- cambiar la url de la API de WordPress por la de nuestro proyecto. Siempre será la url de la instalación de WordPress +
/wp-json/ - actualizar el menú de nuestra aplicación sustituyendo el menú que viene por defecto.
- registrar nuestros custom post types y nuestras taxonomías personalizadas para que Frontity las pueda almacenar en su «estado».
Registrando nuestro Custom Post Type «Libro»
Como ves, ahora en nuestro proyecto estamos recibiendo todos los datos de nuestra instalación de WordPress. Pero falta uno de los más importantes. Los libros que hemos creado.
Para que los libros sean visibles para Frontity, lo que debemos hacer es registrarlos. Para ello, en nuestro archivo de configuración, para nuestro state.source tenemos que añadir el siguiente código:
"postTypes": [
{
type: "libro",
endpoint: "libro",
archive: "/libros"
}
],
Los valores de type, endpoint y archive los podemos saber fácilmente:
- Type: el nombre con el cual hemos registrado nuestro custom post type en WordPress. En éste caso «libro».
- Endpoint: el final de la ruta de donde tiene que capturar Frontity los datos que necesita sobre los libros. En la versión actual de la API de WordPress, los endpoint se consumen a través de la siguiente ruta:
url-del-proyecto/wp-json/wp/v2/libro - Archive: si recordáis, cuando creamos el custom post type libro, le indicamos al plugin que queríamos que tuviera una página de archivo donde se mostraran todos los libros existentes, e incluso le indicamos qué url iba a tener. Era
/libros.
Al igual que hemos hecho con nuestro objeto libro, Frontity también necesita que le informemos que existe una taxonomía personalizada, así como los datos que tiene que usar para recuperar sus valores del servidor.
Para ello, en nuestro state.source de frontity.settings.js añadimos el siguiente código:
"taxonomies": [
{
taxonomy: "genero",
endpoint: "genero",
postTypeEndpoint: "libro",
params: {
per_page: 5,
_embed: true
}
}
]
Al igual que ocurría con el custom post type libro, los argumentos que recibe los podemos saber fácilmente:
- Taxonomy: el nombre con el cual hemos registrado la taxonomía a la hora de crearla en WordPress.
- Endpoint: el final de la ruta donde se encuentran los datos relacionados con nuestra taxonomía.
- Post Type Endpoint: a qué tipo de post pertenece la taxonomía. En nuestro caso sólo está relacionada con libro.
- Params: Esto es un array donde podemos aportar información sobre la paginación de elementos, etc. Muy útil si tenemos muchos objetos de tipo libro creados.
¡Genial! Ya se muestran en nuestra aplicación los libros que hemos creado y podemos utilizar nuestras taxonomías. Pero aún no se muestran los custom fields que hemos creado para nuestro libros: ISBN y editorial.
No te preocupes, en el siguiente vídeo veremos cómo hacerlo.
Aquí te dejo el código del archivo frontity.settings.js para que lo tengas de referencia:
const settings = {
"name": "app-frontity",
"state": {
"frontity": {
"url": "http://libreria.dev",
"title": "Test Frontity Blog",
"description": "WordPress installation for Frontity development"
}
},
"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Home",
"/"
],
[
"Libros",
"/libros"
],
[
"Terror",
"/genero/terror/"
],
[
"Fantasía",
"/genero/fantasia/"
],
[
"A Page",
"/privacy-policy"
],
],
"featured": {
"showOnList": false,
"showOnPost": false
}
}
}
},
{
"name": "@frontity/wp-source",
"state": {
"source": {
"api": "http://libreria.dev/wp-json",
"postTypes": [
{
type: "libro",
endpoint: "libro",
archive: "/libros"
}
],
"taxonomies": [
{
taxonomy: "genero",
endpoint: "genero",
postTypeEndpoint: "libro",
params: {
per_page: 5,
_embed: true
}
}
]
}
}
},
"@frontity/tiny-router",
"@frontity/html2react"
]
};
export default settings;