A Theme Builder for Directus

Customizing the Directus app with a specific color can be a hassle due to the need to convert the color to a CSS object. To simplify this process, a web application has been built that offers an easier way to apply a custom color using a color converter. The application eliminates the need to go through the tedious process of converting a single color and provides a more efficient solution. Try it out by clicking on the link below.

TLDR: Easier way to apply a custom color with a webapp color converter.

https://heuve.link/directus-themebuilder

Build with

• NextJS (site)
• NextAuth (site)
• Prisma (site)
• TailwindCSS (site)

Getting started

Dependencies

• NodeJS (site) >16.8
• Docker (site) >24
• Docker Compose (site) >1.28

Setup

1. Clone the repository to your system.

   git clone https://github.com/ThijmenGThN/next-leaflet
   

   cd next-leaflet
   

2. Preparing the environment, it is recommend to use the sample file.

   cp sample.env .env
   

   nano .env
   

3. Install the required dependencies, by default we do this with yarn.

   yarn install
   

   Don't have yarn installed?
   You can install it via npm.

   npm i -g yarn
   

Development

1. Running Next.js in devmode.

   yarn dev
   

2. Starting the database.

   docker-compose up -d
   

   A fresh installation needs an additional step.
   Apply prisma's schema to the database.

   npx prisma db push
   

Deployment

To deploy next-leaflet we use docker by default, if you'd like to do it without docker, follow the Development procedure whilst changing step 1 to yarn deploy.

Set the right variables.
Ensure that COMPOSE_PROFILES has been set to prod in the environment file so docker knows to also deploy the app service alongside the database.

Also make sure that the PRISMA_CONNECTOR has been set right, the default "localhost" won't work in deployment, instead replace it with "database".

0. Pull down any existing services that might run in the background.

   docker-compose down
   

1. Start next-leaflet in deployment-mode.

   docker-compose up -d
   

next-leaflet should (after a while) go up on port 3000.
Display the console logs if the service is not going online. Do take note that the port might differ if adjusted in the environment file.

docker-compose logs

GitHub Actions

Setting up CI/CD with next-leaflet is not only a breeze to setup but also very useful to eliminate deployment steps.

This setup will guide you to deploy your next-leaflet app on an ssh-accessible host.

Configure environment variables

0. Requirements

• Ensure that you have access to an active GitHub Actions (runner).
• Install docker(-compose) on the server you'd like to deploy next-leaflet on.
  • Docker (site) >24
  • Docker Compose (site) >1.28

1. Within GitHub navigate to Settings > Secrets and variables > Actions.

2. Create the following repository secrets:

3. Designate a trigger branch within the .github/deploy.yml file.

Any change pushed to the targeted branch should now trigger a request to deploy next-leaflet via docker-compose.