🧑‍💻(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.
2024-09-16 14:25:42 +02:00
parent 52c52d53b7
commit 789879a9cc
4 changed files with 81 additions and 40 deletions
--- a/CHANGELOG.md
+++ b/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

--- a/45
+++ b/45
@@ -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)
--- a/README.md
+++ b/README.md
@@ -37,14 +37,6 @@ 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.
-You will be prompted to log in, the default credentials are:
-```bash
-username: impress
-password: impress
-```
---
-
 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
@@ -52,12 +44,41 @@ dependency-releated or migration-releated issues.

 Your Docker services should now be up and running 🎉

-Note that if you need to run them afterwards, you can use the eponym Make rule:
+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-frontend-dev
+$ make run-with-frontend
 ```

+---
+
+⚠️ 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:
+
+```bash
+$ make frontend-install
+```
+And run the frontend locally in development mode with the following command:
+
+```bash
+$ make run-frontend-development
+```
+
+To start all the services, except the frontend container, you can use the following command:
+
+```bash
+$ make run
+```
+
+---
+
 ### Adding content

 You can create a basic demo site by running:
--- a/docker-compose.yml
+++ b/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: