- In docker-compose.yaml, change the name of the compose.
This is a template for app using NextJS along with a Directus CMS
The website's code is located in the /src directory. It uses NextJS, a React-based framework to provide a single page application, coupled with SCSS for styling.
To fetch data from Directus, it should be done on server-side, using the directus() to generate a handle to call Directus' API (https://docs.directus.io/guides/sdk/getting-started.html) object in directus.ts. As NextJS's app router allow server side components, you can directly fetch from directus from those.
To store and provide dynamic content, we use the service Directus, which acts as a content management server.It is ran separately from the website in the infrastructure. See its documentation.
TODO
It is recommended to use VSCode, with the following extensions:
You will also need:
After installing all dependencies, you need to run:
npm install
npm run prepareImportant note: If your UID/GID is not 1000, you need to export them as USER_ID/GROUP_ID environment variables for the containers to work. See .env.example.
Afterwards, refer to this document to setup a local Directus instance.
The development is done in the /app directory for the website, or from Directus admin UI, on http://localhost/directus.
In order to run the server, use docker and run the compose file at the root of the project:
docker compose upNote: For VSCode users, there are two tasks, under Terminal > Run tasks..., to both start and stop the server. The start task is automatically ran when you open the directory.
When editing the website, modifications will immediately be visible, without reloading the page or restarting the server.
All services are ran behind a Caddy reverse proxy, mounted on port 80. The config is Caddyfile.dev (note: this is not the production config).
The code must be formatted with Prettier (using npx prettier --write <directory>). This will be checked by a hook upon commit.
The commit message must follow conventional commits convention. This is both checked by a local hook and by the CI.
Style scss must be imported into code files and classnames must not be referenced in clear.
After a push on the main branch, the website is automatically built into a docker image, and pushed to GHRC. When opening or pushing to a pull-request on the main branch, the images are also built, but not pushed, for sanity check.
The rest of the deployment is done by a dedicated repository.