#Fully customize admin dashboard and separate deploy (guide)

84 messages · Page 1 of 1 (latest)

ebon cape
#

Fully customize admin dashboard and separate deploy (guide)

echo rune
#

thank you so much for taking the time and writing this guide

mint junco
#

@ebon cape how do you bind this custom panel to medusa-starter-default?

#

okay, and how do add custom admin panel to medusa-starter-default?

#

That's not what I meant, I'll try to explain it another way

#

No

#

for example I downloaded medusa-starter-default, in package.json it has "@medusajs/admin": "7.1.9", I deleted it and I have to use my custom admin package instead. How should I connect it, for example link to the custom repository "@medusajs/admin": "https://githumb.com/my-repo/custom-admin" or Yarn link or some other way?

githumb.com

This domain may be for sale!

#

Medusa-starter-default uses the @medusajs/admin package in /src/admin/widgets/onboarding-flow/onboarding-flow.tsx. Where does the system get it from?

#

yarn link?

mint junco
#

Thanks Chris
It's good that some solution to this problem has been proposed. I see a question every week about customizing the admin panel.
Although this approach has some disadvantages:

  • can't work with medusa-starter-default at the same time
  • have to rebuild every time
  • a fork of the entire Medusa core

I will add my alternative solution some later

mint junco
verbal flax
#

So updated if this is not clear admin repo has within its node_modules @medusajs this contains a folder called admin-ui although its entry point is not clear navigating to login.tsx and putting a console.log within its use effect will console log what you want showing that this is indeed the admin ui now for editing this file effectivley can be of two options either npm publish the whole @medusa package or for what i will be trying to do is adding a git submodule within @medusa replacing the admin-ui folder

#

@hearty wagon

verbal flax
#

i used this script to copy over changes within the projects folder responsible for styles to a place where git can see this this allows me to simply transplant my code into the node_modules/@medusajs/admin-ui and this solution currently works as is

#

as u can see this is not the default font family

image.png
verbal flax
#

some new insights from doing it this method so i used the folder-doctor.go to copy over my changes into a new repo named admin-ui and to have this work on the vercel front end i will post a install script i used to override the default install script

hearty wagon
verbal flax
#

i was confused too but the admin is the backend but it a multi use repo depending on where u host it or what ports you expose

#

it should work now i jsut had to edit the link odd

river scaffold
#

I see it working. Looks great, thanks for the breakdown on how to do it

image.png
hearty wagon
#

yep now it's working

verbal flax
hearty wagon
#

But backend is on fly.io right?

verbal flax
#

Backend is hosted on EC2 I'm waiting for you to make it work on fly.io 😂😅

hearty wagon
#

oh sorry 😄

#

bear with me i'll work it out

#

by the way host:9000/app is also opens the dashboard

#

as far as i know

#

i mean deploying the backend only would also work

#

that might be stupid idea too just a wild guess

hearty wagon
#

sorry couldn't get it done via fly.io

#

but it's definitely possible with azure container apps

#

or render

#

or aws app runner

verbal flax
hearty wagon
#

yeah it works fine but i don't trust render, i would go with azure container apps

#

i will show you example of azure container apps

#

but you need to have knowledge of some devops

verbal flax
#

sadly i owe azure money 😦

hearty wagon
#

you never owe money to microsoft 😄

#

because they haunt you in your dreams

#

ahhh it's really too much trouble to deploy to azure in this time of the day

#

i'll tkae a look tomorwrow 🙂

verbal flax
#

lets talk on pm brother

verbal flax
#

@cinder merlin

cinder merlin
#

Thanks for the mention @verbal flax ! So in order to customize admin dashboard you have to fork the repo

verbal flax
#

Sorry for the late response

#

Never feel shy to reach out to me

#

@cinder merlin

#

Yes you are on similar lines

#

Someone has given that approach of doing as such but idealy you can just preform edits on the UI packages responsible and then transplant the custom code into the node modules after installation to bring your custom changes over

#

Use folder doctor, enter nodemodules/medusajs/admin-ui, edit eg login-screen.tsx, commit your changes in folder doctor's target, use custom installation script to modify node modules after installation.

#

Placing this as a npm script in your repo called custom:ui should do the trick and also overriding your vercel install command as the UI needs to be built on every installation and isn't carried along with the code as node modules is git ignored

#

Let me know how you get along brother ping a message if it doesn't work out

verbal flax
#

@ripe cape

ripe cape
#

Hi

untold flicker
#

Hi @verbal flax , how do you keep your custom admin-ui repo up to date with medusa admin-ui ?

verbal flax
#

Once it is downloaded in the node modules

#

Now I think about it there's a much easier way

#

Just download the folders and move them from node modules to the root of the application within a folder called eg packages and point the references to that location

#

This will be much easier with git

#

The packages should have a appendix called index.ts and should work naturally all exported from that file

severe cloak
#

hi @verbal flax could you share some example using the last approach you said please?

verbal flax
#

@evandro_vv pm Me

fossil cosmos
#

Hi @ebon cape
I'd like to separate admin and backend

#

How can I do for it?

fossil cosmos
dire juniper
#

Would anyone be able to teach me medusa JS?

#

with nextjs

ripe cape
#

Read the docs

fallen marsh
#

hello i was reading the thread and apart from only being able to 'fully customize admin dashboard' with these approaches, for things like hiding links based on user role, is this also not possible with the starter kit?

ripe cape
#

It's possible..

fallen marsh
ripe cape
#

You can just fork it and use the resolutions key in the yarn package I think

#

But essentially it's all just react so you can use use effect and the document key to do whatever you want to 🙂