Increase Your Productivity With Continuous Delivery: GitLab + Netlify
By: Lorenzo Cadamuro
Tags: Productivity, Gitlab, Continuous Delivery, Netlify, Continuous Integration

The solution

In order to safeguard productivity, you need to stay focused only on the code, and find issues quickly by receiving regular feedbacks on what you release. This is achievable only by delegating the delivery to someone specialised in it, someone that observers developers and deploys a new version every time they make an update in the codebase. If this someone would be a machine, it could also reduce the costs.

Well, this someone has a name, and it’s “Continuous Delivery”.

From Wikipedia:

Continuous delivery (CD or CDE) is a software engineering approach in which teams produce software in short cycles, ensuring that the software can be reliably released at any time and, when releasing the software, doing so manually.

It aims at building, testing, and releasing software with greater speed and frequency. The approach helps reduce the cost, time, and risk of delivering changes by allowing for more incremental updates to applications in production.

Now that we have understood what the benefits of Continuous Delivery are, let’s implement it!

GitLab

First of all we need a git-repository to host our source code; my suggestion is to go with GitLab:

It’s open source.

It’s versatile.

It saves costs.

Also, if you want to take full control of the delivery in the future, GitLab offers powerful built-in tools for CI/CD.

In any case, Netlify works fine with GitHub as well.

Create a new repository

Let’s create a new project in GitLab, give it a name and set the visibility level based on nature of your project — choose public only in the case of open source projects, IMO.

Creating a new repository on GitLab

Create a new example site

Now that we have the repository, we need an example site —we can start from this https://github.com/react-boilerplate/react-boilerplate

Make sure that you have Node.js v8.10 and npm v5 or above installed. Clone the repo using git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git my-project Move to the appropriate directory: cd my-project . Run npm run setup in order to install dependencies and clean the git repo.

Once you have your local environment:

Connect the local repository to the remote one: git remote add origin git@gitlab.com:<YOUR_USERNAME>/my-project.git Stages all changes: git add . Create a new commit: git commit -m "Initial commit" Push the commit to remote: git push -u origin master

Fine, we have an example site on our repo.

The workflow

The workflow that we are going to follow consists in two main environments: the development and the staging. We must get into the mindset that development needs to be constantly updated, many times a day — since your team and you work on the same product, everyone must follow the work-in-progress and contribute by providing regular feedbacks to developers. Staging, on the other hand, will be shared with the client: you have to update it only when features are closed and tested.

So we need two branches: develop and master. Develop will be our default branch and development environment, master instead will be our staging.

In an ideal situation, every feature should have its own branch and, only when it gets to a stable state, merge it into develop. Remember: Develop must always be stable.

When you need to update master, create a new merge-request in GitLab from develop to master.

Configure the repository

By default, when a new repository is created, git point to the master branch. We have therefore to create the develop branch e tell GitLab that it is our main working branch.

Click on “Repository” in the menu on the left and go to “branches”. At this point, make a new branch from master named “develop”.

Once you created the branch, go to Settings › Repository. The first panel should be “Default Branch”, expand it, select develop from the drop-down menu, and save changes.

Configuring the default branch

From now, whoever clones the repository will be pointed to the develop branch.

Always in Settings, there is the panel “Protected Branches”; here, as maintainer, you can choose who can change what. By default master is protected, that means only maintainers can update it, and, for our workflow, deliver new releases for the client. This decision is up to you — if you work with external developers, I suggest to keep master secure and force developers to use merge requests.

Now, it’s time to break out the big guns.

Netlify

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

Netlify lets everyone to set up continuous integration in a few clicks: just connect your repository, enter your build settings and voilà. But what makes Netlify so complete, is that it can replace your hosting infrastructure and serve sites via free HTTPS.

This is not over: Netlify supports custom domains for free, that means you can use your own domain to publish your projects.

You’re probably wondering how much it costs. Well, for our purposes the free plan is good.

Netlify Plans and Pricing

Create a new site

To get started, create a new account on Netlify — you just need to sign up with your GitLab account.

When you’re done you should end up on your Dashboard; now it’s time to create your project.

Click on “New site from Git” and select your repository — in this case GitLab. Being your first time it should ask you for the authorisation to access to your account; of course you have to allow it.

Once you have done that, it should appear the list of projects on your GitLab; select the one created previously.

Last step is to tell Netlify how to deploy our site; if you use module bundlers like Webpack, almost surely you have a build command and a publish directory. In our case, running npm run build Webpack will create the static site in /build .

Configuring Netlify

Now the ball is in his court — clicking on “Deploy site” Netlify starts cloning your repository; after that it downloads the correct version of Node (it supports the .nvmrc file) and finally it runs the build command. When it finishes, it gives you a unique url to preview your site — click on it to see it live!

Testing the site

Fine, we have our Continuous Delivery up and running.

At the moment Netlify observes changes only on master, so we have to tell it that we have others branches.

From your dashboard go to Settings › Build & Deploy; find the “Deploy contexts” panel and click “Edit settings”, here select “All” on branch deploy and then save.

Configuring Netlify to deploy all branches

From now, every branch will have its own url. Try to make a change on develop and push it , Netlify will produce a new url in this format:

https://[BRANCH_NAME]--[NETLIFY_PROJECT_ID].netlify.com

We are almost there; we have our development and our staging, which is everything we need to start work. But, honestly, we don’t like the rough url created by Netlify, isn’t it? How about personalise it?

(If you don’t own a domain, skip this section)

Create a custom url

What we want is something like this:

staging: https://my-project.example.com

development: https://develop.my-project.example.com

In order to let Netlify to handle DNS management for you, you have to change the nameservers on your domain provider to point at the Netlify DNS zone.

Go to your account’s Settings › Domains. Click on “Add or register domain” and enter your domain name. Verify it and add it. Ignore the second panel and click “Continue”.

Now go to your domain registrar. There should be a panel named “Nameservers” or something; to use Netlify DNS, you have to change your domain’s nameservers to the following custom hostnames:

dns1.p06.nsone.net

dns2.p06.nsone.net

dns3.p06.nsone.net

dns4.p06.nsone.net

The change of the nameservers can take some time to propagate.

Pay attention: by changing the nameservers, every DNS rules on your domain registrar will not longer be valid — from now you will have to use the Netlify DNS settings.

Fine, now go to your project’s Settings › Domain management and, on the “Custom domains” panel, click on “Add custom domain” and enter [YOUR_PROJECT_NAME].[YOUR_DOMAIN_NAME]

In my case: my-project.lorenzocadamuro.com

Now we have staging on our personal domain . Let’s do the same for development.

Always in Settings › Domain management, on the “Branch subdomains” panel, click on “New subdomain” and select the develop branch from the drop-down menu; then click “Create subdomain”.

And that’s it.