Merge branch 'main' of https://github.com/poly-glot/vanilla-front-end…

…-starter

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: '14.x'
 
       - name: Cache node modules
         uses: actions/cache@v1
@@ -50,7 +50,7 @@ jobs:
         run: npm run build
 
       - name: Cypress run
-        uses: cypress-io/github-action@v1
+        uses: cypress-io/github-action@v2
         with:
           record: true
           start: npm run start:serve
@@ -61,7 +61,9 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
-      - uses: FirebaseExtended/action-hosting-deploy@v0
+      - name: Deployment
+        if: ${{ github.ref == 'refs/heads/main' }}
+        uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VANILLA_FRONT_END_STARTER }}'

.github/workflows/monthly-visual-testing.yml

@@ -0,0 +1,50 @@
+name: Refresh screenshots
+
+on:
+  schedule:
+    # Every 1st day of a month at 1am
+    - cron: '0 1 1 * *'
+
+jobs:
+  remove-old-artifacts:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Nodejs
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: Cache node modules
+        uses: actions/cache@v1
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          record: true
+          start: npm run start:serve
+          wait-on: 'http://localhost:5000'
+          command-prefix: 'percy exec -- npx'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

README.MD

@@ -1,16 +1,16 @@
 # front-end-starter-kit
 ![CI/CD](https://github.com/poly-glot/vanilla-front-end-starter/workflows/CI/CD/badge.svg)
 [![codecov](https://codecov.io/gh/poly-glot/vanilla-front-end-starter/branch/master/graph/badge.svg?token=K6AIDS2WN8)](https://codecov.io/gh/poly-glot/vanilla-front-end-starter)
-[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/poly-glot/vanilla-front-end-starter)
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/328a6753/vanilla-front-end-starter)
 [![Cypress.io Dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/projects/8joug9/runs)
 [![DeepScan grade](https://deepscan.io/api/teams/8408/projects/10599/branches/148870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=8408&pid=10599&bid=148870)
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/poly-glot/vanilla-front-end-starter)
 
-A vanilla front-end starter kit with tools to support code quality, accessibility, unit testing, end to end testing, 
+A vanilla front-end starter kit with tools to support code quality, accessibility, unit testing, end to end testing,
 continuous integration setup and feature branch testing.
 
 ## Who it is for
-Suitable for responsive sites or simple applications in a fast pace delivery environment with 
+Suitable for responsive sites or simple applications in a fast pace delivery environment with
 shared nothing front-end architecture using vanilla js. However, code should be isolated & independent where possible to allow us to
 take benefits of previous projects and experience.
 
@@ -40,19 +40,19 @@ npm start
     <tr>
         <td width="100">JS</td>
         <td>Prefix DOM Element class name or ID with "js-" to indicate element is linked to Javascript</td>
-    </tr>    
+    </tr>
     <tr>
         <td width="100">JS</td>
         <td>Use Async/Await over promises</td>
-    </tr>        
+    </tr>
     <tr>
         <td width="100">JS</td>
         <td>Keep Code branching to one level and reduce nested if/else statements</td>
     </tr>
     <tr>
         <td width="100">JS</td>
         <td>Leverage Modern Browser API's instead of bloated libraries or framework e.g. use fetch instead of axios</td>
-    </tr>                            
+    </tr>
 </table>
 
 # Estimation Guide for Static Projects
@@ -83,7 +83,7 @@ docker run -it --rm -p 5000:5000 vanilla-front-end-starter
 # Browser Support
 2 most recent versions of Chrome, Firefox, Safari & MS Edge.
 
-# Todo 
+# Todo
 - Feature : CI/CD - Add Docker preview.
 - Feature : CI/CD - Add automatic release after every two weeks.