Dr. Kibria

14 mysterious JavaScript features worth knowing

Mohammad Golam Kibria — Wed, 25 Jan 2023 16:04:14 GMT

JavaScript is a powerful and flexible programming language, but it also has some unique features and behavior that can be considered "weird" or "non-intuitive" to some developers. Here are a few examples:

Automatic type coercion:

JavaScript is a loosely typed language, which means that the interpreter will automatically convert values from one type to another when necessary. This can lead to unexpected results, for example:

console.log(1 + "2");  // "12" (string concatenation)
console.log([] + []); // "" (empty string)
console.log([1,2,3] == "1,2,3"); // true (type coercion)

Equality comparison:

JavaScript has two types of equality comparison: "==" and "===". The "==" operator performs type coercion if necessary, while the "===" operator compares values without coercion. This can lead to unexpected results, for example:

console.log(1 == true);  // true (type coercion)
console.log(1 === true); // false (no coercion)
console.log(null == undefined); // true
console.log(null === undefined); // false

Hoisting:

In JavaScript, variable and function declarations are "hoisted" to the top of their scope, which means that they are accessible before they are declared. This can lead to unexpected results, for example:

console.log(x);   // undefined (x is hoisted)
var x = 1;

console.log(y);   // ReferenceError: y is not defined
let y = 1;

Global variables:

In JavaScript, variables that are not declared inside a function are considered global variables and are accessible from anywhere in the code. This can lead to naming conflicts and unexpected results, for example:

var x = 1;
function test() {
  console.log(x);   // 1 (x is global)
}
test();

The 'this' keyword:

In JavaScript, the value of this keyword is determined by how a function is called, not where it is defined. This can lead to unexpected results, for example:

const obj = {
  name: "John",
  printName: function() {
    console.log(this.name);
  }
};

const print = obj.printName;
print();  // undefined (this is not bound to obj)

Function scope:

In JavaScript, function scope is used instead of block scope. This can lead to unexpected results, for example:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// 3 3 3 (i is in the same scope)

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// 0 1 2 (i is in different scope)

Prototype-based inheritance:

JavaScript is a prototype-based language, which means that objects inherit properties and methods from other objects through prototypes. This can be different from traditional class-based inheritance and can lead to unexpected results, for example:

const animal = {
  eats: true,
  walk() {
    console.log("Animal can walk");
  }
};
const rabbit = Object.create(animal);
rabbit.jumps = true;
console.log(rabbit.eats);  // true (inherited from animal)
console.log(rabbit.jumps); // true (defined on rabbit)

Automatic semicolon insertion:

JavaScript's automatic semicolon insertion (ASI) feature can lead to unexpected results if not used correctly. For example:

const x = 5
console.log(x) // 5

In this example, JavaScript inserts a semicolon after the const x = 5 statement, which is treated as a separate statement from the console.log(x). As a result, x is assigned the value 5 instead of the intended console.log(x) statement.

Function expressions vs function declarations:

The difference in how they are handled by JavaScript's hoisting feature can lead to unexpected results if not used correctly. For example:

foo(); // ReferenceError

const foo = function() {
  console.log('bar');
};

In this example, the function is assigned to a variable foo but due to hoisting the variable is hoisted but the assignment is not and thus the reference error.

The NaN value:

JavaScript has a special NaN value, which stands for "not a number." When a mathematical operation cannot produce a valid number, it returns NaN. This can lead to unexpected results, for example:

console.log(0 / 0); // NaN
console.log(isNaN(NaN)); // true
console.log(NaN == NaN); // false

Implicit type conversion:

JavaScript can perform implicit type conversion in certain situations, such as when comparing values or using certain operators. For example:

console.log("5" == 5); // true
console.log("5" === 5); // false
console.log(true + 1); // 2
console.log([] + {}); // "[object Object]"

In these examples, JavaScript performs an implicit type conversion, which can lead to unexpected results if not taken into account.

Property access on null and undefined:

In JavaScript, trying to access a property on a null or undefined value will not throw an error, but instead will return undefined. For example:

console.log(null.x); // undefined
console.log(undefined.x); // undefined
console.log({}.x); // undefined

In these examples, trying to access a property on a null or undefined value will not throw an error, but it can lead to unexpected results if not handled properly.

The == operator:

JavaScript's == operator compares values for equality, but it can perform type coercion if the operands are of different types. This can lead to unexpected results, for example:

console.log('' == 0); // true
console.log(null == undefined); // true
console.log([] == false); // true

In these examples, JavaScript's == operator performs type coercion and returns true even though the values are not equal in the traditional sense.

Function scope:

JavaScript uses function scope, which means that variables declared within a function are only accessible within that function. However, variables declared with the var keyword are also accessible within the entire function scope, which can lead to unexpected results. For example:

function test() {
  var x = 1;
  if (true) {
    var x = 2;
    console.log(x); // 2
  }
  console.log(x); // 2
}
test();

In this example, the variable x is declared twice within the same function scope, and the second declaration overwrites the first. This can lead to unexpected results if not handled properly.

Conclusion:

These are examples of unique features and behavior of JavaScript that can be considered "weird" or "non-intuitive" to some developers. Understanding these features can help you write more efficient and effective code, and avoid potential bugs in your JavaScript programs.

Javascript Type coercion with examples

Mohammad Golam Kibria — Tue, 17 Jan 2023 16:18:00 GMT

In JavaScript, type coercion refers to the way in which the interpreter automatically converts values from one data type to another, as needed, during the execution of a program.

Here are a few examples of type coercion in JavaScript:

👉 When an operator is applied to operands of different types, the operands are often coerced to a common type before the operation is performed. For example:

console.log(1 + '2');  // Output: '12'

In this example, the number 1 is coerced to a string before it is concatenated with the string '2'.

👉 When a non-boolean value is used in a boolean context, it is coerced to a boolean. For example:

console.log(!!'hello');  // Output: true
console.log(!!'');       // Output: false

In these examples, the string 'hello' is coerced to the boolean value true, and the empty string is coerced to the boolean value false.

👉 When a function is called with too few or too many arguments, the missing arguments are filled in with the value undefined, and excess arguments are ignored. This is called "argument coercion". For example:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('Alice');  // Output: 'Hello, Alice!'
greet();         // Output: 'Hello, undefined!'
greet('Bob', 'Charlie');  // Output: 'Hello, Bob!'

👉 When an object is used in a context where a primitive value is expected, the object is coerced to a primitive value using the internal ToPrimitive operation. For example:

console.log(1 + {});  // Output: '1[object Object]'

In this example, the object {} is coerced to the string '[object Object]', which is then concatenated with the number 1 to produce the string '1[object Object]'.

👉 When the + operator is used to concatenate a string and a number, the number is coerced to a string before the concatenation is performed. For example:

console.log(3 + 4 + '5');  // Output: '75'

In this example, the numbers 3 and 4 are first summed to produce the number 7, which is then concatenated with the string '5' to produce the string '75'.

👉 When the == operator is used to compare a value to null or undefined, it performs a type coercion before performing the comparison. For example:

console.log(null == undefined);  // Output: true

In this example, the == operator first coerces both null and undefined to the same type (which is undefined), and then performs the comparison. Since both values are now of the same type and value, the comparison returns true.

I hope these examples help to further illustrate the concept of type coercion in JavaScript.

JavaScript explanation: this, apply and bind

Mohammad Golam Kibria — Wed, 11 Jan 2023 16:51:00 GMT

Hi there! In this post I would like to briefly explain what is the meaning of this , apply and bind.

About this keyword

In JavaScript, this refers to the object that is executing the current function. The value of this can be determined by how a function is called.

Here are a few ways that the value of this can be determined:

In the global scope (outside of any function), this refers to the global object. In a web browser, the global object is window.
Inside a function, the value of this depends on how the function is called. If the function is called as a method of an object (e.g., obj.method()), this will refer to the object (obj). If the function is called as a standalone function (e.g., function()), this will refer to the global object.
Inside an arrow function, the value of this is determined by the surrounding context. Arrow functions do not have their own this value, so they inherit the this value of the surrounding context.

Here are a few examples to illustrate how this can be determined:

// In the global scope
console.log(this);  // Output: window (in a web browser)

const obj = {
  x: 10,
  y: 20,
  sum: function() {
    console.log(this);  // Output: obj
    console.log(this.x + this.y);  // Output: 30
  }
};
obj.sum();

const standAlone = function() {
  console.log(this);  // Output: window (in a web browser)
};
standAlone();

apply and bind

apply and bind are methods that can be used to specify the value of this when calling a function.

Here is an example of how apply can be used:

const obj = {
  x: 10,
  y: 20
};

function add() {
  return this.x + this.y;
}

console.log(add.apply(obj));  // Output: 30

In the example above, the apply method is called on the add function and is passed the obj object as an argument. This sets the value of this inside the add function to obj, so when this.x and this.y are accessed, they refer to obj.x and obj.y, respectively. The apply method is called on the add function and the result of add is logged to the console.

Here is an example of how bind can be used:

const obj = {
  x: 10,
  y: 20
};

function add() {
  return this.x + this.y;
}

const boundAdd = add.bind(obj);
console.log(boundAdd());  // Output: 30

In the example above, the bind method is called on the add function and is passed the obj object as an argument. This creates a new function, called boundAdd, that has its this value set to obj. When boundAdd is called, it will execute the code in the add function with this set to obj.

apply vs bind

The main difference between apply and bind is that apply calls a function with a specified this value and arguments, whereas bind returns a new function with a specified this value and arguments.

Here is an example that demonstrates the difference between apply and bind:

const obj = {
  x: 10,
  y: 20
};

function add(a, b) {
  return this.x + this.y + a + b;
}

console.log(add.apply(obj, [1, 2]));  // Output: 33

const boundAdd = add.bind(obj, 1, 2);
console.log(boundAdd());  // Output: 33

In the example above, the apply method is called on the add function and is passed the obj object as the this value and the array [1, 2] as the arguments. This calls the add function with this set to obj and the arguments 1 and 2.

The bind method is called on the add function and is passed the obj object as the this value and the arguments 1 and 2. This creates a new function called boundAdd that has its this value set to obj and its arguments set to 1 and 2. When boundAdd is called, it will execute the code in the add function with this set to obj and the arguments 1 and 2.

So, in summary, the main difference between apply and bind is that apply calls a function with a specified this value and arguments, whereas bind returns a new function with a specified this value and arguments.

Authentication vs Authorization

Mohammad Golam Kibria — Tue, 03 Jan 2023 13:57:29 GMT

If you are struggling with the concept of authentication and authorization, well here is kinda good news. These two concepts are not as hard as you are thinking but really important to build any kind of software application. After reading this post, you will have a solid understanding of these two "seems like confusing concepts".

What are they?

Authentication is the process of verifying the identity of a user, device, or system. It involves verifying that the entity claiming to be who they say they are actually is who they claim to be.

Authorization is the process of granting or denying access to resources or actions based on the identity of the user, device, or system. It involves deciding whether an authenticated entity has the necessary permissions to perform a specific action or access a particular resource.

Here are some examples.

Online banking: When you log into your online banking account, you are required to enter your username and password. This is the authentication step, as it verifies your identity. Once you are authenticated, you are then able to perform certain actions, such as transferring money or viewing your account balance. This is the authorization step, as it determines what you are allowed to do based on your authenticated identity.
Accessing a secure building: When you enter a secure building, you may be required to present a badge or swipe a card to gain entry. This is the authentication step, as it verifies that you are an authorized employee or visitor. Once you are authenticated, you may only be allowed to access certain areas of the building based on your role or clearance level. This is the authorization step, as it grants or denies access to specific areas based on your authenticated identity.
Using a smartphone app: When you download and open a smartphone app, you may be required to log in with your username and password. This is the authentication step, as it verifies your identity. Once you are authenticated, the app may grant you access to certain features or functions based on your permissions. For example, a productivity app may allow you to create and edit documents, but not delete them, based on your authorization level.

Now that you understand the basics, let's advance further.

What are the available technologies?

You might be wondering which technologies are typically used to achieve this in a web application. Well, there are several technologies that can be used.

For authentication:

Single Sign-On (SSO) systems: SSO systems allow users to log in to multiple web applications using a single set of credentials, such as a username and password. This can make it easier for users to access multiple applications without having to remember multiple sets of login information. SSO systems are often used in enterprise environments, where users may need to access a large number of internal applications.
OAuth: OAuth is an open standard for authorization that allows users to grant third-party applications access to their resources without sharing their login credentials. OAuth is commonly used for social media login integrations, where users can log in to a web application using their Facebook or Google accounts.
JSON Web Tokens (JWTs): JWTs are a popular method for authenticating and authorizing users in web applications. They are digitally signed tokens that contain information about the user and their permissions. JWTs can be easily passed between servers and clients, making them useful for API authentication and authorization.
Cookies: Cookies are small pieces of data that are stored on the user's device and sent back to the server with each request. They can be used to store information about the user's session, such as their authenticated identity and permissions.
HTTP Basic and Digest Authentication: HTTP Basic and Digest Authentication are methods for authenticating users using the HTTP protocol. They involve sending the user's login credentials with each request, either in the header or as part of the URL.
Biometric authentication: Biometric authentication involves using unique physical characteristics, such as a fingerprint or facial recognition, to verify the identity of a user. This type of authentication is becoming more common on smartphones and other devices.
Multi-Factor Authentication (MFA): MFA involves using more than one method to verify the identity of a user. This can include something the user knows (such as a password), something the user has (such as a phone or security token), or something the user is (such as a fingerprint). MFA provides an additional layer of security by requiring multiple pieces of evidence to verify the user's identity.

And for authorizations:

Role-Based Access Control (RBAC): RBAC is a method of granting or denying access to resources based on the user's role or job function. Users are assigned to specific roles, and each role is given a set of permissions that determine what actions the user is allowed to perform.
Access Control Lists (ACLs): ACLs are a way of specifying which users or groups are allowed to access specific resources. Each resource is associated with an ACL that lists the users or groups that are allowed to access it, as well as the actions they are allowed to perform.
OAuth: OAuth is an open standard for authorization that allows users to grant third-party applications access to their resources without sharing their login credentials. OAuth is commonly used for social media login integrations, where users can log in to a web application using their Facebook or Google accounts.
JSON Web Tokens (JWTs): JWTs are a popular method for authenticating and authorizing users in web applications. They are digitally signed tokens that contain information about the user and their permissions. JWTs can be easily passed between servers and clients, making them useful for API authentication and authorization.
Cookies: Cookies are small pieces of data that are stored on the user's device and sent back to the server with each request. They can be used to store information about the user's session, such as their authenticated identity and permissions.
HTTP Basic and Digest Authentication: HTTP Basic and Digest Authentication are methods for authenticating users using the HTTP protocol. They involve sending the user's login credentials with each request, either in the header or as part of the URL.

So, what is the usual flow of authentication and authorization?

The authentication and authorization flow of a web application typically involves the following steps:

The user attempts to access a protected resource or perform a restricted action on the web application.
The web application prompts the user to enter their login credentials, such as a username and password.
The user enters their credentials and submits them to the web application.
The web application verifies the user's credentials against a stored set of valid credentials. This is the authentication step.
If the user's credentials are valid, the web application grants the user access to the protected resource or allows them to perform the restricted action. This is the authorization step.
If the user's credentials are not valid, the web application denies access and may prompt the user to try again or provide an error message.

Depending on the specific technology being used for authentication and authorization, the details of this process may vary. For example, if the web application is using OAuth for authentication, the user may be redirected to a login page hosted by a third-party provider (such as Google or Facebook) to enter their credentials. If the web application is using JWTs for authorization, the user may be issued a token upon successful authentication that contains information about their permissions and is passed with each subsequent request to the web application.

What is the typical HTTP response?

Here is a description of typical HTTP responses for both authentication and authorization in success and error states:

Authentication success:

If the user's login credentials are successfully verified, the web application may return an HTTP 200 OK response.
In some cases, the web application may also return an HTTP 302 Found response, redirecting the user to a protected resource or the home page of the application.

Authentication error:

If the user's login credentials are invalid or cannot be verified, the web application may return an HTTP 401 Unauthorized response.
The web application may also include a WWW-Authenticate header in the response, indicating the authentication method being used (such as Basic or Digest) and providing a challenge for the user to retry the authentication process.

Authorization success:

If the user is successfully authorized to access a protected resource or perform a restricted action, the web application may return an HTTP 200 OK response.
Depending on the specific resource or action being accessed, the web application may also return other HTTP status codes, such as HTTP 201 Created for resource creation or HTTP 204 No Content for actions that do not return a response body.

Authorization error:

If the user is not authorized to access a protected resource or perform a restricted action, the web application may return an HTTP 403 Forbidden response.
The web application may also include a WWW-Authenticate header in the response, indicating the authorization method being used and providing a challenge for the user to retry the authorization process.

In conclusion, if the system asks "Who are you?" to validate the right person, this is authentication. When it checks "Are you allowed to do that?" by checking the user's permission to access the resources, you guessed it right, this is an authorization. If you like this post, please share and subscribe to my blog.

Happy New Year 2023!

Directus installation guide on oracle cloud using docker

Mohammad Golam Kibria — Wed, 16 Nov 2022 22:59:07 GMT

Hi good people! In my other post, I reviewed Directus which is a headless data platform and can be used as a backend API with a built-in data studio (admin panel). I highly recommend you read that post if you are new to Directus.

In this post, I will guide you on how to install Directus using docker on Oracle Cloud. We will be using aaPanel which is a great free and stable server control panel. If you haven't heard of it, I have a review and a full installation guide available for you.

Pre-requisites

Oracle VM with aaPanel installed. Click here for the aaPanel installation guide.
Some docker knowledge
Domain name added to Cloudflare, and Origin server certificate
Google account for backup

Step 1: Install the docker in aaPanel

You can skip this if you already have docker installed. Otherwise, follow the steps below.

log in to the panel
go to the App stores of the panel
search for docker
install Docker manager

Step 2: DNS setup

Since DNS will take some time to propagate, we will start with the domain. I recommend using Cloudflare as they have free features with free origin server certificates.

Log in to the Cloudflare dashboard
Add your domain to Cloudflare if you have not done yet
Add an A record to the server's public IP address. If you are planning to use the root domain, use @ in the name. I will be using a subdomain.
Be sure to check the proxy status is On.
Go to the SSL/TLS section of your domain, and click origin server. Now create a cretificate for your domain. After generating, save the Private key and Certificate in a file. We will need these to install SSL and reverse proxy later.

Step 3: Set up MySQL database

Come back to the aaPanel. In this step, we will create a database for directus. Follow the steps.

Navigate to the database and click Add Database
Write the DB Name: directus, username: directus, permission: specified IP and write down your server public IP.
Click Submit.

This will create a database. Don't forget to change the DB name, username, and password according to your choice.

Step 4: Docker compose template

In this step, we will write a docker-compose file with all the required configuration options of Directus and persistent storage with docker volume.

We will create a YAML file in a directory called 'directus' under the /www directory. Later we will configure the required volume in this directory and finally back up this folder. So all our volume files and YAML file will be backed up.

Follow steps:

In aaPanel, navigate to Files and go to /www directory
create a directory named 'directus'
create a file docker-compose.yaml under directus folder
double click to edit the file and paste the following code

version: '3'
services:

  directus:
    container_name: directus
    image: directus/directus:9.20.4
    restart: always
    ports:
      - 8055:8055
    volumes:
      # By default, uploads are stored in /directus/uploads
      # Always make sure your volumes matches the storage root when using
      # local driver
      - ./uploads:/directus/uploads
      # Make sure to also mount the volume when using SQLite
      # - ./database:/directus/database
      # If you want to load extensions from the host
      #- ./extensions:/directus/extensions
    environment:
      KEY: '255d861b-5ea1-5996-9aa3-7f6rg47h-922530ec40b1'
      SECRET: '6116487b-cda1-52c2-fu75hk-b5b5-c8022c45e263'

      DB_CLIENT: 'mysql'
      DB_HOST: 'server_public_ip'
      DB_PORT: '3306'
      DB_DATABASE: 'directus'
      DB_USER: 'directus'
      DB_PASSWORD: 'mysql_password'

      ADMIN_EMAIL: 'admin@example.com'
      ADMIN_PASSWORD: 'd1r3ctu5'

      # Make sure to set this in production
      # (see https://docs.directus.io/self-hosted/config-options#general)
      PUBLIC_URL: 'https://directus.example.com'

Please change the DB configuration, key, secret, and admin credentials according to your need. You can also add additional environmental variables here to configure Directus. Full options here.

Step 5: Run the container

To run the container in aaPanel, you must first import the compose file.

Navigate to Docker > compose template.
Now click add and select the local template tab.
Enter /www/directus in the search box and click search. You must see the newly created yaml file. Select it from the list and submit it.

Then we need to pull the image. On the same page, click the pull image link of the directus template. A directus (v9.20.4) image will be pulled based on the image we specified in yaml file.

Now it's time to run a container from the pulled image. To do so-

Navigate to Docker > Container in the aaPanel
Click Add Container and chose the compose tab.
Select directus from the dropdown and enter a name.
After submitting the dialog, a new container will be created and listed.
Wait for a minute or two (give some time to boot up directus) and see the log of the container. In the log, you must see 'Server started at http://0.0.0.0:8055' which indicates your directus is running successfully.

Step 6: Open the port on the security group

On the docker-compose file, we exposed the 8055 port on the host. So we need to open this port. Follow this instruction. Make sure MySQL port 3306 is there.

Next, come back to aaPanel to release ports from inside the server. Go to the security page, and open the 8055 ports in the Firewall section. For example, type 8055 in the port, directus in the description, and click open. Do a similar thing for other ports if not already there.

At this stage, you should see a running directus on URL: http://server_public_ip:8055

You can now log in with the credentials you specified in yaml file and see if everything is working or not. For example, try to upload a file. If the upload does not succeed, you should change the upload directory permission inside /www/directus directory. Try the following code:

sudo chown -R 1000:1000 ./uploads

Step 7: Reverse proxy with Nginx

In this step, we will set up a reverse Nginx proxy. It will proxy all the requests from our domain to http://localhost:8055. To configure SSL, we need a Cloudflare origin server certificate from step 2.

Go to the website page on aaPanael, and click add site under PHP project.
Enter the domain, FTP - no, Database - No, PHP version - static, and click submit. Refresh the page, you can see a new site is created.
Click the site name. The site config dialog will open.
Go to SSL > Other certificate, paste the Private key and Certificate and Save.
Turn On the Force HTTPS option.
Go to the Reverse proxy section and add a proxy.
Enter the proxy name: directus, target URL: http://localhost:8055, and submit.

Test your domain in the browser and you should see your new directus website. Now you have successfully configured a reverse proxy for the directus docker container. The next step is optional but very important.

Step 8: Configure backup

In this section, we will configure a backup for our newly created directus with cron. In aaPanel, there are several plugins for that - Google Drive, S3, and remote FTP. Feel free to use whatever you like. But I would go for Google Drive.

First, you have to install the plugin in aaPanel. Go to App Store, search for google drive and install the plugin. After installation, click the settings. Complete the Google Drive verification process according to the instruction.

Now we will create 2 cron tasks for the backup - one for the database and the other for the directory (/www/directus) in our server.

Database Backup

Go to the Cron page of aaPanel and add a task according to the instruction:

Type of Task: Backup Database
Execution cycle: choose how you want to backup
Backup database: select the directus or all
Backup to: Google Drive
save the task

Directory Backup

Go to the Cron page of aaPanel and add a task according to the instruction:

Type of Task: Backup Directory
Execution cycle: choose how you want to backup
Directory to backup: select /www/directus/
Backup to: Google Drive
save the task

The tasks will now be available in the task list. To test a task, click execute link and wait for some time. You will see your backup is now uploaded to Google Drive.

Congratulations! You now successfully installed a directus instance on oracle cloud and configured the SSL, reverse proxy, and backup strategy to Google Drive. Now go to your directus admin panel by visiting yourdomain.com

Directus - The leading Headless Data Platform

Mohammad Golam Kibria — Fri, 11 Nov 2022 11:20:22 GMT

Directus called itself "the leading Headless Data Platform", which is layers on top of any new or existing SQL database and introspects the schema, providing both GraphQL+REST APIs and a beautiful and intuitive GUI app ideal for technical and non-technical users.

You probably get the idea already. It is the world's leading modern, open-source data platform software.

In this post, I will give you my opinion about Directus from a developer's perspective. I have used it in one of my hobby projects. I liked it and planning to do more with it.

Why you might need this?

Any modern web project requires storing, managing, connecting, searching visualizing data. Directus provide all of that. It is a developer toolkit that enables you to develop virtually any data-driven project.

Writing the backend of any project requires a lot of time and resources. Using Directus, you will get instant API for all your data.

Authentication and authorization are hard to implement. Directus gives you built-in authentication and Role Based Access Control for your data. You can create different roles and configure permissions for all CRUD operations. You can also manage users and assign them to any role you wish. So, if you are thinking about API about login or password resets, it is there.

In, the Data Model interface, you can model your database tables visually just like you normally do in any SQL database GUI. But in Directus, you can have much more options for: schema (relationship, constrain), field, interface (e.g autocomplete, map), display, validations, etc.

Like Zapier, you can automate anything by using its flow system. You can configure actions for any Data events (CRUD), webhook, schedule with CRON and transform and transfer data to another flow. It is possible to use javascript and bind dynamic values inside flow actions and also send emails.

A file manager is built-in where you can store files, edit images, create virtual folders, and configure storage using a local file system or S3-compatible service. Its file API gives you on-the-fly image resizing capability which also supports custom image transformation presets.

Now, imagine how much time you need to rebuild all of those features. You want to build the backend with an admin panel very quickly right? You should try Directus. It has also JS SDK, which helps you to interact with its API from any frontend framework.

But wait, rather than using only CRUD operations, you should implement your own business logic at the backend right? You can extend Directus and write custom endpoints, hooks, layouts, etc. It uses Node.JS in the backend and Vue.JS in the frontend for Data Studio.

It has all the great features, documentation is not bad, but lacks tutorials. They have a strong active community.

Composition

Every Directus project comprises 3 layers

Data layer. Any new or existing SQL database. No vendor locking
Data Engine & API (REST & GraphQL) for developers. It inspects database schema and provides you instant API, full CRUD (Create, Read, Update and Delete) operations, authentication, Role Based Access Control (RBAC), workflow automation, asset transformation, and much more.
Data Studio. A beautiful no-code app for business users to browse, manage and visualize data. Technical users can model all the data and complex relationships using the GUI (Graphical User Interface).

Common use cases for using Directus

Headless CMS
Backend with Admin Panel
Building Internal Apps and Business Intelligence
SaaS Applications
Robotics and IoT devices
Games

Free cloud hosting instance

They have completely free cloud options where you can get an instance very quickly to get started or build a proof of concept. They have also paid options.

Self-hosting

Their source code is open on GitHub and you can install it on your own server like any node.js app. Also, their docker image is available on the docker hub.

Official Website: https://directus.io/

Take a look at their video demonstration

aaPanel performance test on DigitalOcean, Vultr, and Hetzner

Mohammad Golam Kibria — Mon, 07 Nov 2022 22:06:52 GMT

I have been using aaPanel for over a year on Oracle cloud. I have also used DigitalOcean droplet for over 8 years and have experience with Vultr and Hetzner. Last few months, I have been publishing different posts about aaPanel installing, reviewing, ghost installation, etc. I was thinking, Why not test aaPanel in different cloud providers? So, in this post, I would love to share my recent experiment with aaPanel performance on DigitalOcean, Vultr, and Hetzner.

💡

All opinions in this post are from my observational study and are not influenced by any providers.

Objective

To find out which provider's entry-level VPS (virtual private server) is good for optimum aaPanel performance.

Methodology

3 brand new entry-level VPS was created and aaPanel was installed on DigitalOcean, Vultr, and Hetzner one by one. Ubuntu 22.04 LTS was used as an Operating system across all of the VPS. aaPanel was installed using the command prompt. aaPanel installation script gives us the total installation time required. After installation, some software was installed (see the list below). The time required for all installations was recorded using a stopwatch. After installing all the software, each VPS was observed for 30 minutes. Performance data were obtained from the provider's usage graphs and aaPanel's built-in server monitoring graphs. Then it was manually calculated. VPS provider inclusion criteria were personal choice and ease of use.

Results:

To install aaPanel, DigitalOcean VPS took 2 minutes and others took 1 minute. The time to install the software was 64, 44, and 41 minutes for DigitalOcean, Vultr, and Hetzner respectively. During software installation, all of the VPS used 100% CPU while during idle time DigitalOcean used 7% of CPU. On the other hand, Vultr, and Hetzner used 14% of the CPU.

Time required during installation

Provider	aaPanel Install time	Software Install time
DigitalOcean	2 mins	64 mins
Vultr	1 min	44 mins
Hetzner	1 min	41 mins

CPU usage comparison

Provider	Max CPU load during installation	Avg CPU load during Idle
DigitalOcean	100%	7%
Vultr	100%	14%
Hetzner	100%	14%

Time and resource usage

Entry-level VPS: resources comparison

provider	CPU	RAM	SSD	Bandwidth	Location	Price
DigitalOcean	1 CPU	1 GB	25 GB	1 TB	Germany	$6
Vultr	1 vCPU	1 GB	25 GB	1 TB	Germany	$5
Hetzner	1 vCPU	2 GB	20 GB	20 TB	Germany	$4.51

Among the 3 providers, Vultr is lacking metrics in server monitoring.

Discussion

As an entry-level VPS, Hetzner seems to be a better choice in terms of price vs resource calculation. Hetzner and Vultr both seem to be more performant than DigitalOcean where Hetzner is slightly ahead of the race.

When installing software, aaPanel compile and build (other than CentOS 7) from the source within the server for the best performance and it will take time. In my case, I have used Ubuntu 22.04 LTS intentionally which will give a compilation guarantee. So, the time to take install software is a good indicator of measuring performance, in my opinion.

All the provider's control panels and user experience are somewhat the same but Hetzner has a very clearcut interface.

Including more VPS providers, using more deterministic factors, and performing statistical tests would definitely improve the findings.

My Opinion

For hobby projects and personal blogs (e.g ghost) hosting, any of the prover's VPS will be more than enough where aaPanel will be performing optimally. For production and high volume usage, use at least 4 GB RAM and 2 vCPUs.

Installed Software List

Nginx 1.21
MySQL 8.0
PHP 8.0
phpMyAdmin 5.0
Node Manager (aaPanel plugin)
Node.Js v18.2.1
Docker Manager (aaPanel plugin)

Affiliate links

If you want to try any of the providers for free, please use the following links. You will –

Get $200 free credits on DigitalOcean.
Get $100 free credits on Vultr.
Get $20 free creadits on Hetzner.

Thanks 👋

I am migrating my site to self-hosted Ghost!

Mohammad Golam Kibria — Mon, 31 Oct 2022 00:35:49 GMT

Hi there!

I am currently migrating my site to self-hosted Ghost from WordPress.

I will write detail about why I made this decision.

Meanwhile, try exploring my site and give me your feedback.

Happy Halloween!

Install ghost on oracle cloud

Mohammad Golam Kibria — Mon, 10 Oct 2022 18:23:00 GMT

Ghost is a powerful, open-source blogging and content publishing platform. In this post, I will guide you to install ghost on oracle cloud and configure the domain, SSL, and backup strategy on Google Drive.

According to the official documentation, you can install ghost on different cloud providers like Digitalocean and Linode very easily with one click. But you have to pay monthly for that and there is some hassle regarding backups and restores. I have chosen Oracle Cloud because they have a very attractive free tier.

Now, there are 2 ways of installing ghost on a Linux server. By using ghost CLI and using docker. In this post, I will go for the docker image option.

I will also use aaPanel hosting panel for this. This is also free and comes with great features. I have reviewed this panel before and published a comprehensive guide on how to install it on oracle cloud.

Pre-requisites

Oracle VM with aaPanel installed. Click here for the aaPanel installation guide.
Some docker knowledge
Domain name for the blog added to Cloudflare, and Origin server certificate
Mailgun account for sending transitional emails
Google account for backup

Step 1: Install the docker

If you followed the aaPanel installation guide, you now have a fresh copy of aaPanel with Nginx, MySQL, PHP, and phpMyAdmin installed. Now it's time to install docker. Follow the steps below.

log in to the panel
go to the App stores of the panel
search for docker
install Docker manager.

Step 2: Domain DNS record setup

Since domain DNS will take some time to propagate, we will start with the domain. I recommend using Cloudflare as they have free features with free origin server certificates.

Log in to the Cloudflare dashboard
Add your domain to Cloudflare if you have not done yet
Add an A record to the server's public IP address. If you are planning to use the root domain, use @ in the name. I will be using a subdomain.
Be sure to check the proxy status is On.
Go to the SSL/TLS section of your domain, and click origin server. Now create a cretificate for your domain. After generating, save the Private key and Certificate in a file. We will need these to install SSL and reverse proxy later.

Step 3: Set up MySQL database

Come back to the aaPanel. In this step, we will create a database for ghost. Please write down the database info, we need it later. Follow the steps.

Navigate to the database and click Add Database
Write the DB Name: ghost_data, username: ghost_data, and write down all the database info.
Click Submit

This will create a database. Don't forget to change the DB name, username, and password according to your choice.

Step 4: Pull the ghost docker image

In this step, we will pull the ghost latest image from the docker hub. To do so:

In the aaPanel, go to the Docker page and navigate to the Image tab
Click the Pull Image button
Enter the image name ghost:latest and click submit

This will pull the latest ghost image and save it to the server.

Step 5: Compose the template

In this step, we will write a docker-compose template with all the configuration options of ghost and persistent storage with docker volume.

On aaPanel, go to the Compose template tab on the docker page and click Add Button
Write the template name: ghost and remark: ghost template and paste the following code into the content.

version: '3.3'

services:

  ghost:
    image: ghost:latest
    restart: always
    ports:
      - 2368:2368
    environment:
      # see https://ghost.org/docs/config/#configuration-options
      database__client: mysql
      database__connection__host: server_public_ip
      database__connection__user: database_user
      database__connection__password: database_pass
      database__connection__database: database_name
      
      #url change your domain
      url: https://yourdomain.com
      
      #mail
      mail__transport: SMTP
      mail__options__host: smtp_host
      mail__options__secure: false
      mail__options__port: 587
      mail__options__service: SES
      mail__options__auth__user: smtp_user
      mail__options__auth__pass: smtp_pass

      #NODE_ENV: development
    volumes:
      - /www/ghost_blog:/var/lib/ghost/content

Do not forget to change the server_public_ip, database_user, database_pass, and database_name with the info you saved while creating the database. Change your domain and mail-sending info from Mailgun or other providers.

Step 6: Run the container from the template

In this step, we will create and run a container from the template. Follow the steps-

In aaPanel, go to the compose tab and click Add compose project
In the dialog, select ghost as a template, enter ghost for name and click submit. You can see a project named ghost started with 1 container with it.
A minute later, go to the container tab. you might see container status is stopped. Let's examine the container log. Click the log link, on the right side of the container. You might see a database connection error. This is because database permission is set to local (when we created it) or there may be some port issue. Let's delete this project for now and fix all these issues in the next step. For this, click the delete link next to the log link.

Step 7: Open the port on the security group on oracle

On line 9, of the docker-compose file, we exposed the 2368 port on the host. So we need to open this port. Follow this instruction. Make sure MySQL port 3306 is there.

Next, come back to aaPanel to release ports from inside the server. Go to the security page, and open the 3306 and 2368 ports in the Firewall section. For example, type 3306 in the port, MySQL in the description, and click open. Do a similar thing for ghost port.

Next, go to the database page and modify the permission from the local server to the Specified IP and enter the server's public IP. Save the changes.

Next, perform step 6 again. In the log, you now see no error, and ghost is running fine.

Step 8: Reverse proxy with Nginx

In this step, we will set up a reverse Nginx proxy. It will proxy all the requests from our blog domain to http://localhost:2368. To configure SSL, we need a Cloudflare origin server certificate from step 2.

Go to the website page on aaPanael, and click add site under PHP project.
Enter the domain, FTP - no, Database - No, PHP version - static, and click submit. Refresh the page, you can see a new site is created.
Click the site name. The site config dialog will open.
Go to SSL > Other certificate, paste the Private key and Certificate and Save.
Turn On the Force HTTPS option.
Go to the Reverse proxy section and add a proxy.
Enter the proxy name: ghost, target URL: http://localhost:2368, and submit.

Test your domain in the browser and you should see your new ghost blog website. Now you have successfully configured a reverse proxy for the ghost docker container. The next step is optional but very important.

Step 9: Configure backup

In this section, we will configure a backup for our newly created ghost blog with cron. In aaPanel, there are several plugins for that - Google Drive, S3, and remote FTP. Feel free to use whatever you like. But I would go for Google Drive.

Now we will create 2 cron tasks for the backup - one for the database and the other for the ghost directory (/www/ghost_blog) in our server.

Database Backup

Go to the Cron page of aaPanel and add a task according to the instruction:

Type of Task: Backup Database
Execution cycle: choose how you want to backup
Backup database: select the ghost_data or all
Backup to: Google Drive
save the task

Directory Backup

Go to the Cron page of aaPanel and add a task according to the instruction:

Type of Task: Backup Directory
Execution cycle: choose how you want to backup
Directory to backup: select /www/ghost_blog/
Backup to: Google Drive
save the task

The tasks will now be available in the task list. To test a task, click execute link and wait for some time. You will see your backup is now uploaded to Google Drive.

Step 10: Update Ghost

Updating a ghost is really easy. follow the steps.

Remove the existing container in aaPanel (docker > container > delete).
Remove the existing ghost image (docker > image > delete).
Create a new container again using the template.

This should download the latest image from the docker hub and create a new container using the template.

Note: If you want to upgrade to a specific version, adjust your ghost version in the template from ghost:latest to ghost:5.25.5 for example. Then follow the above steps.

You can see the available version in the docker hub.

Congratulations! You now successfully installed a ghost blog on oracle cloud and configured the SSL, reverse proxy, and backup strategy to Google Drive. Now go to your ghost admin panel by visiting yourdomain.com/ghost/

Video Guide

cheers 👋

SBA Quiz

Mohammad Golam Kibria — Tue, 12 Jul 2022 13:06:00 GMT

A hobby project to exercise the react knowledge with context API.

App has the following features so far...

User registration, login, password reset
Browsing the public quiz
Browsing and filtering quizzes in quiz admin
Quiz CRUD (todo), Quiz play (todo), etc.

Technology Used

Frontend: React.Js, Bulma, CSS, HTML
Backend: Directus
Database: MySQL

What I did

For the frontend, I created react UI using Bulma CSS framework, custom Notification context API, written various custom react hooks for Axios client, user authentication, quiz admin, etc.

For the backend, I used Directus where I modeled all the databases tables. Directus has a js client but I have used the REST interface. Also configured authorization permission there. To learn more about Directus, click here.

Project URL: https://sba-quiz-frontend-react.pages.dev/

Source code: https://github.com/gkibria/sba_quiz_frontend_react

Installing aaPanel on oracle cloud virtual machine

Mohammad Golam Kibria — Wed, 29 Jun 2022 17:48:00 GMT

aaPanel is a free and open-source hosting control panel that can be installed on popular Linux distributions like Ubuntu, CentOS, Debian, etc. In this post, I would like to tell you step by step to installation instructions.

You can use any cloud provider for this but I am using the oracle cloud free tier. They have very attractive free cloud resources that you probably don't know. In summary, you can get

2 AMD-based VMs with 1 GB ram each
Arm-based Ampere A1 cores and 24 GB of memory usable as 1 VM or up to 4 VMs with 3,000 OCPU hours and 18,000 GB hours per month
2 Block Volumes Storage, 200 GB total
And many more. Check out their offerings.

Pre-requisites

An oracle cloud free tier account
knowledge of some basic Linux commands

Step 1: Creating the VM

In this step, we will create a new AMD-based VM, with CentOS 7 image. You can use other images (Ubuntu, Oracle Linux, CentOS 8, etc.) also. But there is a benefit to using CentOS 7. Later, when you install server software (Nginx, MySQL, etc.), aaPanel will give you 2 options - Fast and Compile. Fast will use pre-compiled binaries that are very fast to install but compile options are very stable because it will download sources, and compile them according to your server environment.

💡

If you use CentOS 7, installation of the subsequent software on aaPanel will be significantly fast. Otherwise, compilation will be done which will be time-consuming and resource intensive.

Let's create the VM.

Log In to your oracle cloud console
Go to your compute instance page and click create instance button.
Chose a name of the instance, e.g. aapanel-centos-7
Edit the Image and Shape > click Change image > Select CentOS, OS version to 7 > click Select image
Under Add SSH keys, you can generate key pairs (default option) if you haven't already done so. Download the private and public keys and keep them in a separate folder. This will be needed later to log in to the server. If you already have those keys, select upload public key and chose .pub file.
Finally, click create button. This will start the process and a few minutes later, your instance will be ready to install aaPanel.

Step 2: Installing aaPanel

In this step, we will log in to our newly created VM, update the server software, and install aaPanel. For this, we need some info - server_public_ip, username, and the private key that you used during the creation of the VM. You will find this information on the instance page under the instance access heading.

Open your terminal or command prompt and navigate to the folder where you kept the SSH keys
Log in to the VM using the following command. Replace username, server_public_ip, and your_private.key with your own info.

ssh username@server_public_ip -i your_private.key

Switch to the root user

sudo su -

Update the server

yum update

Install the aaPanel by entering the following code

yum install -y wget && wget -O install.sh http://www.aapanel.com/script/install_6.0_en.sh && bash install.sh aapanel

installation prompts

The installation will prompt you for some info and confirmations. Here are my response

installation directory /www - y
panel SSL - N (will configure it later)

If everything goes well, the installation process will end in around 8 minutes. After installation is finished, you will find some login credentials and ports information. Save this info, you need it for accessing the panel.

Step 3: Open ports in the firewall

You will find some port information from the previous step. You need to open these ports in the cloud provider's firewall. In our case, default security list. To find this page, search the keyword security list in the search box on the console. Alternatively, you can go there from the instance detail page > virtual cloud network > security lists under resources.

In the security list page, you must Add Ingress Rules for all the ports according to the following table

source type	source CIDR	IP protocol	Destination port range	Description
CIDR	0.0.0.0/0	TCP	port	aapanel

Step 4: Installing software modules

Now log in to the newly installed aapanel using the credentials. Immediately after login, you will be prompted to install the necessary stack (LNMP/LAMP). Choose your stack. For example, I will go for Nginx, MySQL 8, PHP 8, and phpMyAdmin 5. And never forget to check for the FAST option to install from binary.

Step 5: Installing SSL and panel domain

In this step, you need a domain name, to install SSL in your panel. You can use a subdomain also. I prefer to add a subdomain rather than a domain as a panel URL.

Add an A record to your domain DNS pointing to the server's Public IP. If you are using Cloudflare, be sure to uncheck the proxy.
In the aaPanel, go to Settings. Enter the selected domain in the domain text field under the security tab. When you click save, the panel will set the domain and you can no longer access it with the IP address. So, you may see a blank page. Replace the IP with your domain in the browser's address bar and log in again.
Now let's install SSL. Go to the settings, and click the Panel SSL switch under the security section. A dialog window will appear. Select the let's encrypt option, enter your email, check the terms, and submit. After a few moments, your panel will reload with the HTTPS protocol.

In certain cases, you may get some errors. If you can't log in to the panel, try removing the SSL options. Log in to the server via SSH, and enter the following command.

rm -f /www/server/panel/data/ssl.pl && /etc/init.d/bt restart

Other panel ssh commands can be found here.

Congratulations!

If you have come so far, I now have a clean copy of aaPanel installed with the necessary software and SSL.

Video demo

For full features and review, click here for my other post.

aaPanel review: Developer's perspective

Mohammad Golam Kibria — Sat, 25 Jun 2022 14:39:00 GMT

Hi good people! aaPanel is a free and open-source server control panel that I am using for about 2 years and I am very much satisfied with it. In this post, I am going to tell you why I like this, what are the features, why it beats the other free options, and when it might not be a good option.

Developer must host their project on a server for production or staging called deployment. There are many hosted deployment solutions out there that are very easy to get started but cost you more money down the line. If your project is successful, and you have steady revenue, hosted deployment solution is the best, because you don't have to worry about the server management tasks. On the contrary, if your projects are a hobby or in development mode, a self-hosted server is a good option in my opinion. Because down the line, you will learn some DevOps things and save lots of money. aaPanel has some great features that will blow your mind.

Features of aaPanel:

Modular structure: Unlike other free control panels (cyberpanel, hestia etc.), aaPanel is modular and can be extended features via its plugins. For example, if you need docker, you can install it.
Multiple Databases: MySQL, MariaDB, PostgreSQL, MongoDB, and Redis can be installed on the same instance. For MySQL or MariaDB, phpMyAdmin can also be installed. Database instance's access permission (local/remote) can also be changed per database wise.
Choice of web servers: Apache, Nginx, or OpenLiteSpeed can be installed.
Website / Webapp Hosting: From static to PHP, Laravel and Node.JS apps can be hosted very easily.
SSL cert: Let's encrypt or any other SSL can be installed for every website and node app.
Nginx configuration and reverse proxy: Every website's Nginx config as well as global Nginx config and reverse proxy can be configured very easily.
Node Manager: Multiple Node.JS versions can be installed and can be configured per website wise. Also, the command line version can be set.
Docker: Docker file and docker composer are supported. You can set a separate docker registry. Docker images, containers, volumes, compose files everything can be used in GUI.
Server File Manager: aaPanel's file manager is the best ever. You can upload, download, zip/unzip, modify permission, restore files, and last but not least, you can edit files with a beautiful interface. Unlike many other panels (cyberpanel), this feature is free.
Backup and restore: Every website, database, and even any server folder can be backed up both in the local filesystem or remote location. It supports, google drive, google cloud storage, s3 or s3 compatible options, and FTP.
Server monitoring: Server load average, CPU, memory, disk I/O, and network I/O can be monitored with a predefined or custom time frame.
Security: Firewall GUI can be used to open and close ports. SSH port can also be changed and the entire SSH access can be disabled. Any security or updates of the panel can be easily applied with one click.

My Favorite Features

Among all the features, I like modular structure, multiple database and web server, NodeJS version manager and app hosting, server file manager, Nginx reverse proxy config, and backup and restore.

The things I do not like

No Git: Git is a must feature and I don't know why they are not implementing it. You can install it by command prompt. But a GUI and integration of git to the website deployment (CD/CI) options would be great. I heard that using their webhook plugin, CD/CI can be configured but never tried.
Free Docker manager has very limited functionality. All the docker features that I have mentioned above are going to be paid options soon.
No one-click-install to different cloud providers.

Why it might beat the competitors?

aaPanel might beat its competitors because of its clean interface, ease to use, stability, and modular structure. They have paid modules that will give sustainability to maintain future releases.

When you don't need to use it?

aaPanel is not good for any kind of hosting business where you need to configure packages for your users and your users need a separate control panel. No Resellers options etc. I think aaPanel is not designed for that.

Conclusion

I am happy and satisfied with aaPanel. I can do whatever I like on my server very easily. If you are a developer you must try it. I bet, you are gonna love it.

💡

I am not affiliated with aaPanel. All those words are my own learned lesson.

aaPanel Link: https://www.aapanel.com/new/index.html

💡

I will make a few posts about aaPanel. If you like, please subscribe.

Cheems X dApp - version 1

Mohammad Golam Kibria — Sat, 04 Jun 2022 22:00:00 GMT

A web 3 dashboard to show users' assets and other information.

The following features were implemented:

User login by Metamask
show the current balance of cheemsX
Total reflection
Total burnt
Total LP
Total Market Cap

Technology Used

Frontend: React, NextJS
Backend: Avalanche Blockchain, Moralis.io
Database: Moralis.io

What I did

Convert the supplied design into NextJS, designed the Backend DB, wrote backend code using Javascript and implemented all the features.

Project URL: https://web.archive.org/web/20220527125727/https://app.cheemsx.org/

Best public DNS servers

Mohammad Golam Kibria — Sun, 01 May 2022 21:09:00 GMT

DNS servers resolve a hostname to an IP address. There are many free publicly available DNS Servers out there. If you have a problem with your local ISP's DNS server, you can use the following DNS server.

Google DNS

Primary: 8.8.8.8
Secondary: 8.8.4.4

OpenDNS

Primary: 208.67.222.222
Secondary: 208.67.220.220

Cloudflare

Primary: 1.1.1.1
Secondary: 1.0.0.1

Comodo Secure DNS

Primary: 8.26.56.26
Secondary: 8.20.247.20

Quad9

Primary: 9.9.9.9
Secondary: 149.112.112.112

Tell me which one suits you better.

Cheers 👋

Strapi: Exposing custom user data in 'users/me' endpoint

Mohammad Golam Kibria — Sat, 28 Aug 2021 19:55:25 GMT

If you don’t know about Strapi, It is a powerful and popular NodeJS headless CMS that was built with the aim to “Design APIs fast, manage content easily”.

On its ‘users/me’ endpoint, it returns sanitized user info without any related data. If you need additional related data to be exposed, you have to override the ‘me’ function manually. For this, you have to create a file in a specific folder and create a new function with the same name.

File location: extensions/users-permissions/controllers/User.js

const { sanitizeEntity } = require('strapi-utils');

const sanitizeUser = user =>
  sanitizeEntity(user, {
    model: strapi.query('user', 'users-permissions').model,
  });

module.exports = {
  async me(ctx) {
    const user = ctx.state.user;

    if (!user) {
      return ctx.badRequest(null, [{ messages: [{ id: 'No authorization header was found' }] }]);
    }

    const userQuery = await strapi.query('user', 'users-permissions');
    const userWithMedia = await userQuery.findOne({ id: ctx.state.user.id });

    const data = sanitizeUser(userWithMedia, { model: userQuery.model });
    ctx.send(data);
  },
};

This will return all related fields. Feel free to modify it according to your needs. Happy Strapi-ing.. 🙂