🧑‍💻(project) improve frontend bootstrap

We were providing a frontend development container
to the developers, but it was not working properly.
Problem of hot reload was present for Windows and
Linux users.
We stop to provide this development container and
we will provide a container connected to the build
of the frontend.
You can still access the frontend after bootstrap
on the "localhost:3000", but if you want to develop
you will have to install the frontend dependencies
localy and run the frontend in development mode.
This will be more efficient and will avoid the
problem of hot reload, and right on folder access.

CHANGELOG.md

@@ -11,7 +11,8 @@ and this project adheres to
 
 ## Changed
 
-♻️(frontend) More multi theme friendly #325
+- ♻️(frontend) More multi theme friendly #325
+- ♻️ Bootstrap frontend #257
 
 ## Fixed
 

Makefile

@@ -81,7 +81,7 @@ bootstrap: \
 	data/static \
 	create-env-files \
 	build \
-	run-frontend-dev \
+	run-with-frontend \
 	migrate \
 	demo \
 	back-i18n-compile \
@@ -90,11 +90,28 @@ bootstrap: \
 .PHONY: bootstrap
 
 # -- Docker/compose
-build: ## build the app-dev container
-	@$(COMPOSE) build app-dev --no-cache
-	@$(COMPOSE) build frontend-dev --no-cache
+build: cache ?= --no-cache
+build: ## build the project containers
+	@$(MAKE) build-backend cache=$(cache)
+	@$(MAKE) build-yjs-provider cache=$(cache)
+	@$(MAKE) build-frontend cache=$(cache)
 .PHONY: build
 
+build-backend: cache ?=
+build-backend: ## build the app-dev container
+	@$(COMPOSE) build app-dev $(cache)
+.PHONY: build-backend
+
+build-yjs-provider: cache ?=
+build-yjs-provider: ## build the y-provider container
+	@$(COMPOSE) build y-provider $(cache)
+.PHONY: build-yjs-provider
+
+build-frontend: cache ?=
+build-frontend: ## build the frontend container
+	@$(COMPOSE) build frontend-dev $(cache)
+.PHONY: build-frontend
+
 down: ## stop and remove containers, networks, images, and volumes
 	@$(COMPOSE) down
 .PHONY: down
@@ -110,6 +127,11 @@ run: ## start the wsgi (production) and development server
 	@$(WAIT_DB)
 .PHONY: run
 
+run-with-frontend: ## Start all the containers needed (backend to frontend)
+	@$(MAKE) run
+	@$(COMPOSE) up --force-recreate -d frontend-dev
+.PHONY: run-with-frontend
+
 status: ## an alias for "docker compose ps"
 	@$(COMPOSE) ps
 .PHONY: status
@@ -286,10 +308,15 @@ help:
 	@grep -E '^[a-zA-Z0-9_-]+:.*?## .*$$' $(firstword $(MAKEFILE_LIST)) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "$(GREEN)%-30s$(RESET) %s\n", $$1, $$2}'
 .PHONY: help
 
-# Front 
-run-frontend-dev: ## Install and run the frontend dev  
-	@$(COMPOSE) up --force-recreate -d frontend-dev
-.PHONY: run-frontend-dev
+# Front
+frontend-install: ## install the frontend locally
+	cd $(PATH_FRONT_IMPRESS) && yarn
+.PHONY: frontend-install
+
+run-frontend-development: ## Run the frontend in development mode
+	@$(COMPOSE) stop frontend-dev
+	cd $(PATH_FRONT_IMPRESS) && yarn dev
+.PHONY: run-frontend-development
 
 frontend-i18n-extract: ## Extract the frontend translation inside a json to be used for crowdin
 	cd $(PATH_FRONT) && yarn i18n:extract
@@ -314,7 +341,7 @@ start-tilt: ## start the kubernetes cluster using kind
 	tilt up -f ./bin/Tiltfile
 .PHONY: build-k8s-cluster
 
-VERSION_TYPE ?= minor
+bump-packages-version: VERSION_TYPE ?= minor
 bump-packages-version: ## bump the version of the project - VERSION_TYPE can be "major", "minor", "patch"
 	cd ./src/mail && yarn version --no-git-tag-version --$(VERSION_TYPE)
 	cd ./src/frontend/ && yarn version --no-git-tag-version --$(VERSION_TYPE)

README.md

@@ -37,27 +37,48 @@ The easiest way to start working on the project is to use GNU Make:
 $ make bootstrap FLUSH_ARGS='--no-input'
 ```
 
-Then you can access to the project in development mode by going to http://localhost:3000.
+This command builds the `app` container, installs dependencies, performs
+database migrations and compile translations. It's a good idea to use this
+command each time you are pulling code from the project repository to avoid
+dependency-releated or migration-releated issues.
+
+Your Docker services should now be up and running 🎉
+
+You can access to the project by going to http://localhost:3000.
 You will be prompted to log in, the default credentials are:
 ```bash
 username: impress
 password: impress
 ```
+
+📝 Note that if you need to run them afterwards, you can use the eponym Make rule:
+
+```bash
+$ make run-with-frontend
+```
+
 ---
 
-This command builds the `app` container, installs dependencies, performs
-database migrations and compile translations. It's a good idea to use this
-command each time you are pulling code from the project repository to avoid
-dependency-releated or migration-releated issues.
+⚠️ For the frontend developper, it is often better to run the frontend in development mode locally. 
+To do so, install the frontend dependencies with the following command:
 
-Your Docker services should now be up and running 🎉
+```bash
+$ make frontend-install
+```
+And run the frontend locally in development mode with the following command:
+
+```bash
+$ make run-frontend-development
+```
 
-Note that if you need to run them afterwards, you can use the eponym Make rule:
+To start all the services, except the frontend container, you can use the following command:
 
 ```bash
-$ make run-frontend-dev
+$ make run
 ```
 
+---
+
 ### Adding content
 
 You can create a basic demo site by running:

docker-compose.yml

@@ -119,13 +119,20 @@ services:
     depends_on:
       - keycloak
 
-  nginx-front:
-    image: nginx:1.25
+  frontend-dev:
+    user: "${DOCKER_USER:-1000}"
+    build: 
+      context: .
+      dockerfile: ./src/frontend/Dockerfile
+      target: frontend-production
+      args:
+        API_ORIGIN: "http://localhost:8071"
+        Y_PROVIDER_URL: "ws://localhost:4444"
+        MEDIA_URL: "http://localhost:8083"
+        SW_DEACTIVATED: "true"
+    image: impress:frontend-development
     ports:
       - "3000:3000"
-    volumes:
-      - ./src/frontend/apps/impress/conf/default.conf:/etc/nginx/conf.d/default.conf
-      - ./src/frontend/apps/impress/out:/usr/share/nginx/html
 
   dockerize:
     image: jwilder/dockerize
@@ -161,21 +168,6 @@ services:
       - /home/frontend/servers/y-provider/node_modules/
       - /home/frontend/servers/y-provider/dist/
 
-  frontend-dev:
-    user: "${DOCKER_USER:-1000}"
-    build: 
-      context: .
-      dockerfile: ./src/frontend/Dockerfile
-      target: impress-dev
-    ports:
-      - "3000:3000"
-    volumes:
-      - ./src/frontend/apps/impress:/home/frontend/apps/impress
-      - /home/frontend/node_modules/
-    depends_on:
-      - y-provider
-      - celery-dev
-
   kc_postgresql:
     image: postgres:14.3
     ports: