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
- Clone the repository to your system.
git clone https://github.com/ThijmenGThN/next-leaflet
cd next-leaflet
- Preparing the environment, it is recommend to use the sample file.
cp sample.env .env
nano .env
- 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
- Running Next.js in devmode.
yarn dev
- 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
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 thatCOMPOSE_PROFILES
has been set toprod
in the environment file so docker knows to also deploy theapp
service alongside thedatabase
.Also make sure that the
PRISMA_CONNECTOR
has been set right, the default "localhost" won't work in deployment, instead replace it with "database".
- Pull down any existing services that might run in the background.
docker-compose down
- 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
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.
- 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.
-
Within GitHub navigate to
Settings > Secrets and variables > Actions
. -
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. |
- 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.