Customize the Admin UI Plugin with Medusa.js 1.8.X and Up: A Step-by-Step Guide

The Challenge: Customizing the Admin UI Plugin

With Medusa >=1.8.x, the admin repository has been packaged as a plugin that can be directly installed/used in your backend. However, customizing the admin UI can be a challenge since it remains a Medusa.js plugin.
But don't worry! I have a solution that allows you to customize the admin UI to meet your needs.

Solution: Customizing the Admin UI Plugin

Make sure you have installed @medusajs/medusa in your back-end first

1. Eject the admin UI: By ejecting the admin ui, we will get all the sources. To do this, use the medusa-admin eject -o <outputDirectory> command in your terminal. Replace <outputDirectory> with the desired directory where you want the ejected admin UI to be placed. This command will create a standalone React application using Vite.js, which you can now customize to your heart's content.

2. Install dependencies and run the project: With the ejected admin UI ready for customization, navigate to the directory where it was ejected (specified by <outputDirectory>) and install the required dependencies.

3. Once the dependencies are installed: You can start the development server by running the following command: yarn dev

   This command will launch the admin UI on port 7001 by default.

4. Access the app: You can access the admin UI by opening your web browser and navigating to http://localhost:7001.

5. It's done: Now, you have a fully customizable admin UI at your fingertips. 🎉 You now have a common React application with Vite.js that serves as the foundation for the admin UI customization. You can leverage your frontend development skills to modify the UI, add new features, and create a tailored admin interface for your commerce store!

Conclusion

Customizing the admin UI plugin with Medusa.js >=1.8.x and newer versions is now within your reach.

By following this step-by-step instructions provided in this guide, you can take full control over the appearance and functionality of the admin interface.

However, there is a problem with this solution: the update of your UI. The Medusa.js team has considered this issue and a solution with a better way to customize your admin interface without compromising updates is in the works.

You can follow up the discussion about "Admin Extensibility" here 👇https://github.com/medusajs/medusa/discussions/4116

Remember to explore the Medusa.js documentation and community resources for further guidance and inspiration as you embark on your customization journey!