Módulo 0

Iniciación a Strapi.

0.1. Instalación de Strapi y creación de un proyecto.

• Abrimos GitHub en nuestro navegador.

• Vamos al apartado repositories.

• Creamos un nuevo repositorio.

• Copiamos el HTTPS del repositorio creado.

• Clonamos el repositorio en la ruta que queramos usando git clone [HTTPS]. En este caso, nuestra ruta será var/www/html.

• Abrimos MySQL Workbench.

• Seleccionamos la conexión donde queramos tener nuestra BBDD, en este caso mysql-local.(OJO! esto cambia en función del entorno TEST, PRODUCCIÓN, LOCAL)

• Creamos un nuevo schema. Seleccionamos la opción utf8 para Character set y utf8_unicode_ci para Collation.

• En la ruta donde hemos clonado anteriormente el repositorio, ejecutamos el comando npx create-strapi-app@latest [nombre]. En la configuración seleccionaremos la siguiente estructura:

  1. skip
  2. Do you want to use the default database (sqlite) ? n
  3. mysql
  4. [nombre squema BBDD]
  5. [IP conexión donde hemos creado el schema de la BBDD]
  6. default port
  7. desarrollo
  8. Alebat12358%
  9. no enable SSL
  10. Start with an example structure & data? N
  11. Start with Typescript? Y
  12. Install dependencies with npm? Y
  13. Initialize a git repository? Y

• una vez terminada la configuración, movemos todos los archivos (exceptuando el .git) de la carpeta strapi acabamos de crear al repositorio previamente clonado.

• Hacemos cd en el repositorio y ejecutamos:

        npm i
        npm run build
        npm run develop

• iniciamos sesión para crear el primer usuario (Normalmente se abre el navegador para hacer el registro, sino copiamos la url del terminal y la pegamos en el navegador)
• copiamos en .gitinore de algún proyecto ya creado y lo pegamos en el nuestro.

0.3. Configuración básica para un proyecto de Strapi mínimo.

• Vamos a la configuracion
• En Media Library dejamos la selección como la de la siguiente imagen:

• En el package.json, en el apartado de dependencies, tenemos que tener las siguientes dependencias instaladas (Puede que cuando estes leyendo esto hay versiones mas modernas asique no copies y pegues, fijate en el númerito que es la versión)

"@retikolo/drag-drop-content-types": "1.3.9",
"@strapi/plugin-graphql": "^4.14.4",
"@strapi/plugin-i18n": "^4.15.0",
"@strapi/plugin-seo": "1.9.2",
"@strapi/plugin-users-permissions": "4.13.6",
"@strapi/provider-email-amazon-ses": "4.12.5",
"@strapi/provider-upload-aws-s3": "4.11.7",
"@strapi/strapi": "v4.14.4",
"aws-sdk": "^2.1494.0",
"axios": "1.4.0",
"jsonwebtoken": "9.0.2",
"mysql": "2.18.1",
"mysql2": "3.5.2",
"semver": "^7.5.4",
"strapi-plugin-import-export-entries": "1.21.0",
"strapi-plugin-multi-select": "1.2.2",
"strapi-plugin-notes": "1.0.1",
"strapi-plugin-transformer": "3.1.1",
"strapi-plugin-translate": "^1.2.3",
"strapi-provider-translate-deepl": "^1.1.2",
"stripe": "13.5.0"

• El archivo plugins.ts, lo cambiaremos por el siguiente código:

const fechaActual = new Date();
const añoActual = fechaActual.getFullYear();
const mesActual = fechaActual.getMonth() + 1;

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "aws-s3",
      providerOptions: {
        baseUrl: env("CDN_URL"),
        rootPath: `${env("CDN_ROOT_PATH")}${añoActual}/${mesActual}`,
        s3Options: {
          accessKeyId: env("AWS_ACCESS_KEY_ID"),
          secretAccessKey: env("AWS_ACCESS_SECRET"),
          region: env("AWS_REGION"),
          params: {
            ACL: env("AWS_ACL", "public-read"),
            signedUrlExpires: env("AWS_SIGNED_URL_EXPIRES", 15 * 60),
            Bucket: env("AWS_BUCKET"),
          },
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
  "import-export-entries": {
    enabled: true,
    config: {},
  },
  email: {
    config: {
      provider: "amazon-ses",
      providerOptions: {
        key: env("AWS_SES_KEY"),
        secret: env("AWS_SES_SECRET"),
        amazon: `https://email.${env("AWS_SES_REGION")}.amazonaws.com`,
      },
      settings: {
        defaultFrom: "info@alebateducation.com",
        defaultReplyTo: "info@alebateducation.com",
      },
    },
  },
  pedidos: {
    enabled: true,
    resolve: "./src/plugins/pedidos",
  },
  transformer: {
    enabled: true,
    config: {
      responseTransforms: {
        removeAttributesKey: true,
        removeDataKey: true,
      },
    },
  },
  translate: {
    enabled: true,
    config: {
      provider: "deepl",
      providerOptions: {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        localeMap: {
          ES: "ES",
        },
        apiOptions: {
          formality: "default",
        },
      },
    },
  },
});

La sección de “pedidos” solo la incluiremos si la aplicación estamos creando va a permitir compras

Esta es la configuración para poder utilizar bases de datos de escritura y lectura. El archivo se llama databaseRouter.ts

import { Next, Context } from "koa";
import mysql from "mysql2/promise";

export default (config, { strapi }) => {
  return async (ctx: Context, next: Next) => {
    const poolRead = mysql.createPool({
      host: process.env.DATABASE_HOST_READING,
      port: parseInt(process.env.DATABASE_PORT),
      database: process.env.DATABASE_NAME,
      user: process.env.DATABASE_USERNAME,
      password: process.env.DATABASE_PASSWORD,
    });

    const poolWrite = mysql.createPool({
      host: process.env.DATABASE_HOST_WRITING,
      port: parseInt(process.env.DATABASE_PORT),
      database: process.env.DATABASE_NAME,
      user: process.env.DATABASE_USERNAME,
      password: process.env.DATABASE_PASSWORD,
    });

    const isWriteOperation = ["POST", "PUT", "DELETE"].includes(ctx.method);

    ctx.dbConfig = isWriteOperation ? poolWrite : poolRead;

    await next();
  };
};