feature: add port binding for backend and frontend

README.md

@@ -49,7 +49,7 @@ There are two different images for the service:
 * `msdeluise/plant-it-frontend`
 
 This images can be use indipendently, or they can be use in a docker-compose file.
-For the sake of simplicity, the provided docker-compose.yml file is reported here:
+For the sake of simplicity, the provided `docker-compose.yml` file is reported here:
 ```
 version: "3"
 name: plant-it
@@ -94,13 +94,56 @@ Run the docker compose file (`docker compose -f <file> up -d`), then the service
  Please notice that running the `docker-compose` file from another machine change the way to connect to the server. For example, if you run the `docker-compose` on the machine with the local IP `192.168.1.100` then you have to change the backend url in the [API_URL](#configuration) variable to `http://192.168.1.100:8080/api`. In this case, the frontend of the system will be available at `http://192.168.1.100:8080`, and the backend will be available at `http://192.168.1.100:8080/api`.
 </details>
 
+#### Change port binding
+##### With reverse proxy
+The `reverse-proxy` service in the provided docker-compose file is used only to route both backend and frontend request on the same port (`8080` by default).
+If you want to continue having this behaviour but change the used port you can modify the port binding in the service declaration as follow: `"<YOUR_PORT>:80"`.
+
+##### Without reverse proxy
+If you don't want to use the reverse proxy, you can use the provided `docker-compose-without-reverse-proxy.yml` file. For the sake of simplicity, the file is reported here:
+```
+version: "3"
+
+name: plant-it
+services:
+ backend:
+ image: msdeluise/plant-it-backend:latest
+ env_file: backend.env
+ depends_on:
+ - db
+ - cache
+ restart: unless-stopped
+ volumes:
+ - "./upload-dir:/upload-dir"
+ ports:
+ - "8080:8080"
+
+ db:
+ image: mysql:latest
+ restart: always
+ env_file: backend.env
+
+ cache:
+ image: redis:latest
+ restart: always
+
+ frontend:
+ image: msdeluise/plant-it-frontend:latest
+ env_file: frontend.env
+ links:
+ - backend
+ ports:
+ - "3000:3000"
+```
+Here you can change the port binding both for the frontend and the backend service.
+
 ### Setup without docker
 The application was developed with being used with Docker in mind, thus this method is not preferred.
 
 #### Requirements
-* [JDK 19+](https://openjdk.org/)
+* [JDK 20+](https://openjdk.org/)
 * [MySQL](https://www.mysql.com/)
-* [React](https://reactjs.org/)
+* [ReactJS](https://reactjs.org/)
 
 #### Run
 1. Be sure to have the `mysql` database up and running
@@ -112,6 +155,15 @@ The application was developed with being used with Docker in mind, thus this met
 Then, the frontend of the system will be available at `http://localhost:3000`, and the backend at `http://localhost:8085/api`.
 
 
+#### Change port binding
+If you don't want to use the default ports (`3000` for the frontend and `8080` for the backend), you can modify the following [configuration properties](#configuration):
+* in the `backend.env` file:
+ * `API_PORT`: port to serve the backend
+* in the `frontend.env` file:
+ * `PORT`: port to serve the frontend
+ * `API_URL`: address of the API, e.g. `http//localhost:<API_PORT>/api`
+
+
 ## Configuration
 
 There are 2 configuration file available:
@@ -128,19 +180,21 @@ There are 2 configuration file available:
  JWT_EXP=1
  
  USERS_LIMIT=-1 # including the admin account, so <= 0 if undefined, >= 2 if defined
- UPLOAD_DIR= # path to the directory used to store uploaded images, if on docker deployment leave as it is and change the volume binding if needed
+ UPLOAD_DIR= # path to the directory used to store uploaded images, if on docker deployment leave as it is and change the volume binding in the docker-compose file if needed
  
  CACHE_TTL=86400
  CACHE_HOST=cache
  CACHE_PORT=6379
  
  TRAFLE_KEY= # put you key here, otherwise the "search" feature will include only user generated species
+
  FRONTEND_URL=http://localhost:3000 # CORS allowed origin
  ```
  Change the properties values according to your system.
 
 * `deployment/frontend.env`: file containing the configuration for the frontend. An example of content is the following:
  ```
+ PORT=3000 # port that will serve the frontend, if on docker deployment leave as it is and change the port binding in the docker-compose file if needed
  API_URL=http://localhost:8080/api
  
  PAGE_SIZE=25

backend/src/main/resources/application-dev.properties

@@ -63,7 +63,7 @@ jwt.cookie.name = plant-it
 #
 # Server config
 #
-server.port = 8085
+server.port = ${API_PORT:8085}
 server.servlet.context-path = /api
 server.cors.allowed-origins = ${FRONTEND_URL:http://localhost:3000}
 

backend/src/main/resources/application-integration.properties

@@ -50,7 +50,7 @@ jwt.cookie.name = plant-it
 #
 # Server config
 #
-server.port = 8090
+server.port = ${API_PORT:8090}
 server.address = 0.0.0.0
 server.cors.allowed-origins = ${FRONTEND_URL:http://localhost:3000}
 
@@ -64,9 +64,9 @@ app.version = @project.version@
 #
 # System config
 #
-users.max = -1
+users.max = ${USERS_LIMIT:-1}
 trefle.key =
-upload.location = /tmp/plant-it
+upload.location = ${UPLOAD_DIR:/tmp/plant-it}
 
 
 #

backend/src/main/resources/application.properties

@@ -44,7 +44,7 @@ jwt.cookie.name = plant-it
 #
 # Server config
 #
-server.port = 8080
+server.port = ${API_PORT:8080}
 server.servlet.context-path = /api
 server.cors.allowed-origins = ${FRONTEND_URL:http://localhost:3000}
 

deployment/backend.env

@@ -9,10 +9,10 @@ JWT_SECRET=putTheSecretHere
 JWT_EXP=1
 
 USERS_LIMIT=2 # including the admin account, so <= 0 if undefined, >= 2 if defined
+API_PORT=8080
 
 CACHE_TTL=86400
 CACHE_HOST=cache
 CACHE_PORT=6379
 
 FRONTEND_URL=http://localhost:3000
-

deployment/docker-compose-without-reverse-proxy.yml

@@ -0,0 +1,32 @@
+version: "3"
+
+name: plant-it
+services:
+ backend:
+ image: msdeluise/plant-it-backend:latest
+ env_file: backend.env
+ depends_on:
+ - db
+ - cache
+ restart: unless-stopped
+ volumes:
+ - "./upload-dir:/upload-dir"
+ ports:
+ - "8080:8080"
+
+ db:
+ image: mysql:latest
+ restart: always
+ env_file: backend.env
+
+ cache:
+ image: redis:latest
+ restart: always
+
+ frontend:
+ image: msdeluise/plant-it-frontend:latest
+ env_file: frontend.env
+ links:
+ - backend
+ ports:
+ - "3000:3000"

deployment/frontend.env

@@ -1,6 +1,6 @@
+PORT=3000
 API_URL=http://localhost:8080/api
 
 PAGE_SIZE=25
 
 BROWSER=none
-

frontend/.env

@@ -1,2 +1,4 @@
+PORT=3000
 API_URL=http://localhost:8085/api
-PAGE_SIZE=25
+
+PAGE_SIZE=25