mattmilburn/strapi-plugin-preview-button

Use with different locale domains

Closed this issue · 4 comments

Hi! How can I use it with different localization domains?

en -> site.com
fr -> fr.site.com
ru -> site.ru

Hi!
Im struggling with the same problem.

I've tried to manage it as plugin extension - just to add simple if/switch depending on {locale} and then just change the domain, but i couldn't find a way (https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html#within-the-extensions-folder)
Second idea was to create just in general custom strapi middleware which will do redirect for /api/preview/asdf/ but also i didn't figure it out.
Do you got any progress in this topic so far? @avkluchko
Thanks, kind regards @mattmilburn

      config: {
        contentTypes: [
          {
            uid: 'api::page.page',
            draft: {
              url: `/api/preview/asdf/`,
              query: {
                slug: '{id}',
                secret: env('SECRET'),
                locale: '{locale}',
              },
            },
          },
        ],
      },
    },```
   

@avkluchko @rafdol97 I don't think this is currently possible, but I put together a small PR with a new hook that can be utilized to achieve what you are wanting. I put some example code below on how to use it. Let me know if you think this will be a good solution for your situation. Sorry, I know it's heavy-handed because you have to add a plugin just to make this dynamic, but it does seem to be the only way.

  1. Reference this open PR for the small code update in the plugin.

  2. In your Strapi app, go to node_modules and find strapi-plugin-preview-button button.

  3. Using the PR linked above, copy/paste over the updated files in your installed preview button plugin.

  4. Create a custom plugin /src/plugins/ with the bare minimum plugin files like below:

// ./src/plugins/example

/example
  /admin
    /src
      index.js
package.json
strapi-admin.js
// package.json

{
  "name": "example",
  "version": "0.1.0",
  "description": "Example.",
  "strapi": {
    "displayName": "Example",
    "name": "example",
    "description": "Example",
    "kind": "plugin"
  },
  "dependencies": {}
}
// strapi-admin.js

'use strict';

module.exports = require( './admin/src' ).default;
// admin/src/index.js

export default {
  register( app ) {
    app.registerPlugin( {
      id: 'example',
      name: 'example',
    } );
  },

  bootstrap( app ) {
    app.registerHook( 'plugin/preview-button/before-build-url', ( { state, data } ) => {
      /**
       * @NOTE - Change what you want about `state` and use `data` to make decisions.
       * The `state` is just the original config object from `config/plugins.js`.
       */

      return {
        state: {
          ...state,
          example: 'EXAMPLE',
        },
        data,
      };
    } );
  },
};
  1. Add the new plugin to your config/plugins.js
'use strict';

module.exports = params => ( {
  'example': {
    enabled: true,
    resolve: './src/plugins/example',
  },
  1. Finally, start your Strapi app and verify the results.

Let me know what you think and we can push it to production.

Hey, thank you for quick respond!
The solution you provided works amazing, thank you a lot.
Two little remarks:

  1. If you expand your config in plugin.js (for example by adding extra object) for draft collections, you have to also expand published collections too.
/// config/plugin.js

'preview-button': {
      config: {
        contentTypes: [
          {
            uid: 'api::page.page',
            draft: {
              url: `/api/preview/page`,
              query: {
                slug: '{id}',
                secret: env('SECRET'),
                locale: '{locale}',
              },
              sites: {
                de: env('DE_BASE_URL'),
                en: env('EN_BASE_URL'),
                fr: env('FR_BASE_URL'),
              },
            },
            published: {
              url: `xxxx`,
              sites: {
                de: env('DE_BASE_URL'),
                en: env('EN_BASE_URL'),
                fr: env('FR_BASE_URL'),
              },
            },
          },
        ],
      },
    },

without whole 'published' object you could spot an error (missing sites in my case) while entering those published collections types in strapi
The way i edited index.js file is following:

export default {
  register(app) {
    app.registerPlugin({
      id: 'example',
      name: 'example',
    });
  },

  bootstrap(app) {
    app.registerHook(
      'plugin/preview-button/before-build-url',
      ({ state, data }) => {
        /**
         * @NOTE - Change what you want about `state` and use `data` to make decisions.
         * The `state` is just the original config object from `config/plugins.js`.
         */
        let localizedURL;
        switch (data.locale) {
          case 'de-DE':
            localizedURL = `${state.sites.de}/api/preview/urlaub`;
            break;
          case 'de-EN':
            localizedURL = `${state.sites.en}/api/preview/urlaub`;
            break;
          case 'de-FR':
            localizedURL = `${state.sites.fr}/api/preview/urlaub`;
            break;
        }

        return {
          state: {
            ...state,
            url: localizedURL,
            example: 'EXAMPLE',
          },
          data,
        };
      },
    );
  },
};

  1. Adding another plugin as you suggested is no problem for me

Thank you

Thank you for testing for me @rafdol97 This feature is now included in the latest release v1.1.1