Configuring a Front-End Project for Continuous Integration with Drone

Activating the Repo in Drone

1. Login to Vokal's Drone instance here: https://dronev4.vokal.io/
2. Find your Github repo, and click it
3. If this repo hasn't been activated for Drone, you will see the message "This repository is not yet activated." Click Activate Now.

Create Your Project's .drone.yml File

In the root of your repo, create a file called .drone.yml. Use the example below to create a drone config in this new file.

build:

  # The step below executes when new commits are pushed to any branch
  # other than master, e.g. when a feature PR is opened, when
  # new commits are pushed to that PR, or when that PR is merged
  # to develop
  staging:
    when:
      branches:
        exclude: master
    image: node
    commands:
      - yarn install
      - yarn run build:staging
      - yarn test

  # The step below only executes when new commits are pushed to master,
  # which should only occur when a release or hotfix branch is merged
  # to master
  prod:
    when:
      branch: master
    image: node
    commands:
      - yarn install
      - yarn run build
      - yarn test

# Top level steps (like build and publish) execute sequentially, by
# design. This ensures that if the build or tests fail, the publish step
# will not run, preventing a broken build from being distributed
publish:

  # The step below only executes when new commits are pushed to develop,
  # e.g. when a feature branch is merged successfully. It should contain
  # the task that will deploy your app to the staging environment.
  s3_sync:
    when:
      branch: develop
    acl: public-read
    region: "us-east-1"
    bucket: "my-staging-bucket" # Replace this with the name of your bucket
    access_key: $$awsAccessKey
    secret_key: $$awsSecretKey
    source: build
    target: /
    delete: true

  # The step below only executes when new commits are pushed to master,
  # e.g. when a release branch is merged successfully. It should contain
  # tasks that will deploy your app to the production environment.
  s3_sync:
    when:
      branch: master
    acl: public-read
    region: "us-east-1"
    bucket: "my-production-bucket" # Replace this with the name of your bucket
    access_key: $$awsAccessKey
    secret_key: $$awsSecretKey
    source: build
    target: /
    delete: true

Some things to note:

• In the example above, the only difference between the staging and prod build steps is that staging runs yarn run deploy:staging while prod uses yarn run deploy. In your package.json file, you'll want to create separate commands for staging and production builds that modify the build output appropriately for those environments. A common use case is to create a yarn run deploy:staging to change the API root used in your app to point at the staging API, while yarn run deploy would use the production API.
• build and publish are reserved words with specific purposes. You cannot include arbitrary command names at the top level of the .drone.yml file.
• The s3_sync steps uses environment variables for the sensitive parameters access_key and secret_key. This is the correct way to pass sensitive data to Drone. Don't ever commit sensitive access credentials like these to source control in plaintext! In the next step, we'll show you how to properly set these variables and encrypt them for Drone.
• s3_sync is a Drone plugin designed for deploying files to Amazon's S3 storage service. There are many other plugins to assist you with building, deploying, and other common tasks in different environments. If there isn't a plugin to meet your needs, you can always create your own, or you could pass a bunch of shell commands for drone to execute.

If you have any other questions about Drone config files, ask a senior dev, or look through the docs.

Passing the Environment Variables to .drone.yml

1. Go back to our Drone instance and find your repo.
2. Click the Secrets tab in the upper right corner.
3. In the text box, enter the environment variables you reference in your .drone.yml file with their values, using yaml syntax. (Note: You'll probably be doing this with AWS credentials most commonly. If you don't know how to find yours, read this guide.) Here's an example of what you'll be typing into this field:

environment:
  awsAccessKey: AAAAAAAAAAAAAAA
  awsSecretKey: asdf7782j2k3l;asdf/abyqu378123;ajsdbn;alwer

4. Click Generate to encrypt your secret variables.
5. Copy the output and paste it into a new .drone.sec file in the root of your repo.

And that's it! Congratulations: You've successfully configured your repo for Continuous Integration and Continuous Delivery with Drone. The next time you open a PR, Github will display a the progress of Drone executing the steps in this config file. You can go to Drone at any time to view current and past builds, and their console output.