blob: a059811b343690f568fec3f1d8676f7e9e456d5c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
# Vite Portfolio (Headless Drupal Frontend)
This project is configured to consume a headless Drupal backend (JSON:API) and deploy as a Docker image served by Nginx.
## Added Drupal libraries
- `axios` for HTTP requests
- `drupal-jsonapi-params` for building Drupal JSON:API query parameters
## Environment variables
Create a local env file from the template:
```bash
cp .env.example .env.local
```
Available variables:
- `VITE_DRUPAL_BASE_URL` (required) – base Drupal URL, for example `https://cms.example.com`
- `VITE_DRUPAL_API_PREFIX` (optional) – defaults to `/jsonapi`
- `VITE_DRUPAL_AUTH_TOKEN` (optional) – bearer token used by the HTTP client
For local development with the included Drupal stack (CORS-safe via Vite proxy), use:
- `VITE_DRUPAL_BASE_URL=http://localhost:5173`
- `VITE_DRUPAL_API_PREFIX=/drupal-api/jsonapi`
## Client utilities
- Typed env config: `src/config/env.ts`
- Reusable Drupal client: `src/lib/drupalClient.ts`
Example usage:
```ts
import { createDrupalParams, fetchDrupalResource } from './lib/drupalClient'
type NodeCollection = {
data: Array<{ id: string; attributes: Record<string, unknown> }>
}
const params = createDrupalParams().addPageLimit(5).addFields('node--article', ['title'])
const articles = await fetchDrupalResource<NodeCollection>('/node/article', { params })
```
## Local development
```bash
bun install
bun run dev
```
## Local Drupal server (for testing)
Start local Drupal + MariaDB:
```bash
docker compose -f docker-compose.local.yml up -d
```
Then open Drupal installer:
- `http://localhost:8081`
After installation:
1. Enable JSON:API module in Drupal (if not already enabled).
2. Create at least one Article content item.
3. Keep frontend env values on proxy mode (`http://localhost:5173` + `/drupal-api/jsonapi`).
Run frontend:
```bash
bun run dev
```
Your React app requests `/drupal-api/...` on the Vite dev server, and Vite proxies to Drupal at `http://localhost:8081`, avoiding browser CORS issues.
## Docker build and run
Pass Drupal variables at build time (Vite injects `VITE_*` during build):
```bash
docker build \
--build-arg VITE_DRUPAL_BASE_URL=https://cms.example.com \
--build-arg VITE_DRUPAL_API_PREFIX=/jsonapi \
--build-arg VITE_DRUPAL_AUTH_TOKEN=your-token \
-t vite-portfolio:latest .
docker run --rm -p 8080:80 vite-portfolio:latest
```
## CI/CD deployment (GitHub Actions + Docker Swarm)
The workflow in `.github/workflows/docker_build.yml` now forwards Drupal settings to Docker build args.
Set these in your GitHub repository before deploying:
- Repository variable: `VITE_DRUPAL_BASE_URL`
- Repository variable: `VITE_DRUPAL_API_PREFIX` (optional)
- Repository secret: `VITE_DRUPAL_AUTH_TOKEN` (optional)
Existing deploy flow:
1. Build and push image to GHCR on `main`
2. SSH to the remote host
3. `docker stack deploy -c docker-stack.yml vite-portfolio`
|
