Crear un sitio web con Nuxt.js y WordPress REST API

Actualizar:
Ahora puede usar mi repetitivo del repositorio público:
https://github.com/bovas85/nuxt-headless
(por favor, star si lo aprecia, siéntase libre de contribuir).

Muchas veces nos encontramos en la posición en la que nuestros clientes quieren un Sistema de gestión de contenido (CMS en adelante) que les permita editar sus páginas sin tener que conocer el código HTML para hacerlo.

Por lo general, es una opción entre un CMS a medida y WordPress (recientemente, aunque estamos viendo más y más CMS "sin cabeza", así como la alternativa muy válida de descuento o opciones de CMS estático).

En nuestro caso, optamos por WordPress por algunas razones:
- Es un CMS sólido con años y años de experiencia en el campo.
- Los problemas de seguridad ya casi han desaparecido, teniendo en cuenta las actualizaciones de seguridad automáticas desde la versión 4.7 en adelante (podría estar equivocado en la versión, no me cite al respecto).
- La API REST de WordPress nos da acceso a varios campos (y personalizados) sin la necesidad de servir todo el front-end con WordPress.

Nuestro desarrollador de backend también estaba más familiarizado con PHP, Laravel y WordPress que otras tecnologías, por lo que al final optamos por WordPress.

Con respecto al Frontend, estaba a cargo de elegir la pila y como amo tanto a Vue.js (Vue 2), definitivamente empujé eso hacia adelante, usando Nuxt.js para Renderizado del lado del servidor (SSR de ahora en adelante).

Parte 1, ¿Qué es Nuxt.js?

Nuxt.js PROs:
1) enrutamiento generado automáticamente con middlewares, validadores y más
2) soporte SSR completo listo para usar con soporte vuex
3) sistema de páginas con ganchos de datos asíncronos, transiciones, indicador de carga, etc.
4) sistema de diseños fuera de la caja
5) manejo de metadatos fuera de la caja con soporte SSR
6) todos los elegantes módulos nuxt que proporcionan cosas como PWA, autenticación, soporte fuera de línea y más
7) convenio sobre el enfoque de configuración que prefiero
8) Una comunidad de desarrolladores de Vue que trabajan con el mismo enfoque obstinado.
El punto 8 es particularmente grande porque la comunidad de Vue está extremadamente dividida, debido a que Vue es un marco progresivo.
Las personas usan Vue de tantas maneras diferentes que tener una gran parte de la comunidad de Vue que realmente usa Vue de la misma manera es genial.
Eso excluye SSR ...

- @ gustojs # 2934 del canal VueLand Discord

Como puede ver, estas características son una gran ventaja para una agencia pequeña que no puede pasar demasiado tiempo diseñando una arquitectura empresarial para su stack.
WordPress recientemente incluyó la API REST dentro del paquete principal (4.6.0) y decidí probarlo para nuestro primer sitio web.

Fue una migración desde una interfaz de AngularJS ...

Parte 2, Configuración inicial

El primer punto requerido era que los sitios web fueran tan amigables con el SEO como sea posible, provenientes de Angular 1 / 1.5, donde la única solución fácil era prerender.io (que no se implementó).

Había probado Nuxt anteriormente para un proyecto paralelo, pero las cosas nunca hacen clic a menos que estés trabajando duro en él.

Estaba familiarizado con VueJS, pero la configuración inicial de Nuxt me dejó un poco dudoso de las capacidades. Parecía demasiado simple para ser verdad, y sin ninguna configuración de la CLI inicial.

Puede comenzar instalando vue cli si aún no lo ha hecho:

npm install -g vue-cli

(cuidado con vue-cli 3 que pronto saldrá ya que eso podría cambiar el siguiente comando)

Luego, usando vue-cli, puede iniciar un nuevo proyecto de Nuxt escribiendo:

vue init nuxt-community / starter-template 

Donde es su carpeta y el nombre del proyecto.
Andamiará un directorio que contiene varios otros y un archivo nuxt.config.js:

archivo inicial nuxt.config.js para mi charla vue-meetup

Lo primero que hay que entender sobre Nuxt es que es un marco sin complicaciones en torno a VueJS y SSR.

Solo usa módulos y bibliotecas ya disponibles en VueJS, pero los organiza en una estructura de carpetas realmente ordenada y obstinada.

estructura de carpetas para un proyecto nuxt

Parte 3, profundizando

El problema principal inicialmente fue cómo integrar sass y usar variables sass en mi proyecto.
Tuve que hacer esta brujería aquí para tener variables disponibles en cada Componente de archivo único (SFC) o página

Esto se volvió mucho más fácil gracias a un Módulo Nuxt que se puede agregar simplemente a nuxt.config en una matriz con una lista de variables sass para cargar globalmente.

El siguiente paso fue descubrir cómo administrar el estado.

Por alguna razón, pensé que una mezcla global era una buena idea

La realidad es que cuando tiene un par de componentes, tal vez una barra de navegación o algunos modales, ya es hora de cargar Vuex.

Hacer eso en Nuxt es tan fácil como:

index.js dentro / carpeta de la tienda con algunos ejemplos de mutaciones y nuxtServerInit

Nuxt también ofrece una forma de cargar cada estado significativo de antemano mediante el uso de la acción NuxtServerInit en la tienda.
Esto le permite buscar previamente todo lo que necesita sin la necesidad de usar montado para cargarlo (y perder en SSR de esa manera).

Hay otros métodos que se pueden usar fuera de la tienda, que son asyncData (que carga datos en el componente) y recuperan (que cometen mutaciones o envían acciones).

Se pueden usar si necesita algo solo localmente dentro de un componente o página.

asyncData devuelve una nueva propiedad de datos en la página local .vuepodemos enviar nuevos datos desde una API a la tienda con fetch

Una cosa a tener en cuenta aquí es que estamos tratando con dos instancias.
Uno en el servidor, virtual y no visible, y uno en el lado del cliente.

Esto significa que hay algunos problemas al desarrollar con Nuxt y cualquier aplicación del lado del servidor, pero Nuxt hace que estos problemas sean muy limitados y fáciles de superar.

Nuxt se ha incluido en un componente , que puede envolver cualquier otra cosa, incluidos otros componentes, siempre que tenga un único elemento raíz dentro.

no-ssr ejecuta el código adjunto solo del lado del cliente (sin SSR)

Este complemento permite que lo que está dentro viva solo en el lado del cliente, y es particularmente útil cuando se trata de complementos de terceros que pueden contener referencias a elementos de ventana o DOM y no son necesarios en el lado del servidor.

Si no hace esto u otra cosa que mostraré ahora, es posible que encuentre una estructura de árbol diferente, que Nuxt le notificará:

El otro problema es cómo se cargan las bibliotecas y los componentes en Nuxt.
Los cargamos creando complementos en la carpeta de complementos y adjuntándolos con Vue.use, Vue.component o Vue.directive.

El segundo paso aquí es agregar ese complemento a nuxt.config, y aquí podemos especificar si es un complemento listo para ssr (simplemente escribiendo la ruta al complemento), o no, especificando ssr: false allí.

Parte 4: lidiar con las llamadas de WordPress CMS y API

Una vez que el proyecto principal está configurado y comienza a trabajar con cada página, el mejor y más rápido enfoque en mi opinión es agregar un complemento llamado:
Campos personalizados avanzados (ACF)
al backend de WordPress.

Esto agrega funcionalidad de campo personalizado a las páginas y publicaciones en WordPress.
Para extender esto a la API REST, también necesitará un complemento llamado
API de ACF a REST

Algunos complementos útiles:
Campos de filtro WP REST API
filter fields Le permite filtrar los campos devueltos por la API.

WP REST API Taxonomías puras
Este complemento incluye todos los atributos de taxonomía disponibles en la API REST de WordPress (v2) sin solicitudes de API adicionales.

WP REST API Cache
Habilite el almacenamiento en caché para la API REST de WordPress y aumente la velocidad de su aplicación. (No recomiendo usar este complemento)
Advertencia aquí:
Si realiza solicitudes posteriores (ejemplo, complemento contact-form-7), asegúrese de no utilizar este complemento o, si lo hace, filtre la cadena "contact-formularios" en functions.php como se muestra a continuación:

add_filter ('rest_cache_skip', función ($ skip, $ request_uri) {
  if (! $ skip && false! == stripos ($ request_uri, 'contact-form-7')) {
    volver verdadero;
  }
  return $ skip;
}, 10, 2);

WP REST API Menus
Extiende la API de WP con rutas de menú de WordPress.

El siguiente paso fue configurar los puntos finales de la API.
Personalmente utilicé un archivo config.js que puedo importar así:

importar configuración de "~ / assets / config";

Esto me permitirá tener una ubicación de punto final clara y configurada para todas mis páginas.

Lo anterior está parcialmente tomado de un operador de viajes de lujo, Antilophia.
El sitio aún no está activo, pero lo actualizaré una vez que lo esté. Manténganse al tanto ;)

Una vez que tenga la configuración anterior, puede configurar la aplicación para recuperar datos en nuxtServerInit o con fetch / asyncData.

Con eso, puede completar cada sección del sitio web utilizando los campos personalizados avanzados más el resto de los campos de API de WordPress disponibles (cualquier cosa realmente).

El servidor actualizará el contenido cada vez que carga una sesión para un usuario.

Puede crear páginas dinámicas utilizando la estructura de carpetas:
Donde es el nombre del parámetro que desea (por ejemplo: destino)

Esto le da acceso al parámetro usando:

this. $ route.params. 

Por ejemplo, /pages/:mexico/index.vue devolvería

this. $ route.params.destination === ‘mexico’

Recuerde que en asyncData o fetch, no tiene acceso a "esto" mientras se ejecuta antes de montar la página, pero puede acceder al "contexto".

búsqueda asíncrona ({app, store, params}) {
  // esto te da acceso para enrutar parámetros con los parámetros abreviados
  // pero también a la tienda y a los demás valores de la aplicación
  // verifique todos los campos en https://nuxtjs.org/api/context/
}

Si tiene muchas llamadas API, puedo sugerir dos opciones:
- Utilice un complemento de caché de API WP REST como WP REST API Cache
- Llamadas de caché nuxtServerInit (preferido)

Para este último, es un poco complicado y requiere que uses mecanismos lre-cache y el paquete axios-extensiones.
A continuación se incluye un resumen de todos los archivos.

Enlace: https://gist.github.com/bovas85/8b5610ac94dd036628f53f702b300a64

tienda vuexagregue esta extensión a axios y agregue el complemento axios.js a nuxt.config.js

Esto es particularmente útil si está generando un sitio estático (nuxt generate) ya que nuxtServerInit se ejecutará una vez por página generada (imagine que si tiene 20 páginas dinámicas, ejecutará 20 * número de llamadas de API).

Parte 5: ¿Qué hay de implementar la aplicación?

Intentamos dos rutas con esto.
1) Utilizamos un sitio estático generado por nuxt y servido con un servidor regular (a la antigua escuela). Rápido, pero la desventaja es que si tiene muchas páginas dinámicas, renderizar las rutas dinámicas es un poco complicado y lento (verifique aquí cómo hacerlo);
2) Utilizamos un servicio alojado de nodeJS como Now (hay varios, o incluso solo usamos su hosting si es compatible con NodeJS, nuestro no).

Escribí un artículo sobre un problema particular al migrar un dominio a Now desde GoDaddy, puedes leerlo aquí:

“Implementando su aplicación SSR en Zeit Now desde GoDaddy” @MoustacheDsign https://medium.com/@moustachedesign/deploying-your-ssr-app-to-zeit-now-from-godaddy-41b51302375f

Ahora, después de instalar el cli, simplemente escriba ahora y desplegará su sitio SSR en segundos (literalmente, dependiendo de su conexión y qué tan grande sea el sitio;))

El resultado es un paquete muy pequeño, optimizado y asíncrono. Hay división automática de fragmentos para las páginas listas para usar, por lo que ya no tendrá que preocuparse por esos fragmentos complicados.

no está mal

Parte 6: ¿Qué sigue para Vue y Nuxt?

Vue y Nuxt ya no son nuevos, hay un gran ecosistema de complementos, módulos y bibliotecas que están disponibles y serán cada vez más grandes.

Algunos de los que utilicé incluyen complementos para controles deslizantes, carruseles, carga de imágenes diferidas, y la mayoría de las veces se pueden incluir incluso si no son nativos de Nuxt o incluso Vuejs.

Nuxt.js es un OpenCollective y autofinanciado.
Si amas esto como a mí, considera donar en https://opencollective.com/nuxtjs

Envíe problemas para Nuxt aquí (se integra con los problemas de Github, ¡bastante ordenado!):
https://nuxtjs.cmty.io

Es una envoltura

¿Tiene usted alguna pregunta?
Si es así, siéntase libre de comentar a continuación, o twitteeme @moustacheDsign

Algunos sitios que hice siguiendo este enfoque:

Si tiene alguna pregunta, responda aquí o twitteeme @moustacheDsign

Gracias del gato