Skip to content

Commit 4598819

Browse files
google-labs-jules[bot]google-labs-jules[bot]
committed
feat: Add Docker Compose setup and update dependencies
This commit introduces a Docker Compose configuration to streamline the setup and development process for the frontend and backend services. Key changes: - Added `backend/Dockerfile` to containerize the backend Node.js application. - Added `frontend/Dockerfile` to containerize the frontend Next.js application. - Created `docker-compose.yml` in the root directory to define and orchestrate the frontend and backend services, configured for development with hot-reloading. - Updated dependencies in `package.json` files for root, frontend, and backend to their latest versions. This included addressing build issues in the frontend arising from major version upgrades (e.g., React 19, Tailwind CSS v4). - Updated `README.md` to remove old manual installation instructions and added a new section detailing how to set up and run the project using Docker Compose. The new setup aims to provide a consistent and reproducible environment for developers. Due to limitations in my current environment, I couldn't complete a full `docker-compose up` test, but I verified individual components (frontend build, backend syntax check, Dockerfile creation).
1 parent fb68e99 commit 4598819

File tree

13 files changed

+3798
-2434
lines changed

13 files changed

+3798
-2434
lines changed

‎README.md

Lines changed: 36 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -66,95 +66,51 @@ Check our (soon) [Wiki](link-to-wiki) for detailed guides on:
6666
| Obtain crafting table | Collects wood to craft a crafting table and drops it | [Download](https://github.com/SilkePilon/KnowledgeBook/blob/main/flows/crafting_table.json) |
6767
| | | |
6868

69-
## How To Install 📥
69+
## Setup and Running with Docker 🐳
70+
71+
This project uses Docker Compose for a consistent and easy-to-manage development environment.
7072

7173
### Prerequisites
7274

7375
Make sure you have the following installed:
74-
75-
- [Node.js](https://nodejs.org/) 22.0.0 or above
76-
- [npm](https://www.npmjs.com/)
77-
78-
### Installation Steps
79-
80-
1. Clone the repository:
81-
```bash
82-
git clone https://github.com/SilkePilon/KnowledgeBook.git
83-
cd KnowledgeBook
84-
```
85-
86-
2. Install dependencies for all workspaces:
87-
```bash
88-
npm run install:all
89-
```
90-
91-
3. Set up HTTPS for development:
76+
- [Docker](https://docs.docker.com/get-docker/)
77+
- [Docker Compose](https://docs.docker.com/compose/install/) (usually included with Docker Desktop)
78+
79+
### Installation & Running
80+
81+
1. **Clone the repository:**
82+
```bash
83+
git clone https://github.com/SilkePilon/KnowledgeBook.git
84+
cd KnowledgeBook
85+
```
86+
87+
2. **Start the application using Docker Compose:**
88+
```bash
89+
docker-compose up --build
90+
```
91+
This command will:
92+
- Build the Docker images for the frontend and backend services (if they don't exist or if their Dockerfiles have changed).
93+
- Start all services defined in the `docker-compose.yml` file.
94+
- Frontend will be accessible at `http://localhost:3000`.
95+
- Backend will be accessible at `http://localhost:8080`.
96+
97+
To run the application in detached mode (in the background), use:
98+
```bash
99+
docker-compose up --build -d
100+
```
101+
102+
### Stopping the Application
103+
104+
To stop and remove the containers, networks, and volumes created by `docker-compose up`:
92105
```bash
93-
cd backend
94-
npm run setup-https
106+
docker-compose down
95107
```
96108
97-
This will:
98-
- Install dependencies for both frontend and backend
99-
- Generate trusted SSL certificates for local development
100-
- Configure HTTPS for secure communication
101-
102-
> **Note:** When first accessing the backend API in your browser, you may need to accept the self-signed certificate. This is normal for local development and doesn't affect security.
103-
104-
### Running the Application
105-
106-
You can run the frontend and backend separately or together:
107-
108-
#### Run both frontend and backend:
109-
```bash
110-
npm run dev
111-
```
112-
113-
#### Run only the frontend:
114-
```bash
115-
npm run frontend
116-
```
117-
118-
#### Run only the backend:
119-
```bash
120-
npm run backend
121-
```
122-
123-
The frontend will be available at `http://localhost:3000` and the backend at `http://localhost:8080` by default.
124-
125109
### Development
126110
127-
- Frontend code is located in the `frontend/` directory
128-
- Backend code is located in the `backend/` directory
129-
- Each directory has its own `package.json` with specific dependencies and scripts
130-
131-
```bash
132-
curl -sL -o main.zip https://github.com/SilkePilon/KnowledgeBook/archive/refs/heads/main.zip && unzip main.zip && cd KnowledgeBook-main && npm install && npm rebuild && cd .. && rm main.zip && cd KnowledgeBook-main && node main.js
133-
```
134-
135-
## Manual Install
136-
137-
#### 1. Clone the Repository
138-
139-
First, make a local copy of the repository:
140-
141-
```bash
142-
git clone https://github.com/SilkePilon/KnowledgeBook.git
143-
```
144-
145-
Open the cloned repository in your preferred terminal app.
146-
147-
#### 1. Install packages
148-
149-
Assuming you have [Node](https://nodejs.org/en/download/package-manager/current) and [NPM](https://www.npmjs.com/) installed you can run the following commands:
150-
151-
```bash
152-
npm install
153-
npm rebuild
154-
node main.js
155-
```
156-
157-
That's it! You can now open up https://knowledgebook.vercel.app/ and start creating!
111+
- Frontend code is located in the `frontend/` directory.
112+
- Backend code is located in the `backend/` directory.
113+
- Changes to the code in these directories will be reflected live in the running containers due to volume mounts configured in `docker-compose.yml`. You might need to restart services or they might hot-reload depending on their individual configurations.
158114
159115
## Adding Custom Nodes to the Project
160116

‎backend/Dockerfile

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Use Node.js 22 Alpine as base
2+
FROM node:22-alpine
3+
4+
# Set working directory
5+
WORKDIR /usr/src/app
6+
7+
# Install system dependencies for canvas
8+
RUN apk add --no-cache build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
9+
10+
# Copy package files
11+
COPY package.json package-lock.json ./
12+
13+
# Install production dependencies
14+
RUN npm install --omit=dev
15+
16+
# Copy application code
17+
COPY . .
18+
19+
# Expose port
20+
EXPOSE 8080
21+
22+
# Default command
23+
CMD ["node", "main.js"]

‎backend/package.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,35 @@
55
"node": ">=22.0.0"
66
},
77
"dependencies": {
8-
"@nxg-org/mineflayer-physics-util": "^1.5.8",
8+
"@nxg-org/mineflayer-physics-util": "^1.8.10",
99
"@xboxreplay/xboxlive-auth": "^4.1.0",
10-
"axios": "^1.8.4",
11-
"body-parser": "^1.20.2",
12-
"canvas": "^2.11.2",
13-
"dotenv": "^16.4.5",
14-
"express": "^4.19.2",
15-
"express-rate-limit": "^7.4.0",
16-
"minecraft-data": "^3.66.0",
17-
"mineflayer": "^4.20.1",
18-
"mineflayer-collectblock": "^1.4.1",
10+
"axios": "^1.9.0",
11+
"body-parser": "^2.2.0",
12+
"canvas": "^3.1.0",
13+
"dotenv": "^16.5.0",
14+
"express": "^5.1.0",
15+
"express-rate-limit": "^7.5.0",
16+
"minecraft-data": "^3.89.0",
17+
"mineflayer": "^4.29.0",
18+
"mineflayer-collectblock": "^1.6.0",
1919
"mineflayer-elytrafly": "^1.4.6",
2020
"mineflayer-pathfinder": "^2.4.5",
2121
"mineflayer-tool": "^1.2.0",
2222
"morgan": "^1.10.0",
23-
"node-fetch": "2.7.0",
24-
"openai": "^4.55.3",
23+
"node-fetch": "3.3.2",
24+
"openai": "^4.103.0",
2525
"pem": "^1.14.8",
2626
"prismarine-auth": "^2.7.0",
27-
"prismarine-viewer": "^1.28.0",
27+
"prismarine-viewer": "^1.33.0",
2828
"prompt-sync": "^4.2.0",
29-
"rsa-json": "^0.0.2",
30-
"sharp": "^0.33.4",
29+
"rsa-json": "^0.2.1",
30+
"sharp": "^0.34.2",
3131
"vec3": "^0.1.10",
32-
"ws": "^8.18.0"
32+
"ws": "^8.18.2"
3333
},
3434
"devDependencies": {
35-
"@types/node": "^22.5.4",
36-
"typescript": "^5.6.2"
35+
"@types/node": "^22.15.21",
36+
"typescript": "^5.8.3"
3737
}, "scripts": {
3838
"start": "node main.js",
3939
"dev": "node main.js",

‎docker-compose.yml

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
version: '3.8'
2+
services:
3+
backend:
4+
build:
5+
context: ./backend
6+
dockerfile: Dockerfile
7+
ports:
8+
- "8080:8080"
9+
volumes:
10+
- ./backend:/usr/src/app
11+
- /usr/src/app/node_modules
12+
command: npm run dev
13+
environment:
14+
- NODE_ENV=development
15+
16+
frontend:
17+
build:
18+
context: ./frontend
19+
dockerfile: Dockerfile
20+
ports:
21+
- "3000:3000"
22+
volumes:
23+
- ./frontend:/usr/src/app
24+
- /usr/src/app/node_modules
25+
command: npm run dev
26+
environment:
27+
- NODE_ENV=development
28+
- NEXT_PUBLIC_API_URL=http://backend:8080
29+
# If issues arise with HTTPS/TLS, uncomment the line below if needed by the frontend for self-signed certs from backend
30+
# - NODE_TLS_REJECT_UNAUTHORIZED=0
31+
depends_on:
32+
- backend

‎frontend/Dockerfile

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Use Node.js 22 Alpine as base
2+
FROM node:22-alpine
3+
4+
# Set working directory
5+
WORKDIR /usr/src/app
6+
7+
# Copy package files
8+
COPY package.json package-lock.json ./
9+
10+
# Install dependencies
11+
RUN npm install
12+
13+
# Copy application code
14+
COPY . .
15+
16+
# Build the Next.js application
17+
RUN npm run build
18+
19+
# Expose port
20+
EXPOSE 3000
21+
22+
# Default command to start the app
23+
CMD ["npm", "start"]

‎frontend/package.json

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,60 +9,61 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@hookform/resolvers": "^3.8.0",
13-
"@radix-ui/react-alert-dialog": "^1.1.5",
14-
"@radix-ui/react-checkbox": "^1.1.4",
15-
"@radix-ui/react-collapsible": "^1.1.3",
16-
"@radix-ui/react-dialog": "^1.1.5",
17-
"@radix-ui/react-dropdown-menu": "^2.1.6",
18-
"@radix-ui/react-label": "^2.1.0",
19-
"@radix-ui/react-popover": "^1.1.3",
20-
"@radix-ui/react-scroll-area": "^1.1.3",
21-
"@radix-ui/react-select": "^2.1.3",
22-
"@radix-ui/react-separator": "^1.1.0",
23-
"@radix-ui/react-slider": "^1.2.0",
24-
"@radix-ui/react-slot": "^1.1.0",
25-
"@radix-ui/react-switch": "^1.1.0",
26-
"@radix-ui/react-toast": "^1.2.1",
27-
"@radix-ui/react-tooltip": "^1.1.2",
28-
"@tanstack/react-table": "^8.20.1",
29-
"@xyflow/react": "^12.0.4",
30-
"axios": "^1.7.3",
31-
"canvas-confetti": "^1.9.2",
32-
"class-variance-authority": "^0.7.0",
33-
"clsx": "^2.1.0",
34-
"cmdk": "^1.0.0",
12+
"@hookform/resolvers": "^5.0.1",
13+
"@radix-ui/react-alert-dialog": "^1.1.14",
14+
"@radix-ui/react-checkbox": "^1.3.2",
15+
"@radix-ui/react-collapsible": "^1.1.11",
16+
"@radix-ui/react-dialog": "^1.1.14",
17+
"@radix-ui/react-dropdown-menu": "^2.1.15",
18+
"@radix-ui/react-label": "^2.1.7",
19+
"@radix-ui/react-popover": "^1.1.14",
20+
"@radix-ui/react-scroll-area": "^1.2.9",
21+
"@radix-ui/react-select": "^2.2.5",
22+
"@radix-ui/react-separator": "^1.1.7",
23+
"@radix-ui/react-slider": "^1.3.5",
24+
"@radix-ui/react-slot": "^1.2.3",
25+
"@radix-ui/react-switch": "^1.2.5",
26+
"@radix-ui/react-toast": "^1.2.14",
27+
"@radix-ui/react-tooltip": "^1.2.7",
28+
"@tanstack/react-table": "^8.21.3",
29+
"@xyflow/react": "^12.6.4",
30+
"axios": "^1.9.0",
31+
"canvas-confetti": "^1.9.3",
32+
"class-variance-authority": "^0.7.1",
33+
"clsx": "^2.1.1",
34+
"cmdk": "^1.1.1",
3535
"cors": "^2.8.5",
36-
"framer-motion": "^11.0.8",
37-
"html-to-image": "^1.11.11",
38-
"input-otp": "^1.1.0",
39-
"ldrs": "^1.0.1",
40-
"lucide-react": "^0.488.0",
41-
"next": "^14.2.6",
42-
"next-themes": "^0.3.0",
43-
"react": "^18.2.0",
44-
"react-dom": "^18.2.0",
45-
"react-hook-form": "^7.51.0",
46-
"react-icons": "^5.0.1",
47-
"react-markdown": "^9.0.1",
48-
"react-resizable-panels": "^2.0.9",
49-
"react-skinview3d": "^5.0.3",
50-
"react-zoom-pan-pinch": "^3.4.2",
51-
"recharts": "^2.12.1",
36+
"framer-motion": "^12.12.2",
37+
"html-to-image": "^1.11.13",
38+
"input-otp": "^1.4.2",
39+
"ldrs": "^1.1.7",
40+
"lucide-react": "^0.511.0",
41+
"next": "^15.1.8",
42+
"next-themes": "^0.4.6",
43+
"react": "^19.1.0",
44+
"react-dom": "^19.1.0",
45+
"react-hook-form": "^7.56.4",
46+
"react-icons": "^5.5.0",
47+
"react-markdown": "^10.1.0",
48+
"react-resizable-panels": "^3.0.2",
49+
"react-skinview3d": "^6.0.0",
50+
"react-zoom-pan-pinch": "^3.7.0",
51+
"recharts": "^2.15.3",
5252
"socket.io-client": "^4.8.1",
53-
"vaul": "^1.0.0",
54-
"tailwind-merge": "^3.2.0",
55-
"tailwindcss-animate": "^1.0.7"
53+
"tailwind-merge": "^3.3.0",
54+
"tailwindcss-animate": "^1.0.7",
55+
"vaul": "^1.1.2"
5656
},
5757
"devDependencies": {
58-
"@types/cors": "^2.8.17",
59-
"@types/node": "^20",
60-
"@types/react": "^18",
61-
"@types/react-dom": "^18",
62-
"eslint": "^8",
63-
"eslint-config-next": "14.2.5",
58+
"@tailwindcss/postcss": "^4.1.7",
59+
"@types/cors": "^2.8.18",
60+
"@types/node": "^22",
61+
"@types/react": "^19",
62+
"@types/react-dom": "^19",
63+
"eslint": "^9",
64+
"eslint-config-next": "15.1.8",
6465
"postcss": "^8",
65-
"tailwindcss": "^3.4.4",
66+
"tailwindcss": "^4.1.7",
6667
"typescript": "^5"
6768
}
6869
}

‎frontend/postcss.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @type {import('postcss-load-config').Config} */
22
const config = {
33
plugins: {
4-
tailwindcss: {},
4+
'@tailwindcss/postcss': {},
55
},
66
};
77

‎frontend/src/components/theme-provider.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
"use client";
22

33
import * as React from "react";
4-
import { ThemeProvider as NextThemesProvider } from "next-themes";
5-
import { type ThemeProviderProps } from "next-themes/dist/types";
4+
import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes";
65

76
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
87
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

0 commit comments

Comments
 (0)