diff --git a/CHANGELOG.md b/CHANGELOG.md index d5101a16..04f26005 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 bd4be253..7aed3003 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 21d3d730..6df7cddb 100644 --- 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: diff --git a/docker-compose.yml b/docker-compose.yml index a965f356..b3e90496 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: