DEV Community: Alejandro Akbal

How to preload images for canvas in JavaScript

Alejandro Akbal — Tue, 17 Jan 2023 11:26:51 +0000

Introduction

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! 🥰

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!

How to create a test database with Laravel Sail

Alejandro Akbal — Sun, 21 Aug 2022 17:16:13 +0000

Introduction

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! 🥰

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!

How to build a free plan in Laravel Spark

Alejandro Akbal — Sun, 10 Oct 2021 11:20:23 +0000

Introduction

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! 🥰

Or support me financially. 💸

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!

How to roll back a Dokku deployment

Alejandro Akbal — Sun, 25 Jul 2021 08:50:03 +0000

Introduction

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! 🥰

Or support me financially. 💸

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!

How to deploy git submodules to CapRover

Alejandro Akbal — Mon, 14 Jun 2021 14:57:57 +0000

Introduction

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! 🥰

Or support me financially. 💸

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!

Earn money with the AdGuard Affiliate Program

Alejandro Akbal — Fri, 30 Apr 2021 14:15:01 +0000

Introduction

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.

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! 🥰

Or support me financially. 💸

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!

How to detect and update to the latest version with Nuxt PWA

Alejandro Akbal — Thu, 11 Mar 2021 16:05:56 +0000

Introduction

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! 🥰

Or support me financially. 💸

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!

How to set up Matomo analytics in your Hashnode blog

Alejandro Akbal — Sat, 16 Jan 2021 21:51:18 +0000

Introduction

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! 🥰

Or support me financially. 💸

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!

How to set up automatic updates on Ubuntu server

Alejandro Akbal — Fri, 15 Jan 2021 14:00:34 +0000

Introduction

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! 🥰

Or support me financially. 💸

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!

How to remove unused Docker resources

Alejandro Akbal — Wed, 16 Dec 2020 15:38:52 +0000

Introduction

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 lets 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 little 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 voila, 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! 🥰

Or support me financially. 💸

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!

How to free up disk space on Ubuntu Server

Alejandro Akbal — Tue, 15 Dec 2020 11:04:47 +0000

Introduction

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 lets 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, lets find out what the biggest files on our system are.

# Find biggest files in "/" and show their size in human readable format
sudo du -a -h /

# Sort the output
sort -n -r

# Show only the top 15 results
head -n 15

# Combined in a one liner
sudo du -a -h / | sort -n -r | head -n 15

And then delete them

# Delete a file
sudo rm /path/to/file

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

End

What 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! 🥰

Or support me financially. 💸

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!

How to completely secure an Ubuntu server

Alejandro Akbal — Wed, 02 Dec 2020 12:03:30 +0000

Introduction

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! :')

Or support me financially. <3

Credit

Thanks to

Any linked website and community for their wonderful tutorials and help

DEV Community: Alejandro Akbal

How to preload images for canvas in JavaScript

Introduction

Preload images

End

Self-promotion

Conclusion

How to create a test database with Laravel Sail

Introduction

Before we start

Preface

Requirements

Database setup

PHPUnit configuration

Run the tests

End

Self-promotion

Conclusion

How to build a free plan in Laravel Spark

Introduction

Before we start

Preface

Requirements

Laravel Spark installation

Laravel Spark plan configuration

Modify User model

Getting the User's plan

End

Self-promotion

Conclusion

How to roll back a Dokku deployment

Introduction

Before we start

Preface

Requirements

Get the commit hash

How to rollback

End

Self-promotion

Conclusion

How to deploy git submodules to CapRover

Introduction

Before we start

Preface

The problem

First step: Create a Dockerfile

Second step: Include .git directory in the tar

Third step: Deploy the tar

End

Self-promotion

Conclusion

Earn money with the AdGuard Affiliate Program

Introduction

How it works

Register

Set a payment method

Share

Get paid

End

Self-promotion

Conclusion

How to detect and update to the latest version with Nuxt PWA

Introduction

Before we start

Requirements

Create a new plugin

Add the plugin to the Nuxt config

End

Self-promotion

Conclusion

How to set up Matomo analytics in your Hashnode blog

Introduction

Before we start

Requirements

New Matomo website

Add Matomo integration

End

What's next?

Self-promotion

Conclusion