How can I customize the Login Site etc.?

[mingxi]

Hi Guys,

Is it possible to customize these pages?

Thank you in advance!

[xantiagoma]

Yep, you can override any component from admin panel:

1st. run strapi in strapi develop --watch-admin mode
2nd. with the inspector search the corresponding component in this case AuthPage
3rd. go to the GitHub repository and search the component path i.e. strapi/index.js at 4ab210eec65d7f1a4f6334cdef4c797b4e6b9531 · strapi/strapi · GitHub
strapi/packages/strapi-admin/admin/src/containers/AuthPage/index.js
4th. under admin/src in your local project create the same file admin/src/containers/AuthPage/index.js
5th. copy&pase current code (all the imports even the relative ones will continue working)
6th. do your changes
7th. stop strapi and run strapi build then strapi develop

[mingxi]

@xantiagoma Thank you for the quick answer, tonight I will try it and report afterwards.

[mingxi]

Sorry, from “2nd …” I didn’t understand what you mean. - “inspector search …”? Can you tell me how to look for it?

Thanks in advance!

[Richard_Nsama]

Hi @mingxi, in case you haven’t already visited the page, a great resource you can refer to regarding admin customization with Strapi can be found here.

[jcmujica]

Any changes in v4 for how this should be working?

Im trying to replicate what I had in my v3.6 project in v4 and it doesnt seem to be working

[daniel.j]

Would also like to know this

[sg-code]

I am also awaiting updated documentation on how to perform this in Strapi v4.

The current Admin customization documentation gives almost no indication of how to properly extend/augment Strapi generated pages (Login, Homepage…) and plugins (Content Manager…).

It would be great if the documentation contained a few practical examples / tutorials to complete some common tasks like those listed above. The current documentation seems quite disjointed and difficult to parse when it comes to Admin customization.

The ability to easily customize the Admin area was a key reason I chose to invest in and use Strapi v3 over other headless CMS platforms, and thus I was excited about the new APIs in v4 (Plugin API, Admin Panel API, Injection Zones API, Menu API… etc). I would surely use these great new features if their implementation was made intelligible!

[iafilin]

Hi!
My solution to the problem:

1. Copy the source code to the working directory
   cp node_modules/@strapi/admin/admin/src ./src/admin/ui
2. Rename the file ./src/admin/webpack.config.example.js to ./src/admin/webpack.config.js
3. We connect and configure the webpack.NormalModuleReplacementPlugin plugin in the ./src/admin/webpack.config.js file

"use strict";
const path = require("path");
const strapiCacheSrcPath = path.resolve(__dirname, "../../.cache/admin/src");
/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
  // Note: we provide webpack above so you should not `require` it
  // Perform customizations to webpack config
  // Important: return the modified config
  config.plugins.push(
    new webpack.NormalModuleReplacementPlugin(
      /admin\/src\/(.*).js/,
      (resource) => {
        if (resource.createData.resource){
          const replacedFilePath = resource.createData.resource.replace(strapiCacheSrcPath,path.resolve(__dirname,'ui'));
          if (replacedFilePath.endsWith('.js')) {
            resource.createData.resource = replacedFilePath;
          }
        }
      }

    )
  );

  return config;
};

4. Fixing plugin paths ./src/admin/ui/plugins.js

// After:
// import contentTypeBuilder from '../../../content-type-builder/admin/src';
// import email from '../../../email/admin/src';
// import upload from '../../../upload/admin/src';
// import i18N from '../../../../plugins/i18n/admin/src';
// import usersPermissions from '../../../../plugins/users-permissions/admin/src';

// Before:
import contentTypeBuilder from '@strapi/plugin-content-type-builder/admin/src';
import email from '@strapi/plugin-email/admin/src';
import upload from '@strapi/plugin-upload/admin/src';
import i18N from '@strapi/plugin-i18n/admin/src';
import usersPermissions from '@strapi/plugin-users-permissions/admin/src';

Ready! Now you can modify admin panel .js files in ./src/admin/ui directory! If desired, you can reconfigure the plugin for other file formats.

The solution is not 100% tested, there may be problems.

[AlexanderPershin]

Sadly, doesn’t work

[Gowthami]

Did you manage to get it working for v4 ? Could you please let me know how you have done it.

[Abdullah_Al_Muzaki]

Still need the solution for v4

@Richard_Nsama

[solidstatesociety]

Me too. All websites in China require developers to add a license number on the footer of public pages. I can’t believe it’s so difficult to edit the “/” index page. Strapi support team has to pay more attention to documentation!