9th June 2018

Technical Resources

A collection of my Technical Resource documentation.

Latest Tech Articles

10th December 2020

Integrating Snyk with Gitlab CI for Automated package scanning

Snyk.io is a great online (Free for open source projects) tool for automated scanning of your project directories. It has built in integrations for various SCM and IDEs, however, I like to keep my projects SCM agnostic in case I decide to change in the future.

This guide will show you how to configure your Gitlab CI Runner (Cloud hosted) to run Snyk testing as part of your pipeline. If you do not yet have a pipeline configured, see this guide for a starter. TBC

Generating API Token

The first hurdle that must be jumped to integrate your Gitlab CI runner with Snyk is to configure authentication. To allow for your automation platform to authenticate with Snyk (To save running snyk auth on each build) we will be using an API token stored in an environment variable.

https://app.snyk.io/account

Click the above link and click to show your API token, make a note of this somewhere secure.

Testing

To test your API token from the CLI, run the following in your project directory to ensure your token works:

npm install -g snyk
export SNYK_TOKEN=TOKEN_FROM_SNYK
snyk test

You should now be given a report of your project security.

Adding Variable to Gitlab CI

Now we need to save this as an environment variable available to the gitlab runner. Where you store this will depend on whether you wish this to be set on a project or group level. Go to the appropriate page on Gitlab for your requirement and go to Settings > CI/CD > Variables.

Create a new variable as follows:

Key: SNYK_TOKEN 
Value: VALUE_FROM_SNYK

Integrating into your Pipeline

This guide assumes you already have your gitlab-ci.yaml file written, if you do not – See here for a getting started guide for building a pipeline file for Gitlab CI and a nodejs and docker container.

Add the following into your gitlab-ci.yaml file (Assuming you are using a nodejs base image).

snyk:
  only:
    - master
  stage: "Testing"
  script:
    - npm install -g snyk
    - snyk test
30th November 2020

Pushing to a git repository using Gitlab CI

Recently I have been migrating a Jenkins environment to Gitlab CI for automated builds. One thing that was not immediately clear from the documentation on how to push back to your Git repository during the build pipeline.

This process was used heavily throughout the process to automate the bumping of versions in npm package.json files and committing these back to the git branch once bumped.

The first step to acheive this is to create a Personal access token for your account with read and write access to your projects. On Gitlab.com you can use the link below:

https://gitlab.com/-/profile/personal_access_tokens

Make a note of your access token once generated as this will not be displayed again!

The next stage is to go to the Settings > CI/CD > Variables for either your project or the containing group if you wish to use this key across multiple projects.

Create a new variable here named CI_ACCESS_TOKEN (Or similar, if you use something different here – Ensure you make a note!) with the value as the access token you generated in the previous step. With this being a password you should ensure to mask the variable so that it is not printed in your CI logs.

The below is a very simple gitlab-ci.yaml file which simply clones your repository, bumps using the npm version command, before pushing the changes back to the master branch on Gitlab.

image: node:latest

stages:
  - "Git checkout"
  - "Prepare Build"
  - "Bump Version"
  - "commit"

git-pull:
  stage: "Git checkout"
  script:
    - git checkout $CI_COMMIT_BRANCH
    - git pull
    - git status

npm-bump:
  ## Bump the project version
  stage: "Bump Version"
  script:
    - echo "Bumping project version"
    - npm version --no-git-tag-version patch

commit-files:
  ## Commit new files back to master branch
  stage: commit
  before_script:
    - git config --global user.email "[email protected]"
    - git config --global user.name "Gitlab CI"
  script:
    - echo "Committing updated files to git"
    - cat package.json
    - git add package.json
    - git commit -m "Bumped package to $SERVICE_VERSION" 
    ## Push back to Gitlab using secret token created earlier with "skip-ci" option to stop builds triggering in a loop
    - git push "https://${GITLAB_USER_NAME}:${CI_ACCESS_TOKEN}@${CI_REPOSITORY_URL#*@}" "HEAD:${CI_COMMIT_REF_NAME}" -o skip-ci

 

 

 

7th September 2020

Using Chrome DevTools to view Your website in “Mobile View”

Follow the below to view Your website as it would be displayed on a Mobile Device using Google Chrome’s DevTools.

Firstly, open Google Chome Website Browser (Click the text if You do not have Google Chrome installed to install the browser).

Browse to Your website in Google Chrome

Press the F12 button on Your keyboard to open up Chrome DevTools (Eg below)

Now click the button at the top to force Chrome to preview Your website in Mobile View:

After clicking this, Your mobile will be displayed with a default “Responsive” Mobile view. If You wish to see how Your website will be displayed for a particular device, You can click on the “Responsive” link at the top to select a particluar Mobile Device (which will adjust the resolution in the displayed view).

To revert back to the usual Desktop view, simply close DevTools by clicking on the X at the top right of the DevTools Window.