I run a large WhatsApp group and I often need to mention everyone in the group. But there are no real solutions for mentioning all members.

WhatsApp does not natively do it, and there was a Firefox browser extension, but it was abandoned.

That is why I decided to make my solution.

I made a UserScript that does exactly this: mentions everyone in WhatsApp Web when you write @@ in the chat.

Note: an UserScript is a program for modifying web pages to augment browsing.

Any browser that can install an UserScript manager can run this solution.

Google Chrome, Firefox, Brave, Opera, Microsoft Edge, Safari, and more are supported. Just continue reading. 😉

Setup

First, you need to install a UserScript manager. I recommend Tampermonkey as it is the most popular and supports all browsers.

Then, install the WhatsApp Web Mention Everyone UserScript.

Mention Everyone

The fun part! Go to web.whatsapp.com and open a Group chat.

All you need to do is write @@ in the chat to see the magic happen.

End

That was it. Easy right?

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub

• Twitter

• Dev.to

Conclusion

Congratulations, today you have learned how to mention everyone on WhatsApp Web. Regardless of your Browser or OS.

Let me know if the tutorial was useful to you in the comments!

This past week I was toying around with the HTML5 canvas element, trying to join two images together. At first, it seemed fine, but when I tried to reload the website, it was a mess. One image would load, but the other wouldn't.

Investigating I found out that the images were being loaded asynchronously. But the JavaScript code was running anyway, without waiting for the images, ending up with a messed up canvas.

That is why I decided to write this tutorial, to help you preload images for canvas in modern JavaScript.

Preload images

With the help of the Promise.all() function, we can devise a solution to preload images.

/**
 * @param {string[]} urls - Array of Image URLs
 * @returns {Promise<HTMLImageElement[]>} - Promise that resolves when all images are loaded, or rejects if any image fails to load
 */
function preloadImages(urls) {
  const promises = urls.map((url) => {
    return new Promise((resolve, reject) => {
      const image = new Image();

      image.src = url;

      image.onload = () => resolve(image);
      image.onerror = () => reject(`Image failed to load: ${url}`);
    });
  });

  return Promise.all(promises);
}

You can then use it like this:

const urls = [
  'https://example.com/image1.png',
  'https://example.com/image2.png',
];

// Important to use `await` here
const images = await preloadImages(urls);

// Can also be destructured
const [image1, image2] = await preloadImages(urls);

// For example:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

context.drawImage(images[0], 0, 0);
context.drawImage(images[1], 0, 0);

End

That was it. It's a small one-time setup on your project, that works like a charm.

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Conclusion

Congratulations, today you have learned how to preload images for canvas in modern JavaScript. Without needing to complicate your code or use libraries.

Let me know if the tutorial was useful to you in the comments!

I have worked on projects that required the production and testing database to be the same.

This could be because some features work in MariaDB, but not in SQLite. Or some bugs appear in MySQL, but not in PostgreSQL.

When you're working in a large project, you need to know that the testing database works exactly like the one in production. You can't allow a bug to appear in production because the test database was different.

Note: If the project is small, chances are you are fine using SQLite for testing.

Today, I'm going to guide you through setting up a testing database in your current database server, thanks to Laravel Sail.

Before we start

This tutorial uses PostgreSQL as the database. But the idea is the same for any other database: create a separate database in your current database server.

Preface

Requirements

• Laravel 9
• Laravel Sail

Database setup

We will use the database server declared in the docker-compose.yml file. In this case, PostgreSQL.

services:
  pgsql:
    image: 'postgres:14'

First, enter PostgreSQL's CLI

sail psql

Note: If you are using MySQL, you can use sail mysql instead.

Now, create a new database

CREATE DATABASE testing;

This database is separated from the default database that your application uses.

PHPUnit configuration

Now, modify the phpunit.xml file to use the new database and database server. Should end up similar to this:

<php>
    <env name="DB_CONNECTION" value="pgsql"/>
    <env name="DB_DATABASE" value="testing"/>
</php>

Run the tests

Now, you can run the tests and see if they work.

sail test --parallel

It should look similar to this:

   PASS  Tests\Unit\ExampleTest
  ✓ example

  Tests:  1 passed
  Time:   0.7s

End

That was it. It's a one-time setup, that works like a charm.

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Conclusion

Congratulations, today you have learned how to create a test database in Laravel Sail. Without needing to modify the docker-compose.yml file or creating more services.

Let me know if the tutorial was useful to you in the comments!

I'm going to explain how to build a free plan for your Laravel Spark Next application.

I will be using Paddle as the payment gateway, but the steps are almost identical with Stripe.

Best of all? No credit card required for the free plan.

Before we start

Preface

You should know that Laravel Spark is built on top of Laravel Cashier, so know that the process is very similar with both.

Requirements

• Laravel 8 with Spark Next

Laravel Spark installation

Before starting the tutorial, you should have followed the official installation guide.

Laravel Spark plan configuration

Let's imagine that we are building a new application which offers a free plan and a paid plan.

• The "Free" plan will have a limit of 1 project.
• The "Paid" plan will have a limit of 5 projects.

We need to configure both plans in the config/spark.php file, like so:

// ...

  'plans' => [
      [
          'name' => 'Free',
          'short_description' => 'This is the free plan',
          // Random _(not used by other plans)_ ID
          'monthly_id' => 1000,
          'features' => [
              '1 Project',
          ],
          'options' => [
              'projects' => 1,
          ],
          // IMPORTANT
          'archived' => true,
      ],
      [
          'name' => 'Paid',
          'short_description' => 'This is the paid plan',
          'monthly_id' => 999990,
          'yearly_id' => 999991,
          'yearly_incentive' => 'Save 20%!',
          'features' => [
              '5 Projects',
          ],
          'options' => [
              'projects' => 5,
          ],
          'archived' => false,
      ],
  ]

// ...

As you can see, the limits are actually set in the options array.

It's important that the "Free" plan is set to archived to prevent users from selecting that plan on the billing page.

The "Free" plan has to have a random monthly_id, so the plan can be used internally. It doesn't need to be a working product ID, nor do you have to create it on Paddle/Stripe.

Modify User model

Now that we have created a "Free" plan, we need to modify the User model to add a getPlan method.

This method will get the current users plan, or the "Free" plan if the user has no active plan.

// ...

    public function getPlan()
    {
        $plan = $this->sparkPlan();

        if ($plan !== null) {
            return $plan;
        }

        // Fallback to "Free" plan
        $plan = Spark::plans('user')->firstWhere('name', '=', 'Free');

        return $plan;
    }

// ...

Note: As mentioned in the steps before, you need to add a monthly_id to the "Free" plan, otherwise it will be skipped by the Spark::plans('user') call and will not be found. The ID can be random, don't worry.

Getting the User's plan

Through your application you can access a user plan and limits like so:

$user = User::find(1);

$plan = $user->getPlan();

$plan->name; // "Free"

$plan->options['projects']; // 1

End

As you can see, what we actually do is fallback to the "Free" plan if the user has no active plan.

And this plan doesn't actually go through the payment process, so you don't need to ask the users with a credit card.

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Congratulations, today you have learned how to build a free plan in Laravel Spark.

Let me know if the tutorial was useful to you in the comments!

Sometimes you end up deploying an application to Dokku and then realize that you want to revert the changes you made.

In this tutorial we'll go over how to roll back a Dokku deployment.

Before we start

Preface

Keep in mind that rolling back a deployment is a dangerous operation, proceed with caution.

Requirements

• Dokku server

Don't have a Dokku server? Check out my Dokku tutorial.

Get the commit hash

First well need to get the hash of the commit that we want to roll back to.

To accomplish that, list out the last 10 commits that have been made to the repository.

git log --pretty=format:"%h - %s" -10

You will get an output similar to this:

3cacb03 - Revert "build: broaden possible purged files"
25e3b2b - chore: move node dependency to dev dependencies
6a42416 - Revert "ci: run npm "build" script in predeploy stage"
0b53fdd - ci: execute php buildpack first
2d27d60 - ci: run npm "build" script in predeploy stage
1bc1276 - build: broaden possible purged files
1bed300 - style: lint
5ab255c - Revert "build: only run tailwind JIT mode on local"
23b0c4b - build: fix data-tables styles getting purged
52ca32e - ci: move scripts back to app.json

Now copy the hash of the commit that you want to roll back to. For example 2d27d60.

How to rollback

Now that we have the commit hash, we can roll back to it.

Just force push to Dokku with the commit hash, instead of the local branch.

# git push --force <remote> <local branch>:<remote branch>
git push --force dokku de7fc85:master

That is it! Now Dokku will build the application from that commit. Effectively rolling back to that commit.

End

That was easy, wasn't it?

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Congratulations, today you have learned how to roll back a Dokku deployment.

Let me know if the tutorial was useful to you in the comments!

In this tutorial I will explain how to get git submodules to deploy correctly to CapRover using the CapRover CLI.

Before we start

Preface

Having some knowledge about CapRover, Docker and Git will help you understand how this solution works.

The problem

When you use caprover deploy, what happens underneath is that the CLI uses git archive to make a compressed tar of your repository. It then sends and deploys that file to your CapRover server.

But there are some problems with git archive: It does NOT include the .git directory in the tar.

So what you end up deploying is not really a git repository...

And if you were using git submodules in your repository, they are not downloaded, since the .git directory is missing.

To solve that issue, I have found a solution that is separated into three steps.

First step: Create a Dockerfile

The first step to use git submodules in CapRover is to create a Dockerfile and download the git submodules as a build step.

You will need to create a captain-definition file and point it to a Dockerfile.

For example:

{
  "schemaVersion": 2,
  "dockerfilePath": "./Dockerfile"
}

Then, you will need to create a Dockerfile that contains the following build step.

RUN git submodule update --init --recursive

For example:

FROM node:15-alpine

COPY . .

RUN apk --no-cache add git

# IMPORTANT: Download git submodules
RUN git submodule update --init --recursive

# ...

RUN npm ci

CMD ["node", "src/main"]

Second step: Include .git directory in the tar

The second step is to improve what caprover deploy does. Create a tar file of your repository, while adding the .git directory.

For that, you can use the following commands:

# Archive git repository
git archive HEAD > deploy.tar

# Add `.git` directory to `tar`
tar -rf deploy.tar .git

Third step: Deploy the tar

Now that you have both the tar with the .git directory, and a Dockerfile that downloads the git submodules, you are ready to deploy.

# Deploy the `tar` to your CapRover server
npx caprover deploy -t ./deploy.tar

# Remove the tar
rm ./deploy.tar

End

That was it, I hope you had luck and your deployment was successful!

Feel free to use the following script to perform all of these steps automatically.

#!/bin/bash

# Archive git repository
git archive HEAD > deploy.tar

# Add `.git` directory to `tar`
tar -rf deploy.tar .git

# Deploy the `tar` to your CapRover server
npx caprover deploy -t ./deploy.tar

# Remove the tar
rm ./deploy.tar

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Congratulations, today you have learned how to deploy git submodules to your CapRover server.

Let me know if the tutorial was useful to you in the comments!

Chances are that you want to monetize your audience, and you have learned about the 50% lifetime commissions on the AdGuard Affiliate Program.

So let's learn everything about the affiliate / referral program.

How it works

When you become an AdGuard affiliate, you will earn 50% of the purchases that your referred users make.

The process looks like this:

• You share your referral link to your audience
• A user installs AdGuard using your link
• The user makes a purchase and activates the program with it
• At the moment of activation, you will earn 50% of the revenue
• You will also earn 50% from the following renewals

It does not matter when and how a user purchases the license key. The important thing is that a user has installed AdGuard with your link.

Register

To start the process you will have to go to the AdGuard Affiliate Program website and create an account.

It is very easy, just fill the form with your details.

Set a payment method

Now that you have an account you will have to go to the Profile page and set a payment method to receive the money.

You can choose between PayPal, Visa, MasterCard, Webmoney and QIWI.

Share

To start sharing, you will have to get your affiliate link.

Go to the Marketing tools page, click on “Your website links” and copy the link.

Now comes the “hard work”, sharing the link with your user base.

How you choose to share it, is entirely up to you.

For example, you could share it to your Twitter followers, create a review of the AdGuard App, or mention it in your YouTube videos.

There are many ways to do it, good luck!

Get paid

Now that you have hopefully made some money... It's time to receive it!

To cash out it's as easy as going to the Payouts page and ordering a payout.

Remember that the minimum balance for cashing out is $20.

End

That was it, now do your magic and earn that affiliate money!

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Congratulations, today you have learned how to join the AdGuard Affiliate Program and hopefully make some easy money.

Let me know if this guide was useful to you in the comments!

I was working on one of my Nuxt projects and noticed that some users were using old versions, which was causing some errors to pop up.

I investigated and learned that sometimes PWAs don't update if the user doesn't manually refresh the website. So...

Let's learn how to automatically update to the latest PWA version.

Before we start

This is a simple tutorial for projects with Nuxt and the PWA module, nothing else is required.

Requirements

• Nuxt
• Nuxt PWA module

Create a new plugin

To start, you will need to go to your plugins directory and create a new JavaScript file. I will name it pwa-update.js but feel free to use whatever you want to.

// pwa-update.js

export default async (context) => {
  const workbox = await window.$workbox;

  if (!workbox) {
    console.debug("Workbox couldn't be loaded.");
    return;
  }

  workbox.addEventListener('installed', (event) => {
    if (!event.isUpdate) {
      console.debug('The PWA is on the latest version.');
      return;
    }

    console.debug('There is an update for the PWA, reloading...');
    window.location.reload();
  });
};

Add the plugin to the Nuxt config

Then we have to add it to the plugins array on nuxt.config.js.

// nuxt.config.js

// ...

  plugins: [
    { src: '~/plugins/pwa-update.js', mode: 'client' },
  ],

// ...

End

And that was it. Easy right?

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to
• Medium
• LinkedIn

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Congratulations, today you have set up automatic PWA updates for your project.

Let me know if this tutorial was useful to you in the comments!

Today I bring incredible news; Hashnode has finally added support for Matomo analytics!

Matomo are powerful open source web analytics which gives you 100% data ownership.

I just noticed it in the integrations tab of Hashnode's dashboard, so...

Let's learn how to integrate Matomo in Hashnode!

Before we start

Requirements

• A Hashnode blog
• A Matomo server

New Matomo website

To start, you will need to go to your Matomo server and create a new website.

Create it in: All websites > Add a new website.

Now, fill the form with your current Hashnode details, grab the site ID, and you are ready to go!

Add Matomo integration

Now that you have the Matomo site set up, go to your Hashnode dashboard and choose the integrations tab.

There you will see a form for Matomo. Just fill it with your Matomo server details.

End

And that was it, 100% open source analytics on your Hashnode blog in less than 5 minutes. Easy right?

What's next?

Take a look at your Matomo analytics, you should start to see people coming in to your blog to enjoy your incredible articles. 😉

Self-promotion

If you have found this useful then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to
• Medium
• LinkedIn

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Congratulations, today you have set up Matomo analytics for your Hashnode blog in a breeze.

Let me know if the tutorial was useful to you in the comments!

Setting up automatic updates can be a daunting task. But fear not, this tutorial will help you set up automatic updates correctly in less than 10 minutes.

Before we start

Preface

While this tutorial is focused on Ubuntu Server, it can be used for many other distributions that use the same package manager, like Ubuntu Desktop, Debian, Linux Mint, etc.

Requirements

• An Ubuntu server
• An internet connection
• Access to your server

Update

First you'll have to update to the latest package repository definition.

sudo apt update

Install

Then, we will need to install the package that does all the magic for us, unattended-upgrades.

sudo apt install -y unattended-upgrades

Chances are that you already have this package installed.

Configuration

Next step is to configure the package, lets start by opening the configuration file in the nano text editor.

sudo nano /etc/apt/apt.conf.d/50unattended-upgrades

// ...

Unattended-Upgrade::Allowed-Origins {
        "${distro_id}:${distro_codename}";
        "${distro_id}:${distro_codename}-security";
        // Extended Security Maintenance; doesn't necessarily exist for
        // every release and this system may not have it installed, but if
        // available, the policy for updates is such that unattended-upgrades
        // should also install from here by default.
        "${distro_id}ESMApps:${distro_codename}-apps-security";
        "${distro_id}ESM:${distro_codename}-infra-security";
//      "${distro_id}:${distro_codename}-updates";
//      "${distro_id}:${distro_codename}-proposed";
//      "${distro_id}:${distro_codename}-backports";
};

// ...

You should read the configuration file to understand what it is doing, don't worry if you don't understand most things.

The important step is to uncomment the following lines.

// Required, updates common software
"${distro_id}:${distro_codename}-updates";

// Optional, removes unused packages when updating
Unattended-Upgrade::Remove-Unused-Kernel-Packages "true";
Unattended-Upgrade::Remove-Unused-Dependencies "true";

// Optional, reboot automatically the system if needed at certain time
Unattended-Upgrade::Automatic-Reboot "true";
Unattended-Upgrade::Automatic-Reboot-Time "02:00";

You can search the file with ctrl + w

Then exit nano with ctrl + x and press Y to save modifications.

Enable

Now that everything is set up, lets enable the automatic updates. For this, you will need to configure one last file.

sudo nano /etc/apt/apt.conf.d/20auto-upgrades

The file might be empty, in that case, just paste the following.

APT::Periodic::Update-Package-Lists "1";
APT::Periodic::Download-Upgradeable-Packages "1";
APT::Periodic::Unattended-Upgrade "1";
APT::Periodic::AutocleanInterval "7";

The values are specified in days, so auto-clean will happen every week and auto-updates every day.

Test

Let's test if everything is set up correctly.

sudo unattended-upgrades --dry-run

This will run unattended-upgrades without making any real change, making sure everything is correctly set up.

End

That was it, easy right?

What's next?

You might want to free up space on your server after all the updates are done!

Self-promotion

If you have found this useful then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to
• Medium
• LinkedIn

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Congratulations, today you have learned how to set up and configure automatic updates on your Ubuntu server thanks to the unattended-upgrades package.

Let me know if the tutorial was useful to you in the comments!

Chances are that you've been running Docker for some time and found out that your system's storage is almost full.

This is completely normal as Docker bundles all the needed dependencies with each container and doesn't remove anything if you don't explicitly tell it to do so.

So let's learn how to prune unused and unnecessary images, containers, volumes and networks!

This tutorial will help you liberate space on your system without breaking anything in the process.

Before we start

We will be using the Docker CLI, so I expect you to be a bit familiar with it.

Otherwise, just use docker --help on the terminal and toy with it a little.

Requisites

• A bit of Docker knowledge

Images

Remove all images that are not tagged or referenced by any container

docker image prune

Containers

Remove all stopped containers

docker container prune

Volumes

Remove all volumes not used by at least one container

docker volume prune

Networks

Remove all networks not used by at least one container

docker network prune

Everything

To finalize, lets remove everything --but volumes-- with a single command.

docker system prune

If you want to remove volumes too, just append --volumes at the end.

docker system prune --volumes

And if you want to remove EVERYTHING, just append --all at the end.

docker system prune --all

And voilà, that removed every single resource that was unnecessary on your system!

Troubleshooting

You might find that some images can't be removed because they are used. In this case you want to remove the resource that is using it, most likely a container.

End

What's next?

If you want to read more, please check out the official Docker guide to pruning.

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Today you have learned how to free up space on your system by removing Docker's unused images, containers, volumes and networks.

Let me know how much space you have recovered in the comments!

So you have been running your Ubuntu Server for a while and recently found out that the disk usage is already at 70%!? Then lets free some space up.

This tutorial will help you liberate space on your system without breaking anything in the process.

Before we start

Preface

While this tutorial is focused on Ubuntu Server, it can be used for many other distributions that use the same packages, like Ubuntu Desktop, Debian, Linux Mint, etc.

Requisites

• An Ubuntu server
• Access to your server

Clean packages

Packages are archived and stored, if these versions can't be downloaded anymore --because there is a newer version or any other reason--, they end up being unnecessary. So let's clean lingering packages.

# Find no longer available packages and remove them
sudo apt autoclean -y

Remove packages

Chances are that when you update and upgrade your system, some packages end up being unnecessary. But your system won't remove them, so lets tell it to do that.

# Find unnecessary or redundant packages and remove them
sudo apt autoremove -y

Logs

Application logs keep increasing the disk usage of your server, specially if it is a busy one. But if we don't care much about keeping records, we can just delete them.

# Check current logs disk usage
sudo journalctl --disk-usage

# Rotate logs so they are saved to disk
sudo journalctl --rotate

# Clean any log that is older than one second
sudo journalctl --vacuum-time=1s

# One liner
sudo journalctl --rotate && sudo journalctl --vacuum-time=1s

Biggest files

Now we are switching to a more manual approach.

We will be using ncdu, a very easy-to-use CLI tool that will show us the biggest files on our system.

sudo apt update -y

# Install ncdu
sudo apt-get install -y ncdu

# Show biggest files in the system
sudo ncdu /

Now that ncdu has scanned your system you can:

• Select with the arrow keys
• Enter directories with Enter
• Remove directories and files with d

Thats how easy it is.

⚠ Be careful not to delete any important file. In case of doubt, don't do it. ⚠

End

What's next?

You can now search for more specific guides.

For example, if you are using Docker, you might want to learn how to remove unnecessary resources.

Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

• GitHub
• Twitter
• Dev.to

Or support me financially. 💸

• GitHub Sponsors
• LiberaPay
• PayPal

Conclusion

Today you have learned how to free up space on your system by removing packages, logs and files.

Let me know how much space you have recovered in the comments!

This tutorial will help you to set up a secure Ubuntu server from scratch.

Keep in mind that this is not a common tutorial, this is the culmination of all the knowledge I have gathered from managing my own servers for more than three years.

Before we start

Preface

While this tutorial is focused on Ubuntu 20.04, it can be used for many other versions, like 18.04 and 16.04. As they are very similar.

Requisites

• An Ubuntu server
• Access to your server

It doesn't matter if your server is hosted on DigitalOcean, Google Cloud Engine or Amazon Web Services, Ubuntu should be the same.

Requisite info

If you don't have a server you might want to look at the Useful resources step.

Updates

The first and probably most important step is to always keep the system up-to-date. To do so just open the terminal to update and upgrade the packages via apt.

sudo apt update           # Update package information
sudo apt full-upgrade -y  # Upgrade packages
sudo apt autoremove -y    # Remove unnecessary packages

# One liner
sudo apt update && sudo apt dist-upgrade -y && sudo apt autoremove -y

Automatic updates

Now that the packages are updated, we should install an automated solution to keep the system always up-to-date.

This tutorial on Linuxize will help you install and configure the unattended-upgrades package, which is exactly what is needed.

New user

Using the default super user root is always bad practice, it does everything with the maximum level of permissions, allowing you to break anything; and more critically... Access to anything on the system.

Instead, we should use a normal user with super user privileges. This tutorial on DigitalOcean will guide you to do that.

SSH credentials

Now that you have a new user with super user privileges, you might want to SSH in your server with it, but might find that you can't.

This is because the credentials were stored on the user you were using before, most likely root. Just SSH again with the previous user and copy the credentials to the new user with the rsync utility package.

Follow the 5th step of this tutorial on DigitalOcean to do so.

SSHD

SSHD manages the SSH connections to the server. Its default configuration is good but some changes must be made, like disabling the root user login and changing the default SSH port.

Follow the first step of this tutorial on DigitalOcean to learn how to configure SSHD.

It is recommended that you change the default SSH port

UFW

UFW is Ubuntu's default firewall and is extremely useful. By default it allows http and ssh connections, depending of your use case you might not need some of those rules.

Check out this tutorial on DigitalOcean to learn how to configure UFW.

If you changed the SSH port on an earlier step, you might want to create a new UFW rule for that port.

Fail2Ban

Fail2Ban protects you from brute-force attacks. It bans bad actors from accessing the server for a specified quantity of time.

Learn how to install and configure Fail2Ban with this tutorial on Linuxize.

Miscellaneous

These are some quick specific guides that you should keep in mind if you use any of this software.

Nginx

Nginx has various configuration files, its defaults are pretty good but you might want to take a look at it.

Use this tutorial on Acunetix as a starting point.

There is also this pretty nifty tool by DigitalOcean that allows you to configure Nginx in a visual manner. It includes popular presets, for example for NodeJS and PHP applications.

Apache2

Apache might require more work, as its defaults leak some information about your system.

Start your configuration journey with this tutorial by Tecmint.

PHP

Database

I have used MySQL and MariaDB on the past, by default their ports are opened externally, that shouldn't be allowed, as it is a security risk.

The database should only be allowed from local connections; or if ran externally, by whitelisted IPs.

• Learn how to configure MySQL with this tutorial on DigitalOcean.
• Learn how to configure MariaDB with this tutorial on DigitalOcean.

Recommendations

Dokku

Now that you have your own secure infrastructure, you might want to create applications and services.

Dokku is perfect for that. It allows you to containerize, build and run your applications with a simple git push.

Check out my own tutorial to learn how to set up and use Dokku.

There are some parts that you might want to skip, as they are similar to this tutorial.

End

Useful resources

• How to get a free Google server forever, a perfect test environment for this tutorial.
• How to get 2x Oracle Cloud servers free forever, a more powerful alternative to the free GCE server.
• Create your own Heroku with Dokku on DigitalOcean, a guide to deploy your applications to your now-secure server.

Self promotion

If you have found this tutorial useful then you should follow me, I will be posting more interesting content! :')

• GitHub
• Twitter
• Dev.to
• Medium
• LinkedIn

Or support me financially. <3

• GitHub Sponsors
• LiberaPay
• PayPal

Credit

Thanks to

• Any linked website and community for their wonderful tutorials and help

So, you want to have your own infrastructure while having the best commodities to push your code to production, right?

Then you have found your guide. We will go through every single thing that you will need.

We will set up a server on DigitalOcean, configure your application for usage with Dokku, learn how to push your code directly to production and finalize the guide by adding TLS/SSL to your application.

The best thing? This is all free. (*)

(*) If you are a new user on DigitalOcean and register through a referral link.

0. Before we start

What is Dokku

You might be wondering what Dokku is.

Dokku is a docker-powered Platform-as-a-Service (PaaS) that helps you build and manage the lifecycle of applications.

This means that it shares many similarities with Heroku, so if you have used Heroku before, this will come to you as familiar. For example, you can push code to deploy, use buildpacks, scale processes, etc

Preface

For this guide I will be using Windows 10 with the Git Bash terminal, but everything should be the same on any GNU/Linux system.

The server will be a DigitalOcean's Ubuntu 20.04 image with Dokku already set up.

As an example application we will use this NodeJS getting started project by Heroku.

Requirements

• A DigitalOcean account
• A Domain
• A Terminal
• A SSH key pair

Requirements info

If you don't have a DigitalOcean account, you should create one, its free! And if you use my referral link you will receive \$100 as credit for free!

If you don't have a SSH Key pair, then follow this tutorial to learn how to generate and add them to your DigitalOcean account.

1. Droplet creation

This might be the easiest step, as DigitalOcean offers a Ubuntu 20.04 image with Dokku already set up, just follow that link and create a droplet.

Then just choose whatever options meet your needs.

ÔÜá You should choose a Datacenter that is near you or your clients. ÔÜá

Once it's created, go to the "Networking" tab of your new droplet and assign a floating IP.

Visit that IP on your browser and you'll find the Dokku set up.

Just fill the details with your public SSH Key and the domain you will be using. I recommend enabling virtualhost naming, as its easier and more common than using ports.

Tip: If you had added the public SSH Key to your DigitalOcean before, the Public SSH Key form should have been filled automagically!

For the sake of this guide, I will be using the subdomain dokku on my own domain, akbal.dev.

2. Domain management

My current domain manager is CloudFlare, but you can use any other domain registrar or manager, the instructions should be the same. ­ƒÿè

DNS records

We have to configure our DNS settings to point to our new droplet's floating IP.

Start by adding a A type record with the hostname and floating IP you assigned earlier in the Dokku set up.

You should also add a catch-all rule so anything you deploy on a subdomain is automatically forwarded to the droplet.

If you're using CloudFlare and have trouble connecting in the next steps, try to set the DNS record proxy to DNS only instead of Proxied, as it seems to cause trouble.

3. Local configuration

Before we start, we should configure some things on our end.

­ƒÆ╗ These steps are done on our local machine.

Add SSH Key

We have to add our Private SSH Key to our local terminal so we can authenticate and connect to the droplet.

eval `ssh-agent -s` # Start the agent that holds on to our keys
ssh-add '~/path/to/ssh/private.key' # Add our private SSH key

ÔÜá This is an important step, if you don't add the private SSH key to the terminal, you won't be able to push code to Dokku later!

We should check that the key was added successfully. If the output is empty, the key was not added.

ssh-add -l

Then lets try to connect to our droplet via SSH as the root user.

ssh root@<domain>

# E.g.
ssh root@dokku.akbal.dev

Voilà, we are in!

4. Application set up

We will need an application to run on Dokku, don't we?

­ƒÆ╗ These steps are done on our local machine.

Clone repository

Lets clone the example application.

git clone https://github.com/heroku/node-js-getting-started.git

cd node-js-getting-started

Notice that there is a file that you should be familiar with if you have used Heroku before, the Procfile. We will be talking about it in the next step.

Getting familiar

Now that we have cloned the repository we can install the dependencies and play with the application if we want to.

npm install # Install dependencies

npm run start # Start the application

Now if we visit http://localhost:5000 on our browser we should see the application running.

5. Application configuration

We should configure our application so Dokku is able to run it.

You can skip this step if you are using the example application, since it already has been configured.

­ƒÆ╗ These steps are done on our local machine.

Buildpacks trivia

Dokku uses Heroku's own Buildpacks to build your applications and detect what language it is using.

In this guide we are using a NodeJS application, so Dokku will detect and use Heroku's NodeJS Buildpack.

Learn more about the NodeJS buildpack.

Procfile

Dokku needs a Procfile to identify what process types and commands our application uses, for example, to start a web server.

You should create this file if you haven't. A common NodeJS Procfile looks like this:

web: node index.js

# Or like this
web: npm run start

Learn more about the Procfile and process types.

Node version

Dokku will download and use the NodeJS version specified in the engines section of our package.json.

// ...
"engines": {
    "node": "12.x"
  },

You should add this part, otherwise Dokku will chose a version of NodeJS that might or might not work with your application.

Further configuration

You should check out the Buildpack documentation of the language you're using to further configure things!

6. Server configuration

Now that we can connect to the droplet and have set up our application, lets configure the server a bit.

­ƒûÑ These steps are done on the Dokku droplet.

RAM Swap

Chances are that you will be using Dokku on a low memory (<2GB) droplet.

To fix possible failures due to low memory, we should create a bigger swap file. Read this tutorial to learn how to do so.

7. Server security

While securing a server is not an easy task, the following instructions will take care of the most common problems.

­ƒûÑ These steps are done on the Dokku droplet.

Root user

We have been using the root user, but it is a security risk. We shouldn't be using it for everything, we should use instead our own user with root privileges.

Follow this guide to learn how to create a new user with sudo privileges.

Once you have done that, we should copy the Public SSH Key from the root user to our own user.

USER=<user> # Set the user variable
mkdir -p /home/$USER/.ssh # Create ssh directory
chmod 700 /home/$USER/.ssh # Apply directory permissions
cp /root/.ssh/authorized_keys /home/$USER/.ssh/authorized_keys # Copy the ssh authorized key
chown -R $USER:$USER /home/$USER/.ssh # Apply user and group permissions
sudo chmod 600 /home/$USER/.ssh/authorized_keys # Apply file permissions


# As a one-liner
USER=<user>; mkdir -p /home/$USER/.ssh && chmod 700 /home/$USER/.ssh && cp /root/.ssh/authorized_keys /home/$USER/.ssh/authorized_keys && chown -R $USER:$USER /home/$USER/.ssh && sudo chmod 600 /home/$USER/.ssh/authorized_keys

# E.g.
USER=alejandro; mkdir -p /home/$USER/.ssh && chmod 700 /home/$USER/.ssh && cp /root/.ssh/authorized_keys /home/$USER/.ssh/authorized_keys && chown -R $USER:$USER /home/$USER/.ssh && sudo chmod 600 /home/$USER/.ssh/authorized_keys

Now try to reconnect to the droplet with the new user.

ssh <user>@<domain>

# E.g.
ssh alejandro@dokku.akbal.dev

Perfect. It has worked like a charm.

SSHD

The default droplet configuration allows anyone to log in as the root user, this should be disabled as it is a security risk.

Look at the first step of this guide to learn how to configure SSHD and disable root user login.

Docker ports

Docker ports are open by the default on the firewall, we should shut them, as it can be a security concern.

sudo ufw status # Optional, check the current rules on the firewall

# Delete Docker rules
sudo ufw delete allow 2375/tcp
sudo ufw delete allow 2376/tcp

sudo ufw status # Optional, check that Docker's ports are deleted

UFW is Ubuntu's firewall manager, learn more.

Fail2Ban

Fail2Ban is a utility to protect your server from brute-force and automated attacks. It blocks repeated connection attempts and bans them temporarily.

Here is an easy guide on how to install, configure and use it.

8. Dokku

Now that every step of configuration is complete, we can move to the actually interesting step: actually using Dokku!

­ƒûÑ These steps are done on the Dokku droplet.

Dokku CLI

Dokku is used from the terminal, it doesn't have an interface or a web view, and that is its strong point, as it consumes less resources of your system that your applications will need.

To start using Dokku just type dokku on the terminal.

dokku

Common Dokku commands

These are some commands that you will definitely have to use, so visit the documentation links and get familiar with them.

• Application Management
• Process Management
• Domain Configuration

App creation

First step will be to create an application.

dokku apps:create <app>

# E.g.
dokku apps:create my-app

The app shell is now created, but empty. Until we push code it won't do anything.

But before doing so we should configure other aspects, like the domain it is going to use.

Read more about application management in Dokku.

Domain configuration

Lets add a domain so we can access our application easily from our browser once its deployed.

dokku domains:add <app> <domain>

# E.g.
dokku domains:add my-app my-app.dokku.akbal.dev

Read more about managing domains in Dokku.

Environment configuration

If our application uses any environment variables, for example an .env file, you should add them through Dokku.

dokku config:set <app> <variables>

# E.g.
dokku config:set my-app NODE_ENV=production

# You can add multiple environment variables.
dokku config:set my-app NODE_ENV=production SECURITY_KEY=XXX

Keep in mind that executing this command will restart the application.

Read more about managing environment variables in Dokku.

Deploying code

Now its time for the real deal, we have configured everything on our local machine and on the server, so lets deploy!

­ƒÆ╗ These steps are done on our local machine.

Lets add Dokku as a git remote so we can push code to it.

git remote add <remote-name> dokku@<remote>:<application>

# E.g.
git remote add dokku dokku@dokku.akbal.dev:my-app

Only thing left is to push the code, lets try!

git push <remote-name> <local-branch>:master

# E.g.
git push dokku main

# Or if your branch is already master
git push dokku master

And that is it! Once the code is pushed you should see Dokku detecting and building your application! ­ƒÑ░

If this step is giving you trouble, chances are that you might not have added your private SSH Key to your current terminal, learn more in the Add SSH Key step.

Once Dokku is done it will output a link to visit your application in your browser, do that!

_The website might not work because Dokku forces HSTS, and we haven't configured TLS/SSL yet. Learn how to disable HSTS._

TLS/SSL configuration

We will add the lets encrypt plugin to Dokku so the application will be served with HTTPS.

First add the letsencrypt plugin to Dokku.

sudo dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git

Then add a required letsencrypt contact email through environment variables.

dokku config:set <app> DOKKU_LETSENCRYPT_EMAIL=<email>

# E.g.
dokku config:set my-app DOKKU_LETSENCRYPT_EMAIL=contact@akbal.dev

# We can set the contact email globally too, so it works for any application.
dokku config:set --global DOKKU_LETSENCRYPT_EMAIL=<email>

Now its time to generate a certificate for our application.

dokku letsencrypt <app>

# E.g.
dokku letsencrypt my-app

It was that easy to add HTTPS.

Check our super secure site!

Read more about configuring the letsencrypt plugin.

Scale processes

Scaling the processes is really easy, you just have to tell Dokku and it will handle everything.

­ƒûÑ These steps are done on the Dokku droplet.

dokku ps:scale <app> <process-type>=<count>

# E.g.
dokku ps:scale my-app web=1

# Even multiple types
dokku ps:scale my-app web=1 worker=2

Read more about scaling processes in Dokku.

9. Misc

Further knowledge

I encourage you to go to the Dokku documentation and toy with your now complete Dokku set up. You will learn many great things like how to read the logs of your application.

Troubleshooting

{% collapsible I need to identify what is going wrong %}

Enable Trace Mode.

In this mode output will be more verbose, helping you locate any error!

{% endcollapsible %}

{% collapsible Can't push code to Dokku remote %}

This might be because you have not added the private SSH Key to your terminal, try adding it!

{% endcollapsible %}

{% collapsible Dokku remote Git branch is ahead of time %}

I've been in a situation where I had commited to Dokku and went back locally to an earlier commit, this created many problems when trying to push again, because Dokku's own git repository was in the future. Thankfully, theres a very easy solution: force push! ­ƒÆ¬

git push --force dokku <branch>

# E.g.
git push --force dokku main

{% endcollapsible %}

{% collapsible Agent returned different signature type ssh-rsa (expected rsa-sha2-512) (Windows 10) %}

It seems that the ssh binaries on windows 10 are outdated and the connection is refused by the server, a solution is to use Git Bash or any other terminal with updated binaries, more on this issue here

{% endcollapsible %}

10. End

I hope you have enjoyed my complete guide and find it useful, It has taken many days to bring you this knowledge.

Useful links

These are some resources that can be very useful through your Dokku journey.

• Dokku cheatsheet by jejete
• Dokku Slack community

Self promotion

If you have found this tutorial useful then you should follow me, I will be posting more interesting content! :')

• GitHub
• Twitter
• Dev.to
• Medium
• LinkedIn

Or support me financially. <3

• GitHub Sponsors
• LiberaPay
• PayPal

If you want to continue learning check out this "How to completely secure an Ubuntu server" article by myself.

Credit

This guide was made possible thanks to many wonderful people.

• Linuxize
• DigitalOcean and their community
• AskUbuntu for the troubleshooting help