Develop Mini Blog with Directus - Part 1
directus | Directus, Headless CMS NextJS | 2024-10-20
Pre-requisite
- Basic understanding about Directus and NextJS
Mini Blog Series
Getting start with DirectusThe Final Screen
Listing Page
Detail Page
How do we get start?
Firstly, setup the Directus and database.
To spin up a Directus instance, we can either use docker or NPM installation according to Quickstart Guide | Directus Docs
In the demo, we are using NPM installation and Dockers to spin up database
For PostgreSQL Docker Guide | Directus Docs
name: playground
services:
database:
image: postgis/postgis:16-master
ports:
- "5432:5432"
networks:
- ws_net
volumes:
- ./db:/var/lib/postgresql/data
environment:
POSTGRES_USER: "directus"
POSTGRES_PASSWORD: "Websparks123!"
POSTGRES_DB: "directusdb"
PGUSER: "postgres"
PGPORT: 5432
healthcheck:
test: ["CMD", "pg_isready", "-U", "directus", "-d", "directusdb"]
interval: 10s
timeout: 5s
retries: 5
start_interval: 5s
start_period: 30s
restart: unless-stopped
networks:
ws_net:
driver: bridge
Then run script to start the PostgreSQL
Run docker-compose up -d
For NPM installation
npm init directus-project@latest backend
Then select -
> PostgreSQL / Redshift
Database Host: localhost
Port: 5432
Database Name: directusdb
Database User: directus
Database Password: Websparks123!
Enable SSL: no
For the user -
> Directus User
admin@websparks.sg
Websparks123!
The script will auto generate some files
.env - all required configuration for setup
/upload - folder to keep uploaded file & assets
/extensions - folder to keep extensions
Next, run the script to start Directus instance
cd .\backend
npx directus start
You will see some message on console:
WARN: "PUBLIC_URL" should be a full URL
INFO: Server started at http://0.0.0.0:8055
In your browser, visit http://localhost:8055 you will see the login screen.
Go ahead and login with the credential you specified earlier.