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!

In this guide, I'll walk you through the steps required to extend core validators with Medusa.js. Let's get started!

Extending Core Validators

In that new version of Medusa.js, you can add file loaders that will be executed when the server is launched. These loaders allow you to fully customize Medusa.js to your needs.

Create an utility function

The first step to extending core validators is to create a function that allows you to override the validator in question. Here's an example of what this function might look like:

// src/utils/register-extended-validator.ts
import { ValidatorOptions } from 'class-validator'
import { ClassConstructor } from '@medusajs/medusa'

const extendedValidators: any = []
let isInitialized = false

export async function registerExtendedValidator<
    T extends ClassConstructor<any>,
>(classValidator: T): Promise<void> {
    extendedValidators.push(classValidator)

    if (isInitialized) {
        return
    }

    isInitialized = true

    const module = await import('@medusajs/medusa/dist/utils/validator')
    const originalValidator = module.validator
    module.validator = <T extends ClassConstructor<any> = any, V = any>(
        typedClass: T,
        plain: V,
        config?: ValidatorOptions,
    ): Promise<any> => {
        for (const extendedValidator of extendedValidators) {
            if (extendedValidator.name === typedClass.name) {
                typedClass = extendedValidator
                break
            }
        }
        return originalValidator(typedClass, plain, config)
    }
}

This code accepts a validator as a parameter.
This validator will be used to find a match in existing internal validators. Once the validator has been found it will be overridden ✅

Create an extended validator

In my case I decided to extend the product creation validator to add a new property store_id.

// We alias the core validator so we can have the EXACT same name as the core validator.
import { AdminPostProductsReq as MedusaAdminPostProductsReq } from '@medusajs/medusa'
import { IsEnum, IsString } from 'class-validator'

export class AdminPostProductsReq extends MedusaAdminPostProductsReq {
    @IsString()
    store_id: string
}

Call the Function in a Loader

Now you need to call this function inside a loader with a custom validator.

A loader is a file that exports a function that Medusa.js will execute when the server is launched.

Here's an example of what the loader might look like:

// src/loaders/index.ts
export default async function () {
    registerExtendedValidator(AdminPostProductsReq)
}

This loader calls the registerExtendedValidator function and passes in the new AdminPostProductsReq class to register an extended validator for the create product endpoint.

This means that my endpoint will now wait for store_id to be part of the new DTO.

Conclusion

That's it! You've now learned how to extend core validators with Medusa.js 1.8.x.
By using this function inside a loader and registering an extended version of a specific validator, you can add custom validation logic to your Medusa.js commerce store.

I hope you found this guide helpful.
If you have any questions or comments, feel free to leave them below.

A special thanks to Adrien De Peretti for his help with this.