PageBuilder: Strapi-Plugin - @am-gmbh/pabu-strapi-plugin

💡 If you don't have an existing Strapi project, you should follow the Part A of the official Strapi Quick Start Guide first. (Make sure to install and start a compatible strapi version by using npx create-strapi-app@4.24.4!)

• Copy the pabu-folder to /strapi/src/plugins (you might have to create the /plugins-folder manually). (See: Strapi Project structure)

• Create/edit the plugins-file inside of your strapi/config-directory:

  module.exports = () => ({
    // ...
    pabu: {
        enabled: true,
        resolve: "./src/plugins/pabu",
    },
    // ...
  });
  • Because the pabu-plugin uses the upload-plugin you should also add the following upload-configuration to your plugins-file.

    // ...
    upload: {
      config: {
        sizeLimit: 250 * 1024 * 1024,
      },
    },
    // ...

• Edit your middleware-file inside of your strapi/config-directory:

    module.exports = [
      "strapi::logger",
      "strapi::errors",
      {
        name: "strapi::security",
        config: {
          contentSecurityPolicy: {
            useDefaults: true,
            directives: {
              "connect-src": ["'self'", "https:"],
              "img-src": ["'self'", "data:", "blob:"],
              "media-src": ["'self'", "data:", "blob:"],
              upgradeInsecureRequests: null,
            },
          },
        },
      },
      {
        name: "strapi::cors",
        config: {
          origin: process.env.PABU_CORS_ORIGINS.split(", "),
          expose: [
            "WWW-Authenticate",
            "Server-Authorization",
            "Access-Control-Expose-Headers",
          ],
          headers: [
            "Content-Type",
            "Authorization",
            "X-Frame-Options",
            "Cache-Control",
            "Pragma",
            "Expires",
            "Access-Control-Allow-Headers",
          ],
        },
      },
      "strapi::poweredBy",
      "strapi::query",
      {
        name: "strapi::body",
        config: {
          enabled: true,
          jsonLimit: "5mb",
          // if you use text or form body you can enable and adjust this:
          // formLimit: "5mb",
          // textLimit: "5mb",
        },
      },
      "strapi::session",
      "strapi::favicon",
      "strapi::public",
    ];

• Run the following commands.

    cd /strapi
    npm install

• Because the pabu-plugin comes with various content-types that should be installed correctly you should add and include the pabu-build in your strapi build script. Adjust your strapi/package.json:

  ...
    "build": "npm run pabu-build && strapi build",
    "pabu-build": "node src/plugins/pabu/server/components/install.js && cd src/plugins/pabu && npm install && npm run compile-and-build",
  ...

💡 The content-types that needs to be edited from within Strapi Admin are visually highlighted in the Strapi Admin.

• Place the pabu license key as "pabu-license"-file in /strapi.

• Add required environment variables.

  ### PaBu: General ###
  CMS_FEATURES=core
  # URL of your Next.js frontend
  PABU_PUBLIC_FRONTEND_URL=http://127.0.0.1:3000
  # URL of your Strapi Application and Next.js frontend
  PABU_CORS_ORIGINS="http://localhost:3000, http://127.0.0.1:3000, http://127.0.0.1:1337, http://localhost:1337"

• optional (but recommended): Depending on your needs you might want to use another email-provider than the Strapi default: sendmail. To switch email-provider-configuration comfortably you should add the following configuration to your plugins-file.

  // ...
    email: {
      config: {
        provider: process.env.EMAIL_PROVIDER,
        providerOptions: {
          host: process.env.EMAIL_SMTP_HOST,
          port: Number(String(process.env.EMAIL_SMTP_PORT)),
          auth: {
            user: process.env.EMAIL_SMTP_USER,
            pass: process.env.EMAIL_SMTP_PASS,
          },
          secure: false,
          ignoreTLS: true,
        },
        settings: {
          defaultFrom: process.env.EMAIL_ADDRESS_FROM,
          defaultReplyTo: process.env.EMAIL_ADDRESS_REPLY,
        },
      },
    },
    // ...

• with this plugins-file-configuration you can now switch the email-provider configuration like this:

    # By default: sendmail is used. You should not use sendmail in production (e.g. use nodemailer instead).
  
    # EMAIL_PROVIDER=sendmail
    # EMAIL_SMTP_HOST=localhost
    # EMAIL_SMTP_PORT=25
    # EMAIL_SMTP_USER=smtpUser
    # EMAIL_SMTP_PASS=smtpPass
    # EMAIL_ADDRESS_FROM=emailAdressFrom
    # EMAIL_ADDRESS_REPLY=emailAdressReply

  (For more informations about E-Mail-Provider in Strapi: E-Mail-Provider)

❗ Before starting the installation you need to make sure that you have created/adjusted the strapi/.env-File. (For more information: Adding required PaBu Environment Variables)

• Build Strapi & start your Strapi application.

  cd /strapi  
  npm run build 
  npm run develop

☁️ Strapi Cloud: Always make sure that you buildt (npm run build) your project locally before deploying to Strapi Cloud!