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

Hi Adil, thanks for such detailed guid! However I have a question. How do I connect ejected and customised Admin UI plugin to the medusa back end? So it will be used instead of default admin UI plugin?

Adil3y ago

Thanks for your feedback, for the moment no way to "re-inject" the custom admin. You'll have to run both (admin and back-end) separately.

(personally, I even deleted the admin plugin from my back-end once I had ejected the plugin)

In any case, you should know that this is a temporary solution for customizing and that in the long term the Medusa team intends to offer a way to customize the admin-ui "natively" so as not to miss any potential updates that may come in the future.

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

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.
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.
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.
Access the app: You can access the admin UI by opening your web browser and navigating to http://localhost:7001.
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.

Season 9 Nbc GIF by The Office

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!

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

Comments (4)

More from this blog

Extend validators with Medusa.js 1.8.x and up

The Challenge: Customizing the Admin UI Plugin

Solution: Customizing the Admin UI Plugin

Conclusion

Command Palette

Comments (4)

More from this blog

The Challenge: Customizing the Admin UI Plugin

Solution: Customizing the Admin UI Plugin

Conclusion