Creando mi propia REST API de contenido con Strapi

6 min
Creando mi propia REST API de contenido con Strapi

API juanoa

REST API desarrollada con la ayuda de Strapi de la cual se alimentan muchos de mis servicios y proyectos como este.

StrapiGoogle CloudREST API

En el último artículo, hablamos sobre las tecnologías de JavaScript que había conocido durante las últimas semanas. En la conclusión, comenté que todas esas tecnologías las había utilizado para realizar algunos de los proyectos. Hoy vamos a ver cómo usé Strapi para desarrollar mi propia API donde almaceno todo el contenido que posteriormente se muestra en muchas de mis aplicaciones como este blog.

Disclaimer: este va a ser un artículo de los largos, así que coge palomitas porque lo que se viene es magia pura.

Qué es Strapi

Posiblemente si ya habéis leído el artículo que os comentaba antes, ya sabréis de qué se trata. Strapi es un headless CMS, o lo que traducido al español sería un CMS sin front-end. Es decir, podemos crear cualquier tipo de contenido (post, páginas, podcasts, categorías, libros) que luego lo podemos consumir desde cualquier otra aplicación web a través de la API que nos proporciona.

Captura 2021-01-05 a las 15.45.28.png

Si todavía no me habéis entendido, os voy a poner el caso de WordPress. WP es un CMS centrado en el blogging, aunque durante los últimos años se puede convertir en lo que tú quieras gracias a la gran cantidad de plug-ins que hay disponibles. No obstante, la posibilidad de crear nuevos tipos de objetos es muy limitada, lo que impide que se adapte 100% a tus necesidades. Además, WordPress cuenta con un front-end desde el cual, a través de un tema que podemos instalar, se visualizan todos esos contenidos que creamos desde la intranet.

En resumen, Strapi es una especie de WP que mantiene la intranet desde la cual crear contenido, podemos diseñar cualquier tipo de objeto y no cuenta con un front, sino con una REST API desde la cual solicitaremos todos estos datos. Una vez que sabemos como funciona esto, vamos a ver cómo lo he utilizado.

Mis objetivos con Strapi

Una vez que sabemos qué es Strapi, llega la gran pregunta: ¿para qué lo vas a utilizar tú? En mi caso, lo tengo bastante claro. Hace tiempo que quería darle una vuelta de tuerca a mi blog, a juanoa.com, pero no conocía las tecnologías necesarias para hacerlo. Para los que acabéis de llegar y no sabéis de qué os estoy hablando, hasta hace bien poco esta página que estáis visitando estaba desarrollada en WordPress, la forma más común de desplegar un blog personal. Pero había cosas como los tiempos de carga que no me llegaban a convencer del todo. Por eso finalmente, decidí usar Strapi para crear yo mi propio back-end y Gatsby para desplegar la aplicación web (de lo cual os hablaré más adelante en otro artículo).

Además, esto me ha permitido poder añadirle nuevos tipos de contenidos como libros y poder relacionarlos con los artículos que subo para que veáis los libros que he utilizado de fuente para muchos de mis posts. No obstante, no todo iba a ser de color de rosa, si no que debía tener en cuenta varias cosas que eran imprescindibles para que dejara atrás WordPress:

  • Las rutas de los artículos se deberían mantener para no perder toda la importancia en buscadores que había logrado
  • Mantener la SEO-optjmización de la página
  • El diseño debía ser muy parecido al que tenía en la página en WordPress
  • Debía tener una intranet que me permitiera escribir artículos de forma cómoda
  • Lograr una mejora sustancial en la velocidad del sitio web
  • Poder añadir de forma sencilla nuevos tipos de contenido

En cuanto al primer y segundo punto, lo logré a través de configuraciones en Gatsby, del cual ya os hablaré en ese futuro artículo que haré al respecto. El tercer punto, respecto al diseño, pensé que sería mucho más complicado, pero con Bootstrap y un poco de mano de obra por mi parte, quedó solucionado. El cuarto punto era realmente importante, pero Satrpi cuenta con un editor de MarkDown que se parece en medida a cómo funciona el nuevo editor de bloques de WordPress. No es todo lo que me hubiese gustado, pero no me quejo. En cuanto a la mejora sustancial en la velocidad de la página, la he conseguido utilizando páginas estáticas, que al igual que muchos otros puntos, lo explicaré en el artículo sobre el front. Y por último, la razón más de peso por la que me pasé a Strapi (en vez de usar Gatsby con la API de WP), poder añadir nuevos tipos de contenidos que serán consumidas por muchas de mis aplicaciones, no solo mi blog.

Instalando Strapi

Bien, lo primero de todo, es crear nuestro primer proyecto de Strapi. Aunque os recomiendo que sigáis la documentación oficial, voy a mostraros algunas de las cosas clave que necesitáis saber para comenzar el proyecto.

Lo primero, usaremos npx para instalar el proyecto base del que partiremos. La opción quickstar usará una base de datos en SQLite para que su configuración sea más rápida y sencilla:

npx create-strapi-app my-project --quickstart

Claramente SQLite no es una opción viable para poner vuestra aplicación en producción. En un par de apartados mas abajo, os mostraré que pasos he seguido para dejar la aplicación preparada para su despliegue con Imagify y MongoDB.

Bien, una vez tengamos el proyecto creado, podemos usar el siguiente comando para poder visualizar los resultados desde el navegador en un entorno de desarrollo:

npm run develop

Desarrollo y producción

Al igual que cualquier otro framework o biblioteca, tenemos dos formas de utilizar Strapi: en desarrollo y en producción. En desarrollo, es donde podremos crear todos los tipos de contenido y probar desde un servidor local si todo funciona de forma correcta. Es importante que sepáis, que una vez puesto en producción, no se pueden realizar cambios en los tipos de datos. Esto se hace por seguridad, y en este caso, tendréis que volver a trabajar en producción y desplegar el nuevo proyecto con todo actualizado.

Creando tipos de contenidos

Bien, una vez que tenemos Strapi trabajando en el entorno de desarrollo, podemos iniciarlo en el navegador con la dirección IP y el puerto que nos aparecerá por consola. Una vez aquí, nos desplazamos al directorio /admin desde el cual podremos acceder a todos los ajustes.

Si es la primera vez que lo iniciamos, nos pedirá que creemos una cuenta. Una vez hecho esto, nos dirigiremos al apartado del menú que se llama “Creador de Tipos de Contenido” y comenzamos a crear un nuevo tipo de contenido. En este caso, yo he creado de momento los siguientes, pero los iré ampliando con el tiempo.

Captura de pantalla 2021-01-11 a las 12.17.11.png

Desplegando en Heroku

Este no es un tutoría de cómo crear una API con Strapi, es más un comentario de la experiencia que yo he tenido y los pasos que he ido siguiendo. Por esta misma razón, no puedo explicar paso a paso como desplegar Strapi en Heroku, pues me llevaría mucho tiempo y se quedaría un artículo más largo de lo que ya es.

La guía que yo seguí es el oficial de Strapi y está bastante bien explicado. Lo primero que tendremos que decidir es si usaremos una base de datos tradicional como PostgreSQL o si por el contrario, preferimos usar un sistema NoSQL como MongoDB. Como creo que ya he explicado, yo me he decidido por Mongo y la mejor forma de implantarlo es a través de Mongo Atlas, cuyo plan gratuito da de sobra para un proyecto no muy grande. Como podéis ver en la siguiente imagen, no tendremos ningún problema de almacenamiento de datos por mucho tiempo (por lo menos en mi caso).

Captura de pantalla 2021-01-11 a las 12.38.52.png

Otra cosa que hay que tener mucha en cuenta y que en la guía se comenta muy de pasada, es que necesitamos un servicio para almacenar imágenes y videos, ya que la memoria de Heroku se limpia varias veces al día, por lo que perderemos todos los archivos que subamos diretamente ahí. En este caso, como Heroku tiene muy bien implementada la estructura de microservicios, podemos contratar algún add-on como Cloudinary que nos permita almacenar todos estos ficheros.

Y hasta aquí las bases de como desplegar Strapi en Heroku. Tened en cuenta que en el plan gratuito, Heroku pones en modo suspensión los servidores cuando pasan más de 30 minutos sin ser utilizados. Esto puede suponer un problema si nuestra API no va a recibir muchas peticiones, pero eso lo podemos usar con un generador de contenidos estático como el que explicaré muy pronto.