From 789879a9cccbb23fb64899b9d5d00f8139859757 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 16 Sep 2024 14:25:42 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB(project)=20im?= =?UTF-8?q?prove=20frontend=20bootstrap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 3 ++- Makefile | 45 ++++++++++++++++++++++++++++++++++++--------- README.md | 37 +++++++++++++++++++++++++++++-------- docker-compose.yml | 32 ++++++++++++-------------------- 4 files changed, 79 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5101a16f..04f260057 100644 --- 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 diff --git a/Makefile b/Makefile index bd4be2534..7aed3003c 100644 --- a/Makefile +++ b/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) diff --git a/README.md b/README.md index 21d3d7305..6df7cddb8 100644 --- a/README.md +++ b/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: diff --git a/docker-compose.yml b/docker-compose.yml index a965f3561..b3e904969 100644 --- 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: