v4 Code migration: Frontend overview
This frontend code migration overview is part of the v4 code migration guide.
The frontend code of Strapi runs the admin panel, which can be customized. The main difference between Strapi v3 and v4 admin panel customization is that v3 supports file replacement where v4 does not and instead uses several newly introduced APIs (see admin panel customization documentation).
Make sure to entirely migrate the backend before migrating the frontend.
Migrating the frontend of a Strapi application to Strapi v4 depends on whether your project added customizations to the admin panel or not.
Migrating the admin panel without customizations
If the admin panel was not customized, the migration process consists in the following steps:
./adminfolder of the project.
yarn strapi build(or
npm run strapi build) to rebuild the admin panel.
Start the server with
npm run develop) to make sure the admin panel is working properly.
Migrating the admin panel with customizations
If you customized the Strapi v3 admin panel using the file replacement system, please check if this customization is still available in Strapi v4. The admin panel customization documentation lists every possible customization in Strapi v4.
If some of the customizations you applied in Strapi v3 are not available in Strapi v4, the recommended way to add them back is to fork the customized package and install it in your application instead of the corresponding default Strapi package.
The following specific guides also cover the migration of some dedicated customizations:
- WYSIWYG customizations
- webpack configuration
- theme customizations
- calls to the
strapiglobal variable (e.g. to handle notifications and freeze user interactions)
- Strapi v4 admin panel can also be extended, either by a plugin using the new Admin Panel API or by taking advantage of the extensions system.
- Another difference between Strapi v3 and v4 is that the configuration of the admin panel in Strapi v4 is declared in a specific
./config/admin.jsconfiguration file (see admin panel configuration migration.