Skip to content
Alebat

Instalación y Configuración de Strapi 4

INSTALACION

  • Abrimos AWS en nuestro navegador.
  • Vamos al apartado CodeCommit.
  • 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.

BBDD

  • 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. custom
    2. JavaScript
    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

Ejemplo

  • 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:
Terminal window
        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.

CONFIGURACIÓN

  • Vamos a la configuracion

Media

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

Media

  • 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.js, 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: "4c58f016-006c-3951-31eb-dd72860753b1:fx",
        localeMap: {
          ES: "ES",
        },
        apiOptions: {
          formality: "default",
        },
      },
    },
  },
});

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