Zeit is a great little company that aims to “Make Cloud Computing as Easy and Accessible as Mobile computing”, and they’re doing that just with their relatively new service, Now. Now aims to make deploying Node and Docker apps as simple as typing now into your terminal. It also allows deploying static websites, which is what I’ll be using it for in this little tutorial.

Prerequisites

This tutorial assumes that you’ve got a Zeit account, and have some familiarity with GitLab Review Apps, GitLab CI, and that you have a GitLab Runner setup and ready to go.

Setting up your Project

To get started, let’s create a new GitLab project called now-review-app.

Next, clone the repository:

git clone URL_TO_YOUR_REPOSITORY_

Create the .gitlab-ci.yml file:

touch .gitlab-ci.yml

And create an src folder:

mkdir src

Inside src, place an index.html file, with the contents:

<h1>Example HTML file</h1>

Modify .gitlab-ci.yml with the contents:

image: node

stages:
  - review

variables:
  REPO_NAME: now-review-app

start_review:
  stage: review
  script:
    - npm install -g now --silent
    - URL=$(now --static -t ${NOW_TOKEN} ./src -n ${REPO_NAME}-${CI_BUILD_REF_SLUG})
    - NOW_URL=$(echo ${URL} | sed s/'http:\/\/'/''/g | sed s/'https:\/\/'//g)
    - now -t ${NOW_TOKEN} alias set ${NOW_URL} ${REPO_NAME}-${CI_BUILD_REF_SLUG}.now.sh
  environment:
    name: review/$CI_BUILD_REF_NAME
    url: https://$REPO_NAME-$CI_BUILD_REF_SLUG.now.sh
    on_stop: stop_review
  only:
    - branches
  except:
    - master

stop_review:
  stage: review
  script:
    - npm install -g now --silent
    - now rm -t ${NOW_TOKEN} -y ${CI_BUILD_REF_SLUG}
  when: manual
  environment:
    name: review/$CI_BUILD_REF_NAME
    action: stop
  only:
    - branches
  except:
    - master

The above code creates a GitLab Review App when a new merge request is created, letting you view changes via a deployment. This allows your reviewers to see changes almost instantly, without having to run your app locally. In this case, start_review creates a new Now deployment of the files in src and creates an alias for the merge request based on the name of the branch (e.g. feature/modify-app, becomes reponame-feature-modify-app.now.sh). Once the review has finished, stop_review will remove the deployments created as part of the merge request process, cleaning up.

Commit and push this code to GitLab.

Testing it out

Add a new variable called NOW_TOKEN to the project, accessible via the project menu. This variable will contain a Now token. You can create a new token on this page.

Create a new branch with:

git checkout -b feature/modify-app

Modify the contents of the index.html file we created earlier, we’ll be changing it to:

<h1>Modified Example HTML source file.</h1>

Commit and push this to GitLab.

Next, create a merge request from feature/modify-app into master, and wait for the pipeline to finish building, this will create the review app:

If everything is successful, your pipeline should pass, and you should now see a link to the review app on the merge request:

Clicking on it should take you to the Now deployment with the correct changes to index.html displayed:

It’s worth noting here that this link is an alias for the latest review app deployment. You’ll have to use now ls to view all iterations of the merge request, if required.

If you found this interesting, have any questions or queries, or just want to say hi, then hit me up on Twitter!