🚀(docker) dockerize frontend dev

Dockerize the frontend development environment
to make it easy to display the frontend
development environment in the browser.

We don't mix it with the command `make run` to
let it kind of optional to run the frontend
in a docker container. We let it optional because
the hot reload doesn't work well in the docker
container. The volume synch make it a bit slower
as well. So, we let the developer decide to run
the frontend in a docker container or not.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 - Manage the document's right (#75) 
 - Update document (#68)
 - Remove document (#68)
+- (docker) dockerize dev frontend (#63)
 
 ## Changed
 

Makefile

@@ -82,13 +82,12 @@ bootstrap: \
 	data/static \
 	create-env-files \
 	build \
-	run \
+	run-frontend-dev \
 	migrate \
 	demo \
 	back-i18n-compile \
 	mails-install \
-	mails-build \
-	install-front-impress
+	mails-build
 .PHONY: bootstrap
 
 # -- Docker/compose
@@ -105,10 +104,7 @@ logs: ## display app-dev logs (follow mode)
 .PHONY: logs
 
 run: ## start the wsgi (production) and development server
-	@$(COMPOSE) up --force-recreate -d nginx
-	@$(COMPOSE) up --force-recreate -d app-dev
 	@$(COMPOSE) up --force-recreate -d celery-dev
-	@$(COMPOSE) up --force-recreate -d keycloak
 	@$(COMPOSE) up --force-recreate -d y-webrtc-signaling
 	@echo "Wait for postgresql to be up..."
 	@$(WAIT_DB)
@@ -301,13 +297,9 @@ help:
 .PHONY: help
 
 # Front 
-install-front-impress: ## Install the frontend dependencies of app Impress  
-	cd $(PATH_FRONT_IMPRESS) && yarn
-.PHONY: install-front-impress
-
-run-front-impress: ## Start app Impress  
-	cd $(PATH_FRONT_IMPRESS) && yarn dev
-.PHONY: run-front-impress
+run-frontend-dev: ## Install and run the frontend dev  
+	@$(COMPOSE) up --force-recreate -d frontend-dev
+.PHONY: run-frontend-dev
 
 frontend-i18n-extract: ## Extract the frontend translation inside a json to be used for crowdin
 	cd $(PATH_FRONT) && yarn i18n:extract

README.md

@@ -31,10 +31,7 @@ The easiest way to start working on the project is to use GNU Make:
 $ make bootstrap FLUSH_ARGS='--no-input'
 ```
 
-Then you can run the following command to start the project in development mode:
-```bash
-$ make run-front-impress
-```
+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
@@ -52,7 +49,7 @@ 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:
 
 ```bash
-$ make run
+$ make run-frontend-dev
 ```
 
 ### Adding content

docker-compose.yml

@@ -65,6 +65,7 @@ services:
         - mailcatcher
         - redis
         - createbuckets
+        - nginx
   
   celery-dev:
     user: ${DOCKER_USER:-1000}
@@ -118,7 +119,6 @@ services:
     volumes:
       - ./docker/files/etc/nginx/conf.d:/etc/nginx/conf.d:ro
     depends_on:
-      - app
       - keycloak
 
   dockerize:
@@ -155,6 +155,20 @@ services:
       - /home/frontend/apps/y-webrtc-signaling/node_modules/
       - /home/frontend/apps/y-webrtc-signaling/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-webrtc-signaling
+      - celery-dev
 
   kc_postgresql:
     image: postgres:14.3

src/frontend/Dockerfile

@@ -39,6 +39,7 @@ COPY ./src/frontend/packages/eslint-config-impress/package.json ./packages/eslin
 
 RUN yarn install --frozen-lockfile
 
+COPY .dockerignore ./.dockerignore
 COPY ./src/frontend/ .
 
 ### ---- Front-end builder image ----
@@ -46,6 +47,14 @@ FROM frontend-deps as impress
 
 WORKDIR /home/frontend/apps/impress
 
+FROM frontend-deps as impress-dev
+
+WORKDIR /home/frontend/apps/impress
+
+EXPOSE 3000
+
+CMD [ "yarn", "dev"]
+
 # Tilt will rebuild impress target so, we dissociate impress and impress-builder 
 # to avoid rebuilding the app at every changes.
 FROM impress as impress-builder