Improved README + Easier configuration.

.env

@@ -0,0 +1,3 @@
+API_PORT=5600
+API_ADDRESS=192.168.2.125
+CLIENT_PORT=2500

README.md

@@ -44,15 +44,25 @@ The objective is to have a self-hosted place to keep useful links in one place,
 
 ## Installation
 
-### Using Docker Compose (Recommended)
+### Using Docker Compose V2 (Recommended)
 
 1. Make sure docker is installed.
 
 2. Clone this repository.
 
-4. [Optional] If you want to use this app across the network change `REACT_APP_API_HOST` in docker-compose.yml with the computer IP and API port.
+3. Head to the main folder and run `docker compose up -d`.
 
-3. **This project is using `docker compose V2`** so head to the main folder and run `docker compose up -d`.
+The app will be deployed on port 3000.
+
+### Configuration
+To configure the app create a `.env` file (in the main folder), here are the available variables:
+```
+CLIENT_PORT=2500           # Default: 3000
+API_PORT=5500              # Default: 5000
+API_ADDRESS=192.168.1.14   # Default: localhost*
+```
+
+> *If you want to use this app across the network set `API_ADDRESS` as the computer (where LinkWarden is hosted) IP address.
 
 ### Manual Setup
 

api/Dockerfile

@@ -25,5 +25,5 @@ RUN chown -R node:node /home/node /media
 
 USER node
 
-EXPOSE 5500
+EXPOSE 5000
 CMD node server.js

api/config.js

@@ -1,4 +1,4 @@
-module.exports.port = process.env.PORT || 5500;
+module.exports.port = process.env.PORT || 5000;
 module.exports.URI = process.env.MONGODB_URI || "mongodb://localhost:27017"; // URI
 module.exports.database = process.env.DB_NAME || "sample_db"; // Database name
 module.exports.collection = process.env.COLLECTION_NAME || "list"; // Collection name

docker-compose.yml

@@ -8,7 +8,7 @@ services:
     volumes:
       - ./mongo:/data/db
     ports:
-      - 27017:27017
+      - 27017
     restart: unless-stopped
 
   link-warden-api:
@@ -19,7 +19,7 @@ services:
     volumes:
       - ./api:/home/node
     ports:
-      - 5500:5500
+      - ${API_PORT:-5000}:5000
     restart: unless-stopped
     depends_on:
       - mongo
@@ -28,13 +28,13 @@ services:
     build: .
     environment:
       # - DANGEROUSLY_DISABLE_HOST_CHECK=true
-      - REACT_APP_API_HOST=http://localhost:5500
+      - REACT_APP_API_HOST=http://${API_ADDRESS:-localhost}:${API_PORT:-5000}
     command: npm run go
     volumes:
       - /home/node/node_modules
       - .:/home/node
     ports:
-      - 3000:3000
+      - ${CLIENT_PORT:-3000}:3000
     restart: unless-stopped
     depends_on:
       - link-warden-api

src/config.js

@@ -1 +1 @@
-export const API_HOST = process.env.REACT_APP_API_HOST || "http://localhost:5500"; // API full address
+export const API_HOST = process.env.REACT_APP_API_HOST || "http://localhost:5000"; // API full address

src/styles/List.css

@@ -94,7 +94,8 @@
   margin: 20px;
   width: 100px;
   height: 100px;
-  transition: opacity 0.3s;
+  transition: opacity 0.3s ease-in-out;
+  will-change: transform, opacity;
 }
 
 .list-entity-content {