rework of front processes.

skilld-labs · Nov 12, 2019 · 241eacb · 241eacb
1 parent cfd53a3
commit 241eacb
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 37 deletions.
diff --git a/.env.default b/.env.default
@@ -11,7 +11,7 @@ [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
 IMAGE_DRIVER=zenika/alpine-chrome
 ADD_PHP_EXT=
 MAIN_DOMAIN_NAME=docker.localhost

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -14,13 +14,15 @@ image: skilldlabs/php:72
 
 variables:
   GIT_DEPTH: "3"
+  THEME_PATH: "web/themes/custom/test_project"
 
 before_script:
   - date
   - pwd
 
 stages:
   - sniffers
+  - prepare
   - deploy
   - tests
   - reports
@@ -37,6 +39,23 @@ 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
+
 sniffers:phpcs:
   stage: sniffers
   image: skilldlabs/docker-phpcs-drupal
@@ -68,6 +87,27 @@ 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/
+
 .job_deploy_commit_template: &job_deploy_commit
   stage: deploy
   before_script:
@@ -99,13 +139,16 @@ deploy:review:
     - echo "INSTALL_DEV_DEPENDENCIES=TRUE" >> .env.default
     - docker --version
     - docker-compose --version
-    - make all
+    - make all_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
+
 
 stop_review:
   <<: *job_deploy_commit

diff --git a/Makefile b/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 info localize hooksymlink info
+## Full site install from the scratch without front task(it managed in .gitlab-ci).
+all_ci: | provision composer si info 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:

diff --git a/README.md b/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
 
@@ -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
 

diff --git a/scripts/makefile/front.mk b/scripts/makefile/front.mk
@@ -1,15 +1,40 @@
-# Execute front container function
-front = docker run --rm -u $(CUID):$(CGID) -v $(shell pwd)/web/themes/custom/$(THEME_NAME):/work $(IMAGE_FRONT) ${1}
+# Evaluate recursively.
+CUID ?= $(LOCAL_UID)
+CGID ?= $(LOCAL_GID)
+CLEAR_FRONT_PACKAGES?=yes
+FRONT_PORT?=65200
+
+# Execute front container function.
+front = 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:
+ifeq ($(CLEAR_FRONT_PACKAGES), yes)
+	@echo "Clean of node_modules... To skip this action please set CLEAR_FRONT_PACKAGES=no in .env file"
+	$(call front, rm -rf /app/node_modules)
+endif
 
-## Build front tasks
 front:
-	@echo "Building front tasks..."
+	@echo "Running front tasks..."
 	docker pull $(IMAGE_FRONT)
-	$(call front, bower install)
-	$(call front)
-	$(call php-0, rm -rf web/themes/custom/$(THEME_NAME)/node_modules)
+	$(call front, yarn install --prod --ignore-optional --check-files)
+	$(call front, yarn build --verbose)
+	make clear-front
 
 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 front, yarn install --prod --ignore-optional --check-files)
+	$(call front, yarn lint-fix)
+
+storybook:
+	@echo "Running storybook..."
+	docker pull $(IMAGE_FRONT)
+	$(call front, yarn install --ignore-optional --check-files)
+	$(call front, yarn storybook -p $(FRONT_PORT))