Improve dx

.github/workflows/test.yml

@@ -27,6 +27,8 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
       - name: Initialize environment
         run: "task init ${{ env.TASK_OUTPUT }}"
+      - name: Prepare CMS for development
+        run: "task cms:dev ${{ env.TASK_OUTPUT }}"
       - name: Link Design system to React components
         run: "task react:link ${{ env.TASK_OUTPUT }}"
       - name: Link Design system and React components to CMS
@@ -98,8 +100,6 @@ jobs:
         # a difference. Reverse this using !.
         run: |
           ! diff ${{ runner.temp }}/react/version.before.json ${{ runner.temp }}/react/version.after.json
-      - name: Reset environment
-        run: "task reset ${{ env.TASK_OUTPUT }}"
       - name: Setup tmate session to support debugging if enabled
         if:  runner.debug == '1'
         uses: mxschmitt/action-tmate@v3

README.md

@@ -36,15 +36,15 @@ three projects with direct links between each of them.
 
 ### React component development
 
-1. Run `task dev:react --watch` to start the development environment
+1. Run `task dev:react` to start the development environment
 2. See that Storybook for the React components are opened in a browser
 3. Make a change in the local `design-system` project
 4. See that the change triggers a build of the design system
 5. See the change is reflected in the Storybook browser window
 
-### CMS development
+### CMS and React component development
 
-1. Run `task dev:cms-react --watch` to start the development environment
+1. Run `task dev:cms-react` to start the development environment
 2. Open a browser to see the CMS installation
 3. Make a change in the local `design-system` project
 4. See that the change triggers a build of the design system

Taskfile.yml

@@ -15,7 +15,7 @@ tasks:
       - react:clone
       - cms:clone
     cmds:
-      - task: reset
+      - task: install
 
   cleanup:
     cmds:
@@ -29,17 +29,27 @@ tasks:
       - task: cleanup
       - task: init
 
-  reset:
-    summary: Reset environment. This is useful when switching between tasks, branches etc.
+  install:
+    summary: (Re)install all dependencies.
     deps:
-      - design-system:reset
-      - react:reset
-      - cms:reset
+      - design-system:install
+      - react:install
+      - cms:install
 
   design-system:clone:
     cmds:
       - git clone https://github.com/danskernesdigitalebibliotek/dpl-design-system design-system
 
+  design-system:install:
+    dir: design-system
+    sources:
+      - package.json
+      - yarn.lock
+    generates:
+      - node_modules/*
+    cmds:
+      - yarn install
+
   design-system:link:
     deps:
       - design-system:build
@@ -70,18 +80,23 @@ tasks:
     cmds:
       - yarn dev
 
-  design-system:reset:
-    dir: design-system
-    cmds:
-      - yarn install
-
   react:clone:
     cmds:
       - git clone https://github.com/danskernesdigitalebibliotek/dpl-react react
       # Set project name to avoid conflicts with single checkouts.
       - cp react/.env.example react/.env
       - echo "COMPOSE_PROJECT_NAME={{.REACT_COMPOSE_PROJECT_NAME}}" >> react/.env
 
+  react:install:
+    dir: react
+    sources:
+      - package.json
+      - yarn.lock
+    generates:
+      - node_modules/*
+    cmds:
+      - yarn install
+
   react:link:
     dir: react
     deps:
@@ -112,20 +127,25 @@ tasks:
     deps:
       - react:link
     run: once
+    interactive: true
     cmds:
       - yarn dev
 
-  react:reset:
-    dir: react
-    cmds:
-      - yarn install
-
   cms:clone:
     cmds:
       - git clone https://github.com/danskernesdigitalebibliotek/dpl-cms cms
       # Set project name to avoid conflicts with single checkouts.
       - sed "s|COMPOSE_PROJECT_NAME=dpl-cms|COMPOSE_PROJECT_NAME={{.CMS_COMPOSE_PROJECT_NAME}}|g" <cms/.env.example >cms/.env
 
+  cms:install:
+    dir: cms
+    sources:
+      - composer.lock
+    generates:
+      - vendor/*
+    cmds:
+      - task dev:cli -- composer install
+
   cms:link:
     dir: cms
     deps:
@@ -139,27 +159,30 @@ tasks:
 
   cms:dev:
     dir: cms
-    deps:
-      - cms:link
-    cmds:
-      - task dev:start
-
-  cms:reset:
-    dir: cms
+    run: once
     cmds:
       - task dev:reset
 
   dev:react:
+    watch: true
     deps:
       - design-system:build
     cmds:
       - task: react:dev
 
+  dev:cms:
+    watch: true
+    cmds:
+      - task: cms:dev
+      - task: cms:link
+
   dev:cms-react:
+    watch: true
     deps:
       - cms:dev
     cmds:
       # react:dev has an interactive prompt about port assignment as we try to
       # run it on port 80 by default. To allow the user to reply we have to run
       # it as a separate task instead of a dependency.
       - task: react:dev
+      - task: cms:link