2

Strapi 3.0.0 is now in version Betaa, and they have changed a lot comparing to the prior version (Alpha) But now customising the admin panel is not clear anymore in the beta version, The structure has been changed and there is no instruction on how to edit the admin panel and customise it (Even though they're saying it's "TOTALLY" customisable) which is not really true.

So my question is: How to create a plugin that can be accessed from the left sidebar (next to Content Manager ...etc) since now it seems like if you placed your plugin's frontend inside /plugins/my-plugin/admin/src it's ignored.

Thank you.

Sletheren
  • 2,435
  • 11
  • 25

2 Answers2

1

There are several requirements in order to render your plugin in the administration panel:

1.Files structure:

Your plugin's admin folder needs to have the following structure

./admin
  - src
    - containers
      - App
        index.js
      - Initializer
        index.js
    - translations
      - en.json
      - index.js
    - index.js
    - lifecycles.js
    - pluginId.js

Here are the content of each files

Path: containers/App/index.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { NotFound } from 'strapi-helper-plugin';
// Utils
import pluginId from '../../pluginId';
// Containers
import HomePage from '../HomePage';

const App = () => {
  return (
    <div className={pluginId}>
      <Switch>
        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
};

export default App;

Path: containers/Initializer/index.js

import { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import pluginId from '../../pluginId';

const Initializer = ({ updatePlugin }) => {
  const ref = useRef();
  ref.current = updatePlugin;

  useEffect(() => {
    ref.current(pluginId, 'isReady', true);
  }, []);

  return null;
};

Initializer.propTypes = {
  updatePlugin: PropTypes.func.isRequired,
};

export default Initializer;

Path: translations/index.js

import en from './en.json';
import fr from './fr.json';
// import the others translations if needed

const trads = {
  en,
  fr,
};

export default trads;

Path: index.js

import React from 'react';
import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import App from './containers/App';
import Initializer from './containers/Initializer';
import lifecycles from './lifecycles';
import trads from './translations';

const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;

function Comp(props) {
  return <App {...props} />;
}

const plugin = {
  blockerComponent: null,
  blockerComponentProps: {},
  description: pluginDescription,
  icon: pluginPkg.strapi.icon,
  id: pluginId,
  initializer: Initializer,
  injectedComponents: [],
  isReady: false,
  layout: null,
  lifecycles,
  leftMenuLinks: [],
  leftMenuSections: [],
  mainComponent: Comp,
  name: pluginPkg.strapi.name,
  preventComponentRendering: false,
  trads,
};

export default plugin;

Path: pluginId.js

const pluginPkg = require('../../package.json');
const pluginId = pluginPkg.name.replace(
  /^strapi-plugin-/i,
  ''
);

module.exports = pluginId;

Path: lifecycles.js

function lifecycles() {}

export default lifecycles;

Once your plugin met the requirements you can modify the main package to render it

2. Render your plugin

Create the my-app/admin/src/plugins.js file

In this file you will need to require your app's default plugins (the ones in the node_modules)

const injectReducer = require('./utils/injectReducer').default;
const useInjectReducer = require('./utils/injectReducer').useInjectReducer;
const injectSaga = require('./utils/injectSaga').default;
const useInjectSaga = require('./utils/injectSaga').useInjectSaga;
const { languages } = require('./i18n');

window.strapi = Object.assign(window.strapi || {}, {
  node: MODE || 'host',
  env: NODE_ENV,
  backendURL: BACKEND_URL === '/' ? window.location.origin : BACKEND_URL,
  languages,
  currentLanguage:
    window.localStorage.getItem('strapi-admin-language') ||
    window.navigator.language ||
    window.navigator.userLanguage ||
    'en',
  injectReducer,
  injectSaga,
  useInjectReducer,
  useInjectSaga,
});

module.exports = {
  'strapi-plugin-users-permissions': require('../../plugins/strapi-plugin-users-permissions/admin/src')
    .default,
  // Add the other plugins here
  // ...,
  // Add your newly created plugin here (the path is different than the others)
  'my-plugin': require('../../../plugins/my-plugin/admin/src').default,
};
soupette
  • 1,260
  • 11
  • 11
1

I don't know if you already solved your problem, but as I was struggling with the same issue with my migration, I made a little repo to help having a clearer idea of how the new plugins work:

https://github.com/lambertkevin/strapi-v3-beta-plugin-poc

Hope it helps

edit: Forgot to mention that all you need to know is explained in the readme

0xkvn
  • 377
  • 2
  • 16