/directus-themebuilder

✦ A Theme Builder for Directus

Primary LanguageTypeScriptMIT LicenseMIT

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

Preview

Build with

Getting started

Dependencies

Setup

  1. Clone the repository to your system.
git clone https://github.com/ThijmenGThN/next-leaflet
cd next-leaflet
  1. Preparing the environment, it is recommend to use the sample file.
cp sample.env .env
nano .env
  1. 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
  1. 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".

  1. 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

  1. 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.

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

  2. Create the following repository secrets:

Name Expects Description
SSH_KEY Private Key Generate a new ssh key without a password.
SSH_HOST IP Address The address of your server with an Actions (runner) active.
SSH_USER Username Host system user where next-leaflet should be deploy on.
SSH_PORT Port Number This usually refers to the default ssh port 22.
APP_ENV Environment A copy of .env.sample with adjusted values for deployment.
  1. 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.