Rework of front processes

.env.default

@@ -2,7 +2,7 @@ COMPOSE_FILE=./docker/docker-compose.yml:./docker/docker-compose.override.yml
 COMPOSE_PROJECT_NAME=projectname
 PROFILE_NAME=sdd
 MODULES=project_default_content better_normalizers default_content hal serialization
-THEME_NAME=
+THEME_NAME=N/A
 SITE_NAME=Example
 [email protected]
 ADMIN_NAME=admin
@@ -11,7 +11,8 @@ [email protected]
 PROJECT_INSTALL=
 IMAGE_PHP=skilldlabs/php:73-fpm
 IMAGE_NGINX=skilldlabs/nginx:1.16
-IMAGE_FRONT=skilldlabs/frontend:zen
+IMAGE_FRONT=node:lts-alpine
+CLEAR_FRONT_PACKAGES=no
 IMAGE_DRIVER=zenika/alpine-chrome
 ADD_PHP_EXT=
 MAIN_DOMAIN_NAME=docker.localhost

.gitlab-ci.yml

@@ -14,13 +14,15 @@ image: skilldlabs/php:72
 
 variables:
   GIT_DEPTH: "3"
+  THEME_PATH: "" # update to enable front jobs
 
 before_script:
   - date
   - pwd
 
 stages:
   - sniffers
+  - prepare
   - deploy
   - tests
   - reports
@@ -37,6 +39,26 @@ sniffers:compose:
   - composer -vvv -V
   - time composer validate --profile --strict
 
+sniffers:front:
+  cache:
+    key: "front-packages"
+    paths:
+      - ${THEME_PATH}/node_modules/
+  stage: sniffers
+  image: node:lts-alpine
+  before_script:
+  - date
+  - pwd
+  - node -v
+  - yarn -v
+  script:
+    - cd ${THEME_PATH}
+    - yarn install --no-optional --prod
+    - yarn run lint
+  only:
+    variables:
+      - $THEME_PATH
+
 sniffers:phpcs:
   stage: sniffers
   image: skilldlabs/docker-phpcs-drupal
@@ -68,6 +90,30 @@ sniffers:sonarqube:
   - master
   allow_failure: true
 
+prepare:nodejs:
+  cache:
+    key: "front-packages"
+    paths:
+      - ${THEME_PATH}/node_modules/
+  stage: prepare
+  image: node:lts-alpine
+  before_script:
+  - date
+  - pwd
+  - node -v
+  - yarn -v
+  script:
+  - cd ${THEME_PATH}
+  - yarn install --no-optional --prod
+  - yarn run build --verbose
+  artifacts:
+    name: "$CI_COMMIT_REF_NAME"
+    paths:
+      - ${THEME_PATH}/dist/
+  only:
+    variables:
+      - $THEME_PATH
+
 .job_deploy_commit_template: &job_deploy_commit
   stage: deploy
   before_script:
@@ -99,13 +145,15 @@ deploy:review:
     - echo "INSTALL_DEV_DEPENDENCIES=TRUE" >> .env.default
     - docker --version
     - docker-compose --version
-    - make all
+    - make all MAKE_ENV=ci
   after_script:
     - echo "Started ${CI_ENVIRONMENT_URL} composition in ${BUILD_DIR} from Makefile."
   environment:
     url: https://${CI_ENVIRONMENT_SLUG}-${CI_PROJECT_PATH_SLUG}.${REVIEW_DOMAIN}
     name: review/$CI_COMMIT_REF_NAME
     on_stop: stop_review
+  dependencies:
+    - prepare:nodejs
   when: manual
   allow_failure: false
 

Makefile

@@ -30,7 +30,9 @@ php = docker-compose exec -T --user $(CUID):$(CGID) php ${1}
 php-0 = docker-compose exec -T php ${1}
 
 ## Full site install from the scratch
-all: | provision composer si localize hooksymlink info
+all: | provision composer front si localize hooksymlink info
+## Full site install from the scratch without front task(it managed in .gitlab-ci).
+all_ci: | provision composer si localize hooksymlink info
 
 ## Provision enviroment
 provision:
@@ -66,8 +68,6 @@ else
 endif
 	$(call php, composer drupal-scaffold)
 	$(call php, composer create-required-files)
-#	Uncomment this string to build front separately. See scripts/makefile/front.mk
-#	make -s front
 
 ## Install drupal
 si:
@@ -126,6 +126,9 @@ endif
 	make -s down
 	@for i in $(DIRS); do if [ -d "$$i" ]; then echo "Removing $$i..."; docker run --rm -v $(shell pwd):/mnt $(IMAGE_PHP) sh -c "rm -rf /mnt/$$i"; fi; done
 	if [ -d $(DB_DATA_DIR) ]; then echo "Removing mysql data $(DB_DATA_DIR) ..."; docker run --rm --user 0:0 -v $(shell pwd):/mnt/2rm $(IMAGE_PHP) sh -c "rm -rf /mnt/2rm/$(DB_DATA_DIR)"; fi
+ifeq ($(CLEAR_FRONT_PACKAGES), yes)
+	make clear-front
+endif
 
 ## Enable development mode and disable caching
 dev:

README.md

@@ -2,19 +2,21 @@
 
 ---
 
-* [Overview](#overview)
-* [What is this?](#what-is-this)
-* [What is this not?](#what-is-this-not)
-* [Quickstart](#quickstart)
-  + [Used variables](#used-variables)
-  + [Persistent Mysql](#persistent-mysql)
-  + [Network](#network)
-* [Usage](#usage)
-  + [Additional goals](#additional-goals)
-* [Support](#support)
-* [Drush commands](#drush-commands)
-* [Troubleshooting](#troubleshooting)
-* [License](#license)
+- [Skilld docker container](#Skilld-docker-container)
+  - [Overview](#Overview)
+  - [What is this?](#What-is-this)
+  - [What is this not?](#What-is-this-not)
+  - [Quickstart](#Quickstart)
+      - [Used variables](#Used-variables)
+      - [Persistent Mysql](#Persistent-Mysql)
+      - [Network](#Network)
+  - [Usage](#Usage)
+      - [Additional goals](#Additional-goals)
+  - [Support](#Support)
+  - [Drush commands](#Drush-commands)
+  - [Troubleshooting](#Troubleshooting)
+  - [Git hooks](#Git-hooks)
+  - [License](#License)
 
 
 ## Overview
@@ -40,8 +42,9 @@
 * Copy **.env.default** to **.env**, more information about enviroment file can be found <a href="https://docs.docker.com/compose/env-file/" target="_blank">docs.docker.com</a>
 * Copy **docker-compose.override.yml.default** to **docker-compose.override.yml**, update parts you want to overwrite.
   * **docker-compose.yml** contains the base requirements of a working Drupal site. It should not be updated.
+* Update **.gitlab-ci.yml** `variables` section THEME_PATH to make front gitlab CI works.
 * Run `make all`
- 
+
 
 #### Used variables
 
@@ -51,7 +54,7 @@
 | COMPOSE_PROJECT_NAME   | Your project name | - |
 | PROFILE_NAME   | Profile used for site install | sdd |
 | MODULES   | Additional modules to enable after site install | project_default_content |
-| THEME_NAME  | Theme name used for frontend | - |
+| THEME_NAME  | Name of theme directory in /web/themes | `N/A` |
 | SITE_NAME  | Site name | Example |
 | SITE_MAIL  | Site e-mail address | [email protected] |
 | ADMIN_NAME  | Admin username | admin |
@@ -66,23 +69,23 @@
 | MAIN_DOMAIN_NAME | Domain name used for traefik | `docker.localhost` |
 | DB_URL | Url to connect to database | `sqlite:///dev/shm/d8.sqlite` |
 | DB_DATA_DIR | Full path to database storage | `/dev/shm` |
-
+| CLEAR_FRONT_PACKAGES | Set it to `no` to keep `/node_nodules` directory in theme after `make front` task to save build time. | yes |
 
 #### Persistent Mysql
 
 * By default sqlite storage used, which is created inside php container, if you need persistent data to be saved:
-  * Update `docker-compose.override.yml`, set 
+  * Update `docker-compose.override.yml`, set
   ```yaml
   php:
      depends_on:
        - mysql
-  ``` 
-  and update mysql container part 
+  ```
+  and update mysql container part
   ```yaml
   mysql:
     image: percona:5.7.22
   ...
-  ``` 
+  ```
   * Update `.env` file, and set `DB_URL=mysql://d8:d8@mysql/d8`
 
 #### Network
@@ -108,27 +111,28 @@ networks:
 * `make exec` - `docker exec` into php container.
 * `make exec0` - `docker exec` into php container as root.
 * `make dev` - Devel + kint setup, and config for Twig debug mode, disable aggregation.
-* `make drush [command]` - execute drush command. 
+* `make drush [command]` - execute drush command.
 * `make phpcs` - Check codebase with `phpcs` sniffers to make sure it conforms https://www.drupal.org/docs/develop/standards.
 * `make phpcbf` - Fix codebase according to Drupal standards https://www.drupal.org/docs/develop/standards.
 * `make front` - Builds frontend tasks.
 * `make lint` - Runs frontend linters.
+* `make storybook` - Runs storybook in current theme.
 
 #### Additional goals
 
 * If you need to add your custom/specific project goal, create new file in `scripts/makefile/myfile.mk` and describe goal inside. Example can be found at <a href="scripts/makefile/backup.mk">`scripts/makefile/backup.mk`</a>
 
 ## Support
 
-* This project is supported by <a href="http://www.skilld.fr">© Skilld SAS</a> 
+* This project is supported by <a href="http://www.skilld.fr">© Skilld SAS</a>
 
 ## Drush commands
 
 * You can run any drush command `make drush [command -- -argument]`
 
 ## Troubleshooting
 
-* Use our <a href="https://github.com/skilld-labs/skilld-docker-container/issues">issue queue</a>, which is public, to search or add new issues.  
+* Use our <a href="https://github.com/skilld-labs/skilld-docker-container/issues">issue queue</a>, which is public, to search or add new issues.
 
 ## Git hooks
 

scripts/makefile/front.mk

@@ -1,15 +1,37 @@
-# Execute front container function
-front = docker run --rm -u $(CUID):$(CGID) -v $(shell pwd)/web/themes/custom/$(THEME_NAME):/work $(IMAGE_FRONT) ${1}
+FRONT_PORT?=65200
+
+# Execute front container function.
+frontexec = docker run \
+	--rm \
+	--init \
+	-p $(FRONT_PORT):$(FRONT_PORT) \
+	-u $(CUID):$(CGID) \
+	-v $(shell pwd)/web/themes/custom/$(THEME_NAME):/app \
+	--workdir /app \
+	$(IMAGE_FRONT) ${1}
+
+clear-front:
+	@echo "Clean of node_modules and compiled dist... To skip this action please set CLEAR_FRONT_PACKAGES=no in .env file"
+	$(call frontexec, rm -rf /app/node_modules /app/dist)
 
-## Build front tasks
 front:
-	@echo "Building front tasks..."
-	docker pull $(IMAGE_FRONT)
-	$(call front, bower install)
-	$(call front)
-	$(call php-0, rm -rf web/themes/custom/$(THEME_NAME)/node_modules)
+	@if [ -d $(shell pwd)/web/themes/custom/$(THEME_NAME) ]; then \
+		echo "Theme directory found. Running front tasks..."; \
+		docker pull $(IMAGE_FRONT); \
+		$(call frontexec, yarn install --prod --ignore-optional --check-files); \
+		$(call frontexec, yarn build --verbose); \
+	else \
+		echo "Theme directory not found. Skipping front tasks."; \
+	fi
 
 lint:
-	@echo "Running linters..."
-	$(call front, gulp lint)
-	$(call php-0, rm -rf web/themes/custom/$(THEME_NAME)/node_modules)
+	@echo "Running theme linters with fix..."
+	docker pull $(IMAGE_FRONT)
+	$(call frontexec, yarn install --prod --ignore-optional --check-files)
+	$(call frontexec, yarn lint-fix)
+
+storybook:
+	@echo "Running storybook..."
+	docker pull $(IMAGE_FRONT)
+	$(call frontexec, yarn install --ignore-optional --check-files)
+	$(call frontexec, yarn storybook -p $(FRONT_PORT))

scripts/makefile/tests.mk

@@ -148,5 +148,5 @@ endif
 sniffers: | clang compval phpcs newlineeof
 
 ## Run all tests & validations (including sniffers)
-tests: | sniffers behat cinsp drupalcheckval watchdogval statusreportval
+tests: | sniffers cinsp drupalcheckval watchdogval statusreportval behat