Django bolt is a django admin theme built with React using Material-ui components. The project aims to create a modern administration interface while maintaining the old django.contrib.admin api. Django bolt is split into two parts: the fronted and the backend.
- Logo tutorial and inspiration: Logos by nick
- Icon pack: Feather icons
- Components: Material-ui
- Colors And styles: Bolt design system
- Admin Design: design
Install django-api-admin package.
$ pip install django-api-adminIn your settings.py make sure you have django.contrib.admin, rest_framework, cors-headers, and django_api_admin.
INSTALLED_APPS = [
# built-in apps
'django.contrib.admin',
# 3rd party apps
'corsheaders',
'rest_framework',
'django_api_admin',
]Add cors middileware to your list of middileware. in settings.py
from corsheaders.middleware import CorsMiddleware
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]include django-api-admin admin urls.
urlpatterns = [
path('api_admin/', site.urls),
]Add these CORS and CSRF settings to you settings.py file
# CORS settings
CORS_ORIGIN_WHITELIST = (
'http://localhost', # jest-dom test server
'http://localhost:3000', # react developement server
)
CORS_ALLOW_CREDENTIALS = True
# to allow cross-domain requests from our frontend
CSRF_TRUSTED_ORIGINS = ['http://localhost:3000']register your models using django_api_admin
from django_api_admin.sites import site
from .models import Author, Book
site.register(Author)
site.register(Book)Now clone or download this repo.
git clone https://github.com/demon-bixia/django-bolt.gitAdd your server url to src/application/config.js for example:
const config = {
url: (new URL('http://localhost:8000/api_admin/')),
siteUrl: (new URL('http://localhost:8000/'))
};Now run your django development server.
python manage.py runserverAnd run you react development server.
yarn run start| Feature | Django.contrib.admin | Django-bolt |
|---|---|---|
| inline admins | ✔️ | ✖️ |
| changelist editing | ✔️ | ✖️ |
| add/change | ✔️ | ✔️ |
| history | ✔️ | ✔️ |
| changelist | ✔️ | ✔️ |