AdminJS(Nest) Frameworku ile Tecrübelerim

Merhabalar 👋 👋,

Önemli Not: Ben bu makalede AdminJS hakkında takip ettiğim yolları paylaştım AdminJS’i sıfırdan kurmak için dökümantasyonunu takip edebilirsiniz.

Bir süre boyunca bir firmanın yönetim panelinin geliştirilmesinde rol aldım ve burada NestJS, Typeorm, Postgres ve AdminJS frameworkünü kullandık. Sizlerle AdminJS ile ilgili aldığım notları ve AdminJS hakkında konuşmak istiyorum.

AdminJS Nedir?

• AdminJS, Node.js ile çalışan bir frameworktür bizim için crud işlemlerini otomatik olarak oluşturuyor tıpkı Strapi gibi fakat AdminJS özelleştirmeye daha açık. Kendisinin oluşturduğu sayfalar yanında biz de custom componentlerimizi React ile oluşturabiliriz.

AdminJS Dokümantasyonu

Bu adresten AdminJS’i bulabilirsiniz. https://adminjs.co/. Ayrıca AdminJS’in eski adı AdminBro buradan da araştırma yapabilirsiniz: https://beta.adminbro.com/tutorial-installation-instructions.html.

Bu iki sayfadan AdminJS’i uygulamanıza kurabilirsiniz ben burada benim takip ettiğim bazı yolları sizlerle paylaşacağım.

Resources Altyapısı

Resourceleri bu şekilde kurdum.

• /src klasörü altında oluşturduğum resourceleri listeledim.
• /src/resources/*.resource.ts. Şeklinde isimlendirme yaptım.
• index.ts isminde bir barrel file oluşturdum ve resourceleri array içerisinde ekledim.

Ve app.module içerisinde resources propertisine geçtim.

Custom Componentler ve Current Admine Ulaşma

• Eğer oluşturduğunuz custom bir component varsa useCurrentAdmin() hookunu import edebilirsiniz.

AdminJS Design System

• AdminJS’in kendi sunduğu bir design system var bunu kullanabilirsiniz.
• https://www.npmjs.com/package/@adminjs/design-system
• https://v3-2.adminbro.com/section-design-system.html

Actionsdan Redirect Etme

• Eğer oluşturduğunuz actionsdan bir redirect yapmak isterseniz. redirectUrl propunu kullanabilirsiniz.

Custom Style ve Script

Eğer eklemek istediğiniz bir kütüphane varsa ve kütüphanenin kendisine özel .css dosyaları varsa bunları import ederken sorun yaşayabilirsiniz.

Bunun için de style dosyalarını kendiniz ekleyip assetsin içine ekleyebilirsiniz. Mesela ben react-day-picker i import etmek istedim.

Ekledikten sonra yeniden build alın.

• Main.ts de static pathi public olarak belirttim:
• React day picker stylelerini ekledim.
• Daha sonra assetsin altına ekledim.

app.use(express.static(path.join(__dirname, ‘../dist/public’)))

Aside Hakkında

• Bir menüyü açtığınızda o menü localstorage kayıt oluyor ve sonradan girdiğinizde de açık olarak görüyorsunuz eğer bunu istemezseniz bu scripti ekleyebilirsiniz.

Hooklar

Mesela bir listeleme yapıyorsunuz fakat bu listelemede varsayılan bir filtre eklemek istiyorsunuz. Bunun için hookları kullanabilirsiniz.

• Listelemede filtre kullanmak için.

• Ekleme yaparken

Umarım faydalı olmuştur. Teşekkür ederim görüşmek üzere 👋👋👋