DEV Community: Adnan Babakan (he/him)

Deploying Minio using Docker Compose

Adnan Babakan (he/him) — Mon, 29 Dec 2025 12:57:27 +0000

Hey there DEV.to community!

As you might have heard about Minio, it is a free S3 storage server that you can set up and use locally or along your project to leverage the full potential of a powerful storage software and store your files inside with blazing fast response time.

Here is how to set it up using a Docker Compose file.

First of all, if you don't have it yet, create a file named docker-compose.yml.

Defining network

First of all we have to define a network so we can connect our server to it and share it between other services if we tend to do such a thing.

networks:
    minio-network:
        driver: bridge

A bridge network allows your containers communicate with each other if they are on the same network while being isolated from other networks. And only publicly accessible if ports are published.

Defining volume

By defining a volume, we can keep our data persistent. Here is how to define one:

volumes:
  minio-volume:
    driver: local

Defining service

Now it comes to Minio itself. By defining a service using the appropriate image from the docker registry we may start our service:

services:
  minio:
    image: minio/minio
    environment:
      - MINIO_ROOT_USER=root
      - MINIO_ROOT_PASSWORD=rootpass123
      - MINIO_DEFAULT_BUCKETS=bucket
    networks:
      - minio-network
    volumes:
      - minio-volume:/data
    ports:
      - "9222:9000"
      - "9223:9001"
    command: [ "server", "--console-address", ":9001", "/data" ]

I've named my service minio which will create a container named after it. You may define another name for your service or define another container name using container_name attribute.

The minio/minio image is the official image to deploy minio so there won't be a change here.

Using environment variables we define the root username and password. Make sure your password is at elast 8 characters long as it is required by minio.

Attach the service to your created network using the networks attribute of the service.

Minio stores data at /data so map it to the volume we created before using volumes attribute.

Minio exposes two ports being 9000 for api and 9001 for web ui so expose them to public network using ports attribute.

And finally start the service using the command added above and DONE!

Final docker compose

Here is the final docker compose:

networks:
  minio-network:
    driver: bridge

volumes:
  minio-volume:
    driver: local


services:
  minio:
    image: minio/minio
    environment:
      - MINIO_ROOT_USER=root
      - MINIO_ROOT_PASSWORD=rootpass123
      - MINIO_DEFAULT_BUCKETS=bucket
    networks:
      - minio-network
    volumes:
      - minio-volume:/data
    ports:
      - "9222:9000"
      - "9223:9001"
    command: [ "server", "--console-address", ":9001", "/data" ]

I hope this comes in handy and useful to you.

BTW! Check out my free Node.js Essentials E-book here:

Adnan Babakan (he/him)

Sep 11 '20

NodeJS Essentials | Free E-Book

#node #javascript #books

Comments 6

1 min read

Feel free to contact me if you have any questions, projects or suggestions to improve this article.

PHP Syntax Cheatsheet [Part 1]

Adnan Babakan (he/him) — Sun, 28 Dec 2025 12:54:11 +0000

Hey there DEV.to community!

Here I am compiling a list of PHP syntax cheatsheet for you all. As for why I am writing this post, PHP was my first programming language, and I still feel like I am in love with it, and it deserves more attention. Thus, trying to spread PHP knowledge for those learning it for the first time or trying to get back to it.

In this part I will go through basic PHP syntax and in the next part I will discuss the OOP aspect much more in detail.

Table of Content

Syntax
Comments
Variables
- Variable variables
Constant
- Run-time constant
- Compile-time constant
Types
- String
- Integer
- Float
- Boolean
- Array
  - Index-based array
  - Key-based array
  - Array language construct
  - Multi-dimensional arrays
- Null
Echo and Print
Casting
Operators
- Arithmetic operators
  - Summation
  - Subtraction
  - Multiplication
  - Division
  - Exponentiation
  - Modulo
- Comparison operators
  - Equal and not equal
  - Identical and not identical
  - Less than and less than or equal
  - Greater than and greater than or equal
  - Spaceship
Conditions
- If
- If, else and elseif
Switch case
Loops
- For loop
- While loop
- Do while loop
- Foreach loop
Functions

Syntax

PHP files are named with .php extension and start with <?php or <? and end with ?>. It is good to not that ending tag is not mandatory if you whole file consists of PHP and no HTML afterwards.

<?php
// CODE GOES HERE
?>

Or simply:

<?php
// CODE GOES HERE

Comments

As for every programming language you need comments to describe your code. PHP provides multiple ways to comment.

<?php
// THIS IS A COMMENT
# THIS IS A COMMENT AS WELL
/*
AND THIS IS
A MULTI-LINE COMMENT
*/

Using // and #, you may create a single-line comment. And by putting you comment between /* and */ you can create a multi-line comment.

Variables

Variables in PHP are defined using $ followed by their name. A variable in PHP isn't typed and can hold any value that PHP offers. A variables value can be changed later on.

<?php
$i = 1;
$name = 'Adnan';

It is good to know that PHP statements require a semicolon at the end, and it is not optional.

Variable variables

While it is against the convention, since variables are defined using $, it is possible to define a variable's name using another variable.

<?php
$v = 'test';
$$v = 'HELLO WORLD';
echo $test; // HELLO WORLD

I am not encouraging using such an approach, but it is possible, so mentioning it here is an honourable mention.

Constant

A constant is almost like a variable but its value can only be declared once and later on it cannot be changed. By convention constant names are defined in UPPER_SNAKE_CASE.

Run-time constant

A runtime constant can be defined using the define() function.

<?php
define(MY_CONST, 'HELLO');
echo MY_CONST; // HELLO

Compile-time constant

A compile-time constant can be defined using the const keyword.

<?php
const MY_CONST = 'HELLO';
echo MY_CONST; // HELLO

Types

PHP is a dynamically-typed language, which means you don't need to declare every type you use, yet it is essential to know what you are passing around as values so you can control how it affects your program.

String

A string is a series of characters, such as a name or a full sentence. A PHP string can be defined between quotes ' and double-quotes ".

<?php
$name = 'Adnan';
$last_name = 'Babakan';

The difference between a single quote and a double quote is simple. Inside a single-quote, wrap everything is considered literal and will remain as is. But inside a double-quote, variables are evaluated, and their values are placed in the string.

<?php
$name = 'Adnan';
$test1 = 'Hi I am $name'; // Hi I am $name
$test2 = "Hi I am $name"; // Hi I am Adnan

For best practices, it is good to use single quotes and not double quotes, as it can result in unwanted behaviour.

Integer

Integers or simple int is a whole number without a decimal point.

<?php
$i = 2;
$j = 10;

Float

Floating point numbers (one of the most controversial features in programming languages) is a number with a decimal point.

<?php
$pi = 3.14;
$k = 7.98;

Boolean

A boolean or a bool is simply a value of true or false. They are used in conditions and many places to switch between two different actions. Later on we will discuss comparison operators, which will result in a boolean.

<?php
$k1 = true;
$k2 = false;

Remember that true and 'true' and respectively false and 'false' are two different things. If you put them inside a quotation or double quotation they are considered a string and not a boolean. Just like a simple text.

Array

An array is a series of values that can be accessed using their index or pre-defined keys. So we will separate arrays in PHP into two different categories: Index-based and key-value arrays.

Index-based array

An index-based array is simply wrapped with [ and ] and each element is separated with a comma. Values (elements) of an array in PHP can be of any type and they don't have to be the same.

<?php
$a1 = ['Hello', 2, true, 3.14];

In order to access an element here is how we do it:

<?php
$a1 = ['Hello', 2, true, 3.14];
echo $a1[0]; // 'Hello'
echo $a1[1]; // 2
echo $a1[2]; // true
echo $a1[3]; // 3.14

Remember that indices start from 0 in PHP and not 1. (There is a logical reason behind it but it is beyond the scope of this post. Yet you can research for yourself why it starts from 0.)

Key-based array

A key based array is defined differently. Each key-value pair is define using key => value syntax and separated by a comma again.

<?php
$a2 = [
    'name' => 'Adnan',
    'age'  => 25
];

And in order to access the value we do the same, but this time instead of an index we provide the defined key:

<?php
$a2 = [
    'name' => 'Adnan',
    'age'  => 25
];
echo $a2['name']; // Adnan
echo $a2['age']; // 25

It is good to know that most keys are strings but the values can be of any type again.

Array language construct

It is possible to define both index-based and key-based arrays using a function-like construct named array(). What we had learnt before is just a short form for this constrcut.

<?php
$a1 = array('Hello', 2, true, 3.14);
$a2 = array(
    'name' => 'Adnan',
    'age'  => 25
);

Multi-dimensional arrays

Arrays can hold arrays and that is what we call a multi-dimensional array.
Here is a simple one:

<?php
$m = [[1,2,3], [4,5,6], [7,8,9]];
echo $m[0][0]; // 1
echo $m[1][2]; // 6
echo $m[2][1]; // 8

It is good to note that a key-based array can be multi-dimensional as well:

<?php
$o = [
    'friends' => ['Arian', 'Ata', 'Mahdi', 'Erfan'],
];
echo $o['friends'][1]; // Ata

Null

Null is a special value that means nothing.

<?php
$n = null;

And that's it. While being simple you will see so many uses of this special value.

Echo and Print

echo() and print() are most used functions to print something to the standard output. Being a web client or simply terminal.
You can use echo and print without parentheses.

<?php
echo 'Hello World';
print 'How are you doing?';

Casting

Casting means converting one data type to another. For instance converting a number to a string or vice-versa. Not all data types can be converted to each other. The simple rule is that it has to make sense. (I know this is vague but consider it suffecient for now :) ).

To cast a value to another type simply put the targeted type inside parentheses and before the source value:

<?php
$a = (string) 2;
gettype($a); // string

gettype() is a function that returns the data type of the variable.

The list of castings are as below:

(string)
(int)
(float)
(bool)
(array)
(object)

If you are not seeing object in the types section above, you are completely right. Objects are more elaborate and will be discussed later in this post.

Operators

Operators are used for multiple purposes, such as arithmetic (mathematical) or comparison reasons. Here are full list of PHP operators.

Arithmetic operators

Arithmetic operatos are used for summation, division and etc. Here is the full list:

`+` Summation

<?php
$n = 8 + 7; // 15

`-` Subtraction

<?php
$n = 10 - 3; // 7

`*` Multiplication

<?php
$n = 2 * 4; // 8

`/` Division

<?php
$n = 10 / 2; // 5

`**` Exponentiation

<?php
$n = 2 ** 3; // 8

`%` Modulo

This operator is used for getting the remainder of a number divided by another.

<?php
$n = 9 % 4; // 1

Comparison operators

Comparison operators are used to compare two values and result in a boolean. They are used in conditions to evaluate a result.

`==` equal and `!=`/`<>` not equal

Check if two values are equal/ not equal independant of their types.

<?php
$n = "2" == 2; // true
$k = 3 == 3; // true
$o = 4 == "hello"; // false
$h = 6 != "6"; // false
$e = 6 != 5; // true

You can use <> operator instead of the != operator as well.

`===` identical and `!==` not identical

<?php
$n = "2" === 2; // false
$k = 3 === 3; // true
$o = 4 === "hello"; // false
$h = 6 !== "6"; // true
$e = 6 !== 5; // true

`<` less than and `<=` less than or equal

<?php
$a = 2 < 3; // true
$b = 3 < 1; // false
$c = 4 <= 4; // true

`>` greater than and `>=` greater than or equal

<?php
$a = 4 > 1; // true
$b = 5 > 6; // false
$c = 9 >= 9; // true

`<=>` Spaceship operator

If the value on the left-hand side is less than the one on the right-hand side the result is equal to -1. If they are equal the result is equal to 0 and if the left-hand side is greater than on the right-hand side the result is equal to 1.

<?php
$a = 4 <=> 5; // -1
$b = 5 <=>; // 0
$c = 6 <=> 2; // 1

Conditions

A condition is a flow-control statement that determines if a block should be run or not, and if not any other blocks will proceed in case it is defined to do so.

If

An if statement is simply defined as below:

<?php
if (condition) {
    // CODE GOES HERE
}

In place of the work condition there should be a boolean or a comparison that results in a boolean. If the boolean evaluates to true then the code inside two curly-braces ({ and }) run.

If-else and elseif

An else statement is defined immediately after an if statement and the code inside its block is run in case the condition for if evaluates to false:

<?php
if (condition) {
    // CODE GOES HERE
} else {
    // CODE GOES HERE
}

You may also define multiple elseif statements between if and else to check other conditions:

<?php
if(condition) {
    // CODE GOES HERE
} elseif (condition2) {
    // CODE GOES HERE
} elseif (condition3) {
    // CODE GOES HERE
} else {
    // CODE GOES HERE
}

Switch case

A switch case checks the value provided to it to be equal to any of its cases, and if not, the default case is triggered. It is kind of like a chained if-elseif-else statement, but only checking for equality.

<?php
$fruit = 'apple';
switch($fruit) {
    case 'banana':
        echo 'yellow';
    break;
    case 'apple':
        echo 'red';
    break;
    case 'cucumber':
        echo 'green';
    break;
    default:
        echo 'NOT FOUND';
    break;
}

The code above will echo the word red as $fruit is equal to apple. After each case, there needs to be a break statement to break the switch block. The last case/default case doesn't require a break, but I always include it just for the sake of consistency.

Loops

As one of my professors once said, a loop statement is the most important statement in programming, as it runs a block of code multiple times. If computers were only to do a thing once, then there would be no need for them.

For loop

A for loop consists of three parts usually, an initilization, a condition and a mutator.

<?php
for($i = 0; $i < 10; $i++) {
    // CODE HERE RUNS FOR 10 TIMES, FROM 0 to 9.
}

While loop

A while loop only consists of a condition and checks if the condition is true and runs the code block if so.

<?php
while(true) {
    // CODE HERE RUNS FOREVER
}

You may recreate a for loop using a while loop as below:

<?php
$i = 0;
while($i < 10) {
    // CODE HERE RUNS FOR 10 TIMES, FROM 0 to 9.
    $i++;
}

Do while loop

A do while loop runs almost like a while loop with one difference. It runs at least once since it checks the condition afterwards and not at the beginnign.

<?php
do {
    // CODE HERE RUNS ONCE AND THEN CHECKS THE CONDITION WHICH IS FALSE
} while (false);

Foreach loop

A for each loop iterates through a array.

Here is the sample for an index based array:

<?php
$a = [10, 20, 30];
foreach($a as $el) {

}

Inside the loop you may access the $el variable which is equal to each memeber of the array in each iteration.

And here is an example for a key-value array:

<?php
$k = [
    "a" => 10,
    "b" => 20,
    "c" => 30
];
foreach($k as $key => $value) {

}

In each iteration, you may access $key and $value variables, which correspond to each key and value in the array.

It is good to know that in both foreach loops demonstrated above, the names $el, $key and $value are arbitrary and can be any valid variable name you desire.

Functions

A function is a block of code that can be reused, have arguments and return a value as well.

A function in PHP is defined as below:

<?php
function sum($a, $b) {
    return $a + $b;
}

echo sum(10, 20); // 30

In the next chapter we will discuss OOP aspect of PHP and then in the later chapter the more advanced tricks of PHP are going to be included.

BTW! Check out my free Node.js Essentials E-book here:

Adnan Babakan (he/him)

Sep 11 '20

NodeJS Essentials | Free E-Book

#node #javascript #books

Comments 6

1 min read

Feel free to contact me if you have any questions, projects or suggestions to improve this article.

How to Design a Multilingual Database Structure | A Practical Guide

Adnan Babakan (he/him) — Sat, 18 Oct 2025 13:34:44 +0000

Hi there, DEV.to community!

Designing a database is a pleasurable task. It is where you limit the computers in how they should manage data. What each data means and what can be done with the combinations of them.

I've enjoyed designing a multilingual database structure that can translate any entity in the database. And by translating, the action of storing translation records is meant, not translating them.

What is the problem?

The problem arises from wanting to have everything translatable in my back-end. And the number of languages varies as well. So there is a need to design such a structure that can accept many kinds of data as a translation target, like strings, numbers and even complex (non-primitive) objects like JSON data.

Relational or Non-relational

As you know, relational databases can have relations between their records, such as the relation of a foreign key to a primary key. And in non-relational databases, this cannot happen, not at least in their vanilla (bare) form.
Whilst I designed this database in MySQL (MariaDB), there is no limitation in which database software you use, regardless of whether it is RDBMS or non-relational.

What is required

Knowledge of how databases and ORM/ODM work
A database engine running

A background of what we want

What we want to achieve is a database that can store translatable data, regardless of its data type (at least as much as we can). As we know, foreign keys in relational databases can only relate to a single table. But we might have multiple tables, such as posts, products, couriers, and so many more. Here is when we are introduced to a thing called morphic relations. These kinds of relations are usually managed through a logical back-end.

How we may create such a thing, you might ask. The answer depends on the approach we choose and can vary based on the mindset of the programmer. But there are two ways we may do it:

Instead of having a simple foreign table ID relation, we can have two columns named morphic_table and morphic_id. Storing the name of the target table and the ID of the related record, respectively.
Store both the target table and target ID in a column named morphic_relation or something similar. Although this is against the best practices when designing a database, it proves to be super handy. The issue arises from the data we want to store not being atomic (meaning only one thing), but rather giving us two pieces of information. Where to look, and what to find. This structure is not unusual if you think of vector values. Thus, we may create our column as a text/string column and store our data with a simple delimiter. For instance, table:id. So our data would become something like posts:1243 or products:88214.

The Languages Table

The first thing we want is the languages table. This is where we will store the languages and their related data.
Here is how I designed my languages table:

Enum direction {
  "rtl"
  "ltr"
}

Table languages {
  id primary unique
  iso_code string unique
  local_name string
  latin_name string
  direction direction
  calendar_system string
  font string
  font_feature_settings string
  is_default boolean
  is_active boolean
  created_at datetime
  updated_at datetime
}

Demonstration of the languages table

I am using dbdiagram.io to draw the database diagrams.

Here is the explanation:

id: Primary ID of the record. I used CUID2 as my ID generation method, but the type ID can be anything and is irrelevant.
iso_code: A unique code that represents a language. I found IETF BCP 47 to be a good reference to distinguish every language. For instance fa-IR, en-US, or es-ES.
local_name: Name of the language written in its local form. Such as فارسی, English or Español.
latin_name: Name of the language written in Latin form. For instance, Persian, English or Spanish.
direction: Indicating the direction of a language's written form. Having only two options, being RTL and LTR.
calendar_system: Indicating the calendar system associated with a language. Such as Jalali or Gregorian.
font: Font used for the interface in the given language.
font_feature_settings: Used to configure how the given font behaves in different conditions.
is_default: A boolean indicating whether the language is the default or not.
is_active: A boolean indicating if the language is active or not.
created_at: Creation timestamp
updated_at: Last update timestamp

Most of the columns indicated above are optional, as you can design your languages table with only two columns being id and iso_code. But having extra details can come in handy later on. The scope of using those additional data is beyond this article and you are at liberty to discover them on your own.

The language records table

We want to make our database translatable no matter what our data are and how they are stored. To demonstrate such a structure, let's have a table called language_records which will store data for each table and each piece of data we need. Here is the structure after designing that table:

Enum direction {
  "rtl"
  "ltr"
}

Table languages {
  id primary unique
  iso_code string unique
  local_name string
  latin_name string
  direction direction
  calendar_system string
  font string
  font_feature_settings string
  is_default boolean
  is_active boolean
  created_at datetime
  updated_at datetime
}

Table language_records {
  id primary unique
  language_id string [ref: > languages.id]
  morphic_table string
  morphic_id string
  key string
  value string
  created_at datetime
  updated_at datetime
}

Demonstration of the language records table

As you can see, I have added two simple columns named morphic_table and morphic_id to store which table to refer to and what row is wanted, respectively.

Another approach to such a need, as mentioned before, is to have a single column to store both data and get out of being atomic. Here is the second kind of table:

Enum direction {
  "rtl"
  "ltr"
}

Table languages {
  id primary unique
  iso_code string unique
  local_name string
  latin_name string
  direction direction
  calendar_system string
  font string
  font_feature_settings string
  is_default boolean
  is_active boolean
  created_at datetime
  updated_at datetime
}

Table language_records {
  id primary unique
  language_id string [ref: > languages.id]
  morphic_relation string
  key string
  value string
  created_at datetime
  updated_at datetime
}

Demonstration of the language records table

As you may have noticed, neither of the two structures above has any relation to any table other than the languages table. The relation to the entities themselves (such as posts or products) will be an abstract relation, meaning that we will handle them programmatically, and there is no need for the database to handle such a relation.

I will go forward with both approaches so you may choose what fits your needs the best.

Entities to be translated

Let's assume that we have two tables called posts and products that we want to have translatable fields in. A post has title and content, and a product has name and short_description.

Here is the table structure for both tables:

Table posts {
  id primary unique
  created_at datetime
  updated_at datetime
}

Table products {
  id primary unique
  price double
  created_at datetime
  updated_at datetime
}

I won't be digging down the structure to a proper post and product build. As it is non-relevant in this article.

Posts and Products Tables

You may notice that neither the posts table has columns named title and content, nor the products table has columns named name and short_description.

These data are abstract and will be controller and generated programmatically. You are free to implement how to store these data on your back-end. What I suggest to do is to have a mixin or a similar implementation based on your programming language.

Storing Language Records

Now that we have our structures ready we may simply create our language and their relevant data according to our entities (being posts and products).

Here is a simple data for our languages table (I have omitted extra data due to them being irrelevant here):

id	iso_code	local_name	latin_name
1	fa-IR	فارسی	Persian
2	en-US	English	English
3	es-ES	Español	Spanish

Now let's have a post added to our database:

id
1

And one product:

id	price
1	39.99

And that's it. It might seem strange but bear with me as it will make sense later on.

The key column in our language_records table will represent the data key related to our entity being post or product and the value will store its content.

Now let's populate the language records table to represent the data needed to complete our first post and product.

Here is the structure using morphic_table and morphic_id:

id	language_id	morphic_table	morphic_id	key	value
1	1	posts	1	title	سلام دنیا
2	2	posts	1	title	Hello World
3	3	posts	1	title	Hola!
4	1	posts	1	content	آزمایشی
5	2	posts	1	content	Testing
6	3	posts	1	content	Testing in Spanish!
7	1	products	1	name	محصول جدید
8	2	products	1	name	Product
9	3	products	1	name	Product in Spanish
10	1	products	1	content	توضیح محصول
11	2	products	1	content	Product Description
12	3	products	1	content	Product Description in Spanish

And here is the same table using only a colum named morphic_relation:

id	language_id	morphic_realtion	key	value
1	1	posts:1	title	سلام دنیا
2	2	posts:1	title	Hello World
3	3	posts:1	title	Hola!
4	1	posts:1	content	آزمایشی
5	2	posts:1	content	Testing
6	3	posts:1	content	Testing in Spanish!
7	1	products:1	name	محصول جدید
8	2	products:1	name	Product
9	3	products:1	name	Product in Spanish
10	1	products:1	content	توضیح محصول
11	2	products:1	content	Product Description
12	3	products:1	content	Product Description in Spanish

Seeing the table above, we can conclude that we can fetch each language record for all of our data. And access translatable data based on different entities and different languages.

BTW! Check out my free Node.js Essentials E-book here:

Adnan Babakan (he/him)

Sep 11 '20

NodeJS Essentials | Free E-Book

#node #javascript #books

Comments 6

1 min read

Feel free to contact me if you have any questions, projects or suggestions to improve this article.

Doubly Linked List Implementation in Go

Adnan Babakan (he/him) — Sun, 06 Oct 2024 12:44:59 +0000

Hi there DEV.to community!

As a second part of my previous post (linked in the series above), here we will implement a doubly linked list. A doubly linked list is just as a singly linked list with one difference. Each node refers to both its next node and its previous node. Thus we may move forward in the list using a function called GetNext and move to the previous node with a function called GetPrev.

Image source: GeeksforGeeks

Before we start here is the structure I'd like to organize my codes like:

project
├── doubly_linked_list
│   ├── node.go
│   └── list.go
└── main.go

Doubly Node

To define a doubly node in Go, the first thing we need to do is creating a struct in the node.go file:

type DoublyNode struct {
    data interface{}
    next *DoublyNode
    prev *DoublyNode
}

A doubly node holds three properties:

A data property with interface{} type so it can hold any data type
A next property that holds a pointer to another DoublyNode
A prev property that holds a pointer to another DoublyNode

Just as before we need to have some functions to utilize this struct. The first function we will define is a constructor that creates a new DoublyNode:

func NewDoublyNode(data interface{}) *DoublyNode {
    return &DoublyNode{data: data}
}

This function creates a DoublyNode and returns its reference.

Then we will define setters and getters for all the properties (data, next and prev):

func (n *DoublyNode) SetData(data interface{}) {
    n.data = data
}

func (n *DoublyNode) GetData() interface{} {
    return n.data
}

func (n *DoublyNode) SetNext(next *DoublyNode) {
    n.next = next
}

func (n *DoublyNode) GetNext() (*DoublyNode, error) {
    if n.next == nil {
        return nil, errors.New("no next node")
    }
    return n.next, nil
}

func (n *DoublyNode) SetPrev(prev *DoublyNode) {
    n.prev = prev
}

func (n *DoublyNode) GetPrev() (*DoublyNode, error) {
    if n.prev == nil {
        return nil, errors.New("no previous node")
    }
    return n.prev, nil
}

Here is the explanation for each function:

SetData(data interface{})
- Receives a data argument of interface{} type and sets it as the data of the node.
GetData
- Returns the data of the node
SetNext(next *DoublyNode)
- Receives a reference to node and sets it as the current node's next
Getnext()
- Check if the next property of the node is nil to return an error,
- If the next property is not nil, it returns the next property of the node.
SetPrev(next *DoublyNode)
- Receives a reference to node and sets it as the current node's prev
GetPrev()
- Check if the prev property of the node is nil to return an error,
- If the prev property is not nil, it returns the prev property of the node.

And my beloved ToString function to make sure each time I know how to retrieve the data of the node as a string:

func (n *DoublyNode) ToString() string {
    return n.data.(string)
}

List

Now that we have our node defined it is time to define the list itself. I would put these codes inside the list.go file:

type DoublyLinkedList struct {
    head  *DoublyNode
    last  *DoublyNode
    count int
}

The DoublyLinkedList is no different than the SinglyLinkedList from the previous post. A doubly linked list usually differs in its node's structure.

This struct holds up 3 properties:

head to hold the first node of the list
last to hold the last node of the list
count to hold the number of nodes added inside the list

Now the functions that we need to utilize the struct.

The first one as always is the function to create a new doubly linked list:

func NewDoublyLinkedList() *DoublyLinkedList {
    return &DoublyLinkedList{}
}

Now the most important function to attach a node to our list:

func (l *DoublyLinkedList) AttachNode(node *DoublyNode) {
    if l.head == nil {
        l.head = node
    } else {
        l.last.SetNext(node)
        node.SetPrev(l.last)
    }
    l.last = node
    l.count++
}

This function receives a node and checks if the list's head is empty adds it as the head of the list and if not sets the next of the last node in the list as the received node and sets the received node's prev as the current last node in the list.

Then finally sets the last node of the list as the received node and increases the count of the list by one.

I will a function (just as before) to receive a data argument and turn it into a node and send it to the AttachNode function so it becomes a little easier to add nodes:

func (l *DoublyLinkedList) Add(data interface{}) {
    l.AttachNode(NewDoublyNode(data))
}

A function to return the count of the list:

func (l *DoublyLinkedList) Count() int {
    return l.count
}

If you've read the previous article you know that I like to create functions named after the accessors of the next and prev of the nodes inside the list so it becomes a bit more consistent when accessing the data inside list:

func (l *DoublyLinkedList) GetNext() (*DoublyNode, error) {
    if l.head == nil {
        return nil, errors.New("list is empty")
    }
    return l.head, nil
}

func (l *DoublyLinkedList) GetPrev() (*DoublyNode, error) {
    if l.last == nil {
        return nil, errors.New("list is empty")
    }
    return l.last, nil
}

The GetNext function checks if the head is nil inside the list to return an error. And if not returns the first node of the list.

The GetPrev function checks if the last is nil inside the list to return an error. And if not returns the last node of the list.

A GetByIndex function is always recommended to make it possible to access the nodes by their index inside the list:

func (l *DoublyLinkedList) GetByIndex(index int) (*DoublyNode, error) {
    if l.head == nil {
        return nil, errors.New("list is empty")
    }
    if index+1 > l.count {
        return nil, errors.New("index out of range")
    }
    node, _ := l.GetNext()
    for i := 0; i < index; i++ {
        node, _ = node.GetNext()
    }
    return node, nil
}

This function checks if the head is nil to return an error. Then checks if the index+1 is bigger than the count of the list to return an error since we consider the indices starting from 0.

Then set the head of the list as node and loop for 1 less than the provided the index so it moves forward as intended by replacing the node as the current node's next. Finally returns the node with no error.

Testing

To test the just written code you may do so in your main function:

func main() {
    list := doubly_linked_list.NewDoublyLinkedList()

    list.Add("One")
    list.Add("Two")
    list.Add("Three")
    list.Add("Four")

    first, err := list.GetNext()
    if err != nil {
        panic(err)
    }

    second, err := first.GetNext()
    if err != nil {
        panic(err)
    }

    getBackToFirst, err := second.GetPrev()
    if err != nil {
        panic(err)
    }

    fmt.Println(getBackToFirst.ToString()) // One
}

Or by using the GetByIndex function:

func main() {
    list := doubly_linked_list.NewDoublyLinkedList()

    list.Add("One")
    list.Add("Two")
    list.Add("Three")
    list.Add("Four")

    n, err := list.GetByIndex(3)

    if err != nil {
        panic(err)
    }

    fmt.Println(n.ToString()) // Four
}

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

Singly Linked List Implementation in Go

Adnan Babakan (he/him) — Sat, 05 Oct 2024 23:24:15 +0000

Hey there DEV.to community!

This is a part of my data structures and algorithms series. In this article, we will implement a singly linked list then in the next articles from this series I will implement other kinds of linked lists as well using Go.

Image source: GeeksforGeeks

To implement a singly linked list we need to structures, a node and a singly linked list itself. But before beginning to code here is how I like to organize my code:

project
├── singly_linked_list
│   ├── node.go
│   └── list.go
└── main.go

Node

A node only holds data and a pointer to the next node in its simplest form. Thus here is the struct we are going to use as a node (in the node.go file):

type SinglyNode struct {
    data interface{}
    next *SinglyNode
}

We are using interface{} as the data type for data in the struct so we may store any data we want inside the node.

Then we should define some methods to utilize the node struct we've just created.

func NewSinglyNode(data interface{}) *SinglyNode {
    return &SinglyNode{data: data}
}

If you are used to object-oriented languages you are mostly likely to be familiar with what a constructor is. Since Go is not an object-oriented language there are no classes but by some conventions around the Go world, we usually create a function prefixed with the word New. But keep in mind that in the OOP languages new is a special keyword that means creating an object. Here the New is just a name prefix and nothing more.

The NewSinglyNode function receives only one argument called data with interface{} type and returns a pointer of SinglyNode.

Next, we define some getters and setters for the node:

func (n *SinglyNode) SetData(data interface{}) {
    n.data = data
}

func (n *SinglyNode) SetNext(next *SinglyNode) {
    n.next = next
}

func (n *SinglyNode) GetData() interface{} {
    return n.data
}

func (n *SinglyNode) GetNext() (*SinglyNode, error) {
    if n.next == nil {
        return nil, errors.New("no next node")
    }
    return n.next, nil
}

The SetData, Setnext and GetData are pretty much self-explanatory. The GetNext returns two values, a pointer to the next SinglyNode and an error if there is no next node.

Here is an extra function I always like to add so I can always know how the string representation of my struct is:

func (n *SinglyNode) ToString() string {
    return n.data.(string)
}

List

Now that we are done with our node we should implement the list itself. A singly linked list holds the first node as head and as for my own preference two more data called last holds the last node and a country property that holds the count of the nodes added to the list.

So here is the first lines of the list.go file:

type SinglyLinkedList struct {
    head  *SinglyNode
    last  *SinglyNode
    count int
}

And obviously, a constructor-like function to create a SinglyLinkedList with ease:

func NewSinglyLinkedList() *SinglyLinkedList {
    return &SinglyLinkedList{}
}

The most important function in a linked list is the one that adds a node. Here is my implementation of such a function:

func (l *SinglyLinkedList) AttachNode(node *SinglyNode) {
    if l.head == nil {
        l.head = node
    } else {
        l.last.SetNext(node)
    }
    l.last = node
    l.count++
}

The function does as below:

Check if the head of the linked list is empty, if so set the received node as the head of the list.
If the head is not empty it sets the received node as the next property of the last node.
Regardless of what happened before, the current node should be last node so the next time a node gets added it can get set as the next for the last node in our list.
Increase the count by one.

Here is a function that receives data and creates a node and passes it to the AttachNode function:

func (l *SinglyLinkedList) Add(data interface{}) {
    l.AttachNode(NewSinglyNode(data))
}

Although this function might seem redundant, it will ease adding nodes to the list without manually creating one each time.

A function to get the count property as well:

func (l *SinglyLinkedList) Count() int {
    return l.count
}

The last function needed is a function that should return the next node in the linked list:

func (l *SinglyLinkedList) GetNext() (*SinglyNode, error) {
    if l.head == nil {
        return nil, errors.New("list is empty")
    }
    return l.head, nil
}

I prefer to name this function as same as the GetNext function defined for the nodes. This is done so there is more consistency. When first accessing a linked list the type is a linked list so there is no access to functions defined for nodes. Defining a function with the same name will make you able to use GetNext as much as you want to traverse your list.

One extra function that I always tend to add is a function to retrieve a node by the index:

func (l *SinglyLinkedList) GetByIndex(index int) (*SinglyNode, error) {
    if l.head == nil {
        return nil, errors.New("list is empty")
    }
    if index+1 > l.count {
        return nil, errors.New("index out of range")
    }
    node, _ := l.GetNext()
    for i := 0; i < index; i++ {
        node, _ = node.GetNext()
    }
    return node, nil
}

This function does as below:

Check if the head is empty to return an error
Check if index+1 is greater than the count of the list to return an error. We check for index+1 and not for index since we consider the indices starting from 0 just like arrays.
Assign l.GetNext() to a variable named node (ignoring the error with _) then loop for one less than the index provided as we already have the first one stored in the node variable, assigning the next node of the current node as node again.
Return the traversed node without an error.

Testing

Now that we have our linked list and node definitions, we can test it in our main.go file just as below:

func main() {
    list := singly_linked_list.NewSinglyLinkedList()

    list.Add("One")
    list.Add("Two")
    list.Add("Three")

    firstNode, err := list.GetNext()
    if err != nil {
        panic(err)
    }

    secondNode, err := firstNode.GetNext()
    if err != nil {
        panic(err)
    }

    thirdNode, err := secondNode.GetNext()
    if err != nil {
        panic(err)
    }

    println(firstNode.ToString())  // One
    println(secondNode.ToString()) // Two
    println(thirdNode.ToString())  // Three
}

Or using the GetByIndex function:

func main() {
    list := singly_linked_list.NewSinglyLinkedList()

    list.Add("One")
    list.Add("Two")
    list.Add("Three")

    node, err := list.GetByIndex(2)
    if err != nil {
        panic(err)
    }

    fmt.Println(node.ToString()) // Three
}

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

More Secure JWT | A Better Experience

Adnan Babakan (he/him) — Sat, 05 Oct 2024 17:01:34 +0000

Hi there DEV.to community!

Recently I've read some small posts on my social media that pointed out many security vulnerabilities of JWT. And the article below caught my eye.

Why Do Many People Not Recommend Using JWT?

Safdar Ali ・ Oct 3 '24

#hacktoberfest #opensource #webdev

The article above is a great one to tell you what might be the problem with using JWT as your main authentication method.

Whilst many things mentioned in the article above are valid, there is a workaround for them. I personally suggest you switch to other token types if you are just starting your project. For instance, I usually use Laravel Sanctum when my back-end is Laravel. But if you have a project that is already using JWT and there is no possibility to simply change the token type or you are simply enjoying JWT and willing to manoeuvre I encourage you to read this article.

I am taking an approach to counter the points declared in the article I linked above and might add some other points as well. In the end, you might suggest that what we have accomplished is not JWT anymore and you would be right in some way. Yet we should keep in mind that JWT doesn't enforce any structure to be put in the header or the payload and it only recommends them. You can refer to here for more information.

JWT size is big

As you know a JWT consists of 3 parts: header, payload and signature.

The header in a JWT usually consists of two properties. A typ that is set to JWT and alg holds the algorithm type your signature is hashed with.

For instance:

{
  "alg": "HS256",
  "typ": "JWT"
}

If you are using multiple tokens for your system it is necessary to define these properties in your header so you may validate the token. But if your system isn't that big regarding the authentication types you might at least omit the typ property to reduce a small size.

A body can consist of anything you want to make use of your token. What I usually put inside a payload is the id of the user who the token is issued for.

The signature is a combination of your token's header and payload that is hashed.

Here are some symmetric hash algorithms you may use according to the JWT website:

Algorithm	Size
HS256	32 bytes
HS384	48 bytes
HS512	64 bytes

If you want more security you may use asymmetric algorithms as well. Symmetric algorithms are still fine for most small use cases though.

So choosing a smaller size for the signature can reduce your token size overall. You might argue that HS256 is less secure than HS384 and HS512 respectively! While it is true, you should consider that each bit can be represented in two ways, a 0 or a 1. Thus, a 256-bit (32-byte) signature is one in 115,792,089,237,316,195,423,570,985,008,687,907,853,269,984,665,640,564,039,457,584,007,913,129,639,936 possibility. So if you are trying to use a 384-bit or a 512-bit signature without having a valid reason you are just wasting space.

With all these changes we can compare a predefined JWT to a custom JWT we've just made in size.

Note that we are using the same payload for both tokens:

{
  "id": "123456"
}

Here is the token with the default header and using HS512 algorithm for signature:
Header:

{
  "alg": "HS512",
  "typ": "JWT"
}

Token:

eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyMzQ1NiJ9.Kvwu-9rwEgar8j6OH8HN57Vj5DQKYWDi-H9tfTWV3-TawrxIv_Wc_WLfTDNJeA3W9-omQhvi8xbZCacLEzMqQw

And now the custom-made token that omits the typ in header and uses the HS256 to have the signature hashed.
Header:

{
  "alg": "HS256"
}

Token:

eyJhbGciOiJIUzI1NiJ9.eyJpZCI6IjEyMzQ1NiJ9.mT15OKTKJMODj5xHKTmTTq9i8dqJ_b1-C1pY7RbDvRI

Comparing the size of both tokens we can see that the first token is 144 bytes long and the second one which we customized a bit is 85 bytes long. It is about 40% smaller.

Revocation of the tokens and security issues

So far we know that JWT is a stateless token that doesn't need a server to hold the information for use as the token already carries the necessary data. This brings up a problem! You cannot revoke a JWT that simply.

But it is not the end of the world and there are some techniques we may put in use to circumvent this issue.

One does not simply revoke a JWT! (or centre a div.)

Token blacklisting

Blacklisting a token is a simple way you might consider. To blacklist a token you can assign an id to each token in your payload and blacklist it in your database (or any kind of storage) so the token is considered invalid.

My personal way of doing so is assigning a UUID/ULID for each token inside the payload like this:

{
  "user_id": "123456",
  "token_id": "348087cf-8d57-4318-ac46-051c8ffd1ba5"
}

Some suggest to store the whole token and consider it invalid, but it raises two problems:

If your token doesn't have a dynamic part like a issue date or an id to identify the token uniquely you might blacklist all the tokens for a user no matter when they are created, meanwhile blacklisting every token that will be created in the future.
Storing a whole token in your database takes up a lot of space.

While this technique is good to implement it defeats one of the main purposes of a JWT which is being stateless. So this makes your tokens a hybrid regarding the stateful/stateless matter.

Token expiration time

Adding an expiration time to your payload can be beneficial in two ways. First point is that your tokens will be more secure if they are stolen there is a finite time the token can be used and the second is the revoking problem which can be solved with a short lifespan for the token. This approach also maintains the statelessness of the token.

Here is an example:

{
  "user_id": "123456",
  "exp": "1728146311"
}

There are some caveats for this method as well:

If a token has a long expiration time it defeats the purpose of the expiration time.
With shorter expiration time you need to implement a structure in which users can refresh their tokens to maintain their identity with your system, hence adding more complexity on your side.

Issue number of the token

This can be interpreted as the opposite of blacklisting a token. In this method, you can have an issue number for each token and store the latest token issue number along with the users details in database. For instance, when issuing the first token the token issue number for a user can include number 1. You may issue multiple tokens with this issue number and increase the number by one when you want to invalidate the previous token or tokens. As you might have guessed this can be problematic since you cannot simply revoke only one token and you need to revoke every token issued with that issue number.

There are more secure ways that are more complex than what you've read here to revoke a JWT that is beyond the scope of this article.

Security issues

A JWT's header and payload are base64 encoded, which makes them possible to see the raw content with simply decoding it. This can raise security issues of people knowing the secrets of a user if they access their token(s).

Such a case is avoidable in few ways:

Never store sensitive data inside the payload and only store the data needed to verify who the claimer is.
Encrypt the data stored inside the payload which you can decrypt yourself on the back-end.
As always make sure you are using a secure connection such as HTTPS for web/mobile applications.

Feel free to let me know if I am missing anything or if I made a mistake. Hope this article was useful for you.

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

Vue 3 | Cheat Sheet of The Dark Side | Part 1 | Reactivity

Adnan Babakan (he/him) — Tue, 01 Oct 2024 22:50:56 +0000

Hi there DEV.to community!

This article will include multiple aspects of Vue 3 that are mostly used or are kind of on the dark side and not paid attention to as they are supposed to.

As I am going to describe Vue 3, I am going to use the composition API and not the old-school options API. The concept of both methods are same so you can adapt to composition API pretty quickly. I am in no place to dictate anything and every programmer is free to choose the way they want to write their program but as a personal opinion, I prefer composition API for its concise syntax and better code management. So if you are still afraid to change to composition API I suggest you give it a shot as it will be worth it.

This is how you will feel after reading this article. I hope :).

Table of Content

Reactivity
- Ref
- Reactive
- Shallow Ref
- Shallow Reactive
- Shallow Reactive
- Readonly
- Shallow Read Only
Computed
- Writable Computed
Watching
- Watch
  - Immediate
  - Once
  - Watching Getter Function
  - Watching Multiple Values
- Watch Effect

Reactivity

React isn't the only one that should come to mind when we talk about reactivity. Reactivity refers to the ability of an entity (given a webpage) to react based on the data changes. You might know this concept as MVVM. MVVM is the abbreviated form of Model-View-View-Model. As the name suggests when data changes the view changes and vice-versa.

To utilize the reactivity power of Vue there are some options that we are going cover.

Ref

You can think of a ref as a special kind of variable that you can use inside your Vue application. This description is only true when you start working with Vue for the first time as it gets a bit more complex afterwards.

Defining a ref is as simple as this:

const message = ref("Hello World")

Use it inside your template using the interpolation syntax:

<span>{{ message }}</span>

If you are asking yourself why I called it a variable but declared message using a const keyword you have the every right to.

As you know you cannot change the value of constant, as it is the purpose of the const keyword. But there is subtle little thing you should know about. Although the keyword const doesn't let the data of a variable to be changed, it doesn't care about the nested data! This is the case with ref as well. To understand this situation better try the code below:

const o = {
  a: 1,
  b: 2,
  c: 3
}
console.log(o.a) // 1
o.a = 4
console.log(o.a) // 4

As you can see I can change the value of o.a since objects are only references and not a whole value by themselves. So when I change the value of a inside the object o the const limitation isn't applied. Of course, if you wanted to assign a value to o itself it will throw an error and won't let you do it. For example, the code below is wrong:

const o = {
  a: 1,
  b: 2,
  c: 3
}
o = "hello"

This is the same case when using ref (and other stuff you will see later here). When you invoke a ref function it turns everything it received into an object. This is called wrapping. Try this code:

const message = ref("Hello World")
console.log(message)

You should see something like the image below:

As you can see when logging the message variable you are not receiving Hello World directly, instead it is inside an object and you can access your actual value using the value key of the aforementioned object. This lets Vue watch for changes and do the MVVM thing! :)

When you access your ref inside a Vue template there is no need to access it like message.value. Vue is smart enough to render the actual value inside the template instead of the object. But in case you want to access or modify the value of a ref inside your script you should do so using .value:

message.value = "Adnan!"
console.log(message.value) // Adnan!

Reactive

As you've seen when using a ref, Vue wraps your data inside an object and lets you access it via .value. This is usually the most used case. You can wrap almost everything using a ref and make it reactive.

In case you wonder how Vue watches for value changes and renders the view again and again, you should check out JavaScript Proxies.

If your value is an object itself, then you can use reactive instead of ref. The reactive function won't wrap your value and instead will make the object itself reactive and watchable.

const o = reactive({count: 0})

If you try to print out the o constant you will see that it is indeed your object without any major changes:

Now you may manipulate the key count as you would normally do in JavaScript and Vue will render the changes as soon as possible.

Here is an example:

const increase = () => {
    o.count++
}

If you had ref instead of reactive it would have looked like this:

const o = ref({count: 0})

const increase = () => {
    o.value.count++
}

If you are still unsure which one to use, keep in mind that ref is a safe option to use.

Shallow Ref

Give that you have a ref like below:

const state = ref({
  names: {
    adnan: 'babakan',
    arian: 'amini',
    ata: 'parvin',
    mahdi: 'salehi'
  }
})

And printed my last name in your template as below:

<span>{{ state.names.adnan }}</span>

If you every changed my last name like this:

state.value.names.adnan = 'masruri'

Your template will be updated to show masruri instead of babakan. This is due to the fact that ref makes a deeply watched object and the changes to the view (template) are triggered for nested data as well.

There is an option to prevent such behaviour if that's what you want. To do so you may use shallowRef. A shallowRef acts exactly like ref does, with an exception of not watching for deep changes.

const state = shallowRef({
  names: {
    adnan: 'babakan',
    arian: 'amini',
    ata: 'parvin',
    mahdi: 'salehi'
  }
})

onMounted(() => {
  state.value.names.adnan = 'masruri'
})

The code above will result in your template showing babakan as it is not watched. But changing the .value entirely will trigger changes. So the code below will result in your template getting updated as well:


const state = shallowRef({
  names: {
    adnan: 'babakan',
    arian: 'amini',
    ata: 'parvin',
    mahdi: 'salehi'
  }
})

onMounted(() => {
  state.value = {
    names: {
      adnan: 'masruri',
      arian: 'amini',
      ata: 'parvin',
      mahdi: 'salehi'
    }
  }
})

This is a great option for performance-related concerns.

Shallow Reactive

So far we've known that ref wraps the data and watches it deeply and shallowRef wraps the data and watches it shallowly. Now tell me this, if reactive makes an object reactive, what does shallowReactive do?

const state = shallowReactive({
  names: {
    adnan: 'babakan',
    arian: 'amini',
    ata: 'parvin',
    mahdi: 'salehi',
  },
})

onMounted(() => {
  state.names.adnan = 'masruri'
})

As you might have guessed the template won't be updated.

Trigger Ref

Given that you are using a shallowRef and changed a value and now want your template to be updated according to the new data as well, you may use the triggerRef function:

const state = shallowRef({
  names: {
    adnan: 'babakan',
    arian: 'amini',
    ata: 'parvin',
    mahdi: 'salehi'
  }
})

onMounted(() => {
  state.value.names.adnan = 'masruri'
  triggerRef(state)
})

Now the template will also show masruri. This is more like changing from an automatic gear to a manual gear if you will.

This is usable for both shallowRef and shallowReactive.

Read Only

The readonly function receives a ref or a reactive as an argument and returns an exact copy that is only possible to be read from. This is used when you want to make sure your data is safe and is not possible to change when watching for it.

Example:

<template>
  <div>
    {{ infoReadOnly }}
  </div>
</template>

<script setup>
const info = ref({
  first: 'Adnan',
  last: 'Babakan'
})

const infoReadOnly = readonly(info)

onMounted(() => {
  info.value.first = 'Arian'
})
</script>

Though I've changed the value of info, since infoReadOnly is actually a live copy of info my changes are reflected in infoReadOnly as well. Yet you may not change the values using infoReadOnly directly:

const info = ref({
  first: 'Adnan',
  last: 'Babakan'
})

const infoReadOnly = readonly(info)

onMounted(() => {
  infoReadOnly.value.first = 'Arian'
})

This won't change the data and will warn you in the console as below:

Shallow Read Only

If we have ref and shallowRef, reactive and shallowReactive, why not have a shallowReadonly?

A shallowReadonly only makes the root level elements readonly whilst you can change the nested data:

const stateShallowReadonly = shallowReadonly({
  name: 'Adnan',
  friends: [
    { name: 'Arian' },
    { name: 'Ata' },
    { name: 'Mahdi' }
  ]
})

onMounted(() => {
  stateShallowReadonly.name = 'Brad'
})

The code above will warn you and won't change the value of name since it is a direct property.

But you can freely change anything inside friends since it is nested:

const stateShallowReadonly = shallowReadonly({
  name: 'Adnan',
  friends: [
    { name: 'Arian' },
    { name: 'Ata' },
    { name: 'Mahdi' }
  ]
})

onMounted(() => {
  stateShallowReadonly.friends[0].name = 'Brad'
})

Computed

Man, I love computed in Vue! You can imagine it as a glass in which you can mix your potions and still have your potions standing there intact!

A computed is like a ref or reactive that can be accessed and watched but not changed. Then what's the difference between a computed and a readonly you might ask. A computed can be a mixture of stuff. For example:

const state = ref({
  first: 'Adnan',
  last: 'Babakan'
})

const fullName = computed(() => state.value.first + ' ' + state.value.last)

Now you have a fullName which you may access its value inside a template with {{ fullName }} or inside your script using fullName.value.

The value of fullName will always depend on the state.value.first and state.value.last and will change if those guys change.

A computed receives a function that returns a value and can depend on multiple reactive data.

Writable Computed

Though a computed is mostly used to read a combination of data, the possibility to make a computed writable is also there.

Instead of passing a function to computed you may pass an object including two properties called get and set that both are functions.

For instance:

const state = ref({
  first: 'Adnan',
  last: 'Babakan'
})

const fullName = computed({
  get: () => state.value.first + ' ' + state.value.last,
  set: (value) => {
    const [first, last] = value.split(' ')
    state.value.first = first
    state.value.last = last
  }
})

Now if you try to write the value of fullName like below:

fullName.value = 'Ata Parvin'

It will split your string into 2 parts using a space and assign the first part to state.value.first and the second to state.value.last.

This is not a good way to determine which part of a name is a first name and which is a last name, but for the sake of demonstration, this is the only thing that came to my mind. :D

Watching

Watching is something that you will probably need a lot. Watching is referred to the act in which you want to run something in case a reactive data changes. In different systems there are various naming for this act, sometimes they are called hooks as well. But in Vue, we will call them watches.

Watch

The first thing you will encounter. A watch function receives two arguments. The reactive data to watch and the function to be invoked when the data changes respectively.

Here is a simple watch:

const count = ref(0)

const increase = () => {
  count.value++
}

watch(count, () => {
  console.log('Count changed to ' + count.value)
})

Now whenever the value of count is changed, you will see the log Count changed to ((count)) in your console.

The callback function also receives two arguments which are passed to it when the watch is triggered. The first argument holds the new value and the second one holds the old value. Here is an example:

const count = ref(0)

const increase = () => {
  count.value++
}

watch(count, (newValue, oldValue) => {
  console.log('Counter changed from ' + oldValue + ' to ' + newValue)
})

Note: Be careful when using the newValue and oldValue with objects as objects are passed by reference.

To be more accurate, a watch function receives a third argument as well. This third argument is an object that holds some options which can change the behaviour of the watching action.

Immediate

An immediate watch function is triggered at the instance it's created as well as when a change happens. You can think of it as the difference between a while loop and a do...while loop if you know what I mean. In other words, even if there is never a change, your callback function will run at least once:

watch(count, () => {
  console.log('Count changed to ' + count.value)
}, {
  immediate: true,
})

The value for immediate can be true or false. And the default value is false.

Once

If you want your watcher to run only once, you may define the once option and set its value to true. The default value is false.

watch(count, () => {
  console.log('Count changed to ' + count.value)
}, {
  once: true,
})

This will only trigger once when the value of count changes.

Advanced Watchers

Previously we've mentioned that watchers accept a reactive data as the first argument. While this is true, this is not the whole case.

A watch function can receive a getter function or an array of reactive objects and getter functions. This is used for when we need to watch for multiple data changes, and/or when we need to watch the result of two or more things when affecting each other. Let's have some examples.

Watching Getter Function

Take the code below as an example:

<template>
  <div>
    <div>
      <div>Timer one: {{ timerOne }}</div>
      <div>Timer two: {{ timerTwo }}</div>
    </div>
    <button @click="timerOne++">Accelerate timer one</button>
    <button @click="timerTwo++">Accelerate timer two</button>
  </div>
</template>

<script setup>
const timerOne = ref(0)
const timerTwo = ref(0)

onMounted(() => {
  setInterval(() => {
    timerOne.value++
    timerTwo.value++
  }, 1000)
})

watch(() => timerOne.value - timerTwo.value, () => {
  console.log('There was a change in the gap between timerOne and timerTwo. Gap is ' + (Math.abs(timerOne.value - timerTwo.value)) + ' seconds.')
})
</script>

It's a simple code that makes 2 refs holding a number and increasing both of them 1 by 1 each second. Logically the difference of these two refs are always equal to zero unless one gets changes out of its turn. As both increase the difference stays 0 so the watched won't get triggered as it only watches for the changes to the result of timerOne.value - timerTwo.value.

Yet there are two buttons that each adds 1 to timerOne and timerTwo respectively. When you click on any of those buttons the difference will be more or less than 0 thus the watch being triggered and logging the gap between these two timers.

Watching Multiple Values

Here is an example of an array of reactive data being passed to the first argument of the watch function:

<template>
  <div>
    <div>
      <div>Counter one: {{ counterOne }}</div>
      <div>Counter two: {{ counterTwo }}</div>
    </div>
    <button @click="counterOne++">Increase counter one</button>
    <button @click="counterTwo++">Increase counter two</button>
  </div>
</template>

<script setup>
const counterOne = ref(0)
const counterTwo = ref(0)

watch([
  counterOne,
  counterTwo,
], () => {
  console.log('One of the counters changes')
})
</script>

No matter which ref changes, the watcher will be triggered.

Watch Effect

A watchEffect function acts almost exactly like a watch function with a main difference. In a watchEffect you don't need to define what to watch and any reactive data that is used inside the callback you provide your watchEffect is watched automatically. For example:

const count = ref(0)

watchEffect(() => {
  console.log(count.value)
})

In case our count is changed the watchEffect will trigger its callback function since count.value is used inside it. This is good if you have complex logic to watch for.

Hope this was useful and you've enjoyed it. In case you spot any mistakes or feel like there should be an improvement, kindly let me know.

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

Serving a Static Website in Ubuntu [NGINX + Docker]

Adnan Babakan (he/him) — Sat, 28 Sep 2024 17:15:19 +0000

Hi there DEV.to community.

Recently as I was working on a personal project I was looking for a simple deployment of a static website on my Ubuntu server using Docker. Although it is possible to serve a simple static website using only nginx, this article will let you know about the principles of hosting a website using Docker which you can expand as you wish.

Prerequisities

Ubuntu server installed (I am using Ubuntu 22.04)
Docker installed (If you need help with installing Docker here is a good article from DigitalOcean: How To Install and Use Docker on Ubuntu 22.04)

Making our website ready

Nowadays there are two main website types. First is the one rendered using a back-end service such as Laravel or Nuxt called SSR websites. And second is the websites that are pre-rendered (referred to as a generated website as well). The pre-rendered websites can be categorized into two sections, a classic website which includes a .html file for each page, and a SPA which usually directs all requests to your index.html and your JavaScript router engages to respond with the appropriate page to be shown.

Here we will discuss SPA apps only that redirect all the request to your index.html. These types of generations are usually possible using the build tools inside your framework. For instance a Nuxt project can be generated for static deployment using npm run generate and puts the output inside your .output/public directory.

Preparing the Dockerfile

We should first create a file called Dockerfile at the root of our project.

We are going to use nginx:alpine image since it is lightweight and does whatever we want:

FROM nginx:alpine

Then we should determine the config of our nginx. To do so first of all I prefer to remove the default config file to make sure the new data is loaded correctly:

RUN rm /etc/nginx/conf.d/default.conf

RUN echo "server {\
              listen 80;\
              root /usr/share/nginx/html;\
              index index.html;\
              location / {\
                  try_files $uri $uri/ /index.html;\
              }\
              location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$ {\
                  expires 30d;\
                  access_log off;\
              }\
              location ~ /\.ht {\
                  deny  all;\
              }\
              error_page 404 /index.html;\
          }" > /etc/nginx/conf.d/default.conf

This section deletes the /etc/nginx/conf.d/default.conf file and writes the new data in the same file (and creating it since it doesn't exist anymore). The backslashes (\) are added to the end of each line since it is interpreted as a string and we need to make sure new lines are considered inside of the string and not our dockerfile. This is called an escape character.

Let's analyze what this Nginx config does:

listen 80;

This line tells Nginx to listen on port 80. This port is exposed inside the container when it is running and we should bind it to an external port with which we can access the web server with our server's IP. So this 80 has nothing to do with which port the application will be accessible through.

root /usr/share/nginx/html;

This line declares the directory in which we store our website's files.

index index.html;

This line determines the index of website. Index of a website is the file that is loaded when no address is provided with the request.

location / {
      try_files $uri $uri/ /index.html;
}

This block redirects all the requests to the index.html. So using this config assures us that the rest of the routing is handled by our JavaScript framework's router and not by the webserver all through.

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$ {
       expires 30d;
       access_log off;
}

This block tells the browser requesting the file types indicated to cache them for 30 days.

location ~ /\.ht {
       deny  all;
}

This block denies direct access to files with a format starting with .ht. This includes .html and .htm files.

error_page 404 /index.html;

And at the end, we redirect 404 errors to our index.html as well so that your beautiful error page can be shown by your framework.

COPY .output/public /usr/share/nginx/html

The code above will be the last line in our Dockerfile. It copies the content of your generated website inside /usr/share/ngnix/html directory of the container that will run.

So here is the full Dockefile:

FROM nginx:alpine

RUN rm /etc/nginx/conf.d/default.conf

RUN echo "server {\
              listen 80;\
              root /usr/share/nginx/html;\
              index index.html;\
              location / {\
                  try_files $uri $uri/ /index.html;\
              }\
              location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$ {\
                  expires 30d;\
                  access_log off;\
              }\
              location ~ /\.ht {\
                  deny  all;\
              }\
              error_page 404 /index.html;\
          }" > /etc/nginx/conf.d/default.conf

COPY .output/public /usr/share/nginx/html

Building and running

There are two main ways to run this Docker project. One is manually and the other one uses a compose.yml file. Here ae both:

Manually

First we need to build the image. Run the command below in your terminal of choosing at the root of your project:

docker build -t my-static-website .

docker build is the command that builds your image for you. The -t flag sets a name for your image so you can replace my-static-website with anything you want. And finally . indicates the folder including your Dockerfile which is the current folder. If you ever wanted to run this command from another folder you need to put the absolute address of your projects root instead of ..

It might take a few seconds (or minutes) to build you image. The output of the command above should look like this:

[+] Building 36.7s (9/9) FINISHED                                                                                                 docker:default
 => [internal] load build definition from Dockerfile                                                                                        0.0s
 => => transferring dockerfile: 686B                                                                                                        0.0s
 => [internal] load metadata for docker.io/library/nginx:alpine                                                                             0.4s
 => [internal] load .dockerignore                                                                                                           0.0s
 => => transferring context: 2B                                                                                                             0.0s
 => [1/4] FROM docker.io/library/nginx:alpine@sha256:a5127daff3d6f4606be3100a252419bfa84fd6ee5cd74d0feaca1a5068f97dcf                      15.0s
 => => resolve docker.io/library/nginx:alpine@sha256:a5127daff3d6f4606be3100a252419bfa84fd6ee5cd74d0feaca1a5068f97dcf                       0.0s
 => => sha256:b887aca7aed6134b029401507d27ac9c8fbfc5a6cf510d254bdf4ac841cf1552 11.21kB / 11.21kB                                            0.0s
 => => sha256:af676cbe1eebad012784df0b450beb143af153514b61986d262cfae62f83335d 1.79MB / 1.79MB                                              4.2s
 => => sha256:cf04c63912e16506c4413937c7f4579018e4bb25c272d989789cfba77b12f951 4.09MB / 4.09MB                                              4.4s
 => => sha256:0bd499aae1693a481ec5f38cefa5f8803e0d8a5bef0c20cb3e6989eb2975cde9 627B / 627B                                                  1.2s
 => => sha256:a5127daff3d6f4606be3100a252419bfa84fd6ee5cd74d0feaca1a5068f97dcf 9.07kB / 9.07kB                                              0.0s
 => => sha256:19db381c08a95b2040d5637a65c7a59af6c2f21444b0c8730505280a0255fb53 2.50kB / 2.50kB                                              0.0s
 => => sha256:a258ad06a688beff3d4a30eede1b350e64a9ebbd5b80b8a095eec17f3f5a9e15 956B / 956B                                                  2.0s
 => => sha256:906b4c822d155ab6595749cb264093152af7faafabdc0d5534fb161909cf71b4 394B / 394B                                                  2.9s
 => => sha256:780210e97849521bfdd49e752a71a1e150219ee398e1bd8c6399e7d8797b923f 1.21kB / 1.21kB                                              3.7s
 => => sha256:45d5bc49ce25a46e0fa4f1481ae38f289d8f5f6b207ff03d038bcb784afe821e 1.40kB / 1.40kB                                              4.5s
 => => sha256:f12230e24af8b61e0b5f5e6c066fe0cfd975bac104a495a9e8fa28dc513c271f 13.72MB / 13.72MB                                           14.6s
 => => extracting sha256:cf04c63912e16506c4413937c7f4579018e4bb25c272d989789cfba77b12f951                                                   0.1s
 => => extracting sha256:af676cbe1eebad012784df0b450beb143af153514b61986d262cfae62f83335d                                                   0.0s
 => => extracting sha256:0bd499aae1693a481ec5f38cefa5f8803e0d8a5bef0c20cb3e6989eb2975cde9                                                   0.0s
 => => extracting sha256:a258ad06a688beff3d4a30eede1b350e64a9ebbd5b80b8a095eec17f3f5a9e15                                                   0.0s
 => => extracting sha256:906b4c822d155ab6595749cb264093152af7faafabdc0d5534fb161909cf71b4                                                   0.0s
 => => extracting sha256:780210e97849521bfdd49e752a71a1e150219ee398e1bd8c6399e7d8797b923f                                                   0.0s
 => => extracting sha256:45d5bc49ce25a46e0fa4f1481ae38f289d8f5f6b207ff03d038bcb784afe821e                                                   0.0s
 => => extracting sha256:f12230e24af8b61e0b5f5e6c066fe0cfd975bac104a495a9e8fa28dc513c271f                                                   0.3s
 => [internal] load build context                                                                                                           0.0s
 => => transferring context: 3.25kB                                                                                                         0.0s
 => [2/4] RUN rm /etc/nginx/conf.d/default.conf                                                                                            20.8s
 => [3/4] RUN echo "server {              listen 80;              root /usr/share/nginx/html;              index index.html;                0.3s
 => [4/4] COPY .output/public /usr/share/nginx/html                                                                                                      0.1s
 => exporting to image                                                                                                                      0.0s
 => => exporting layers                                                                                                                     0.0s
 => => writing image sha256:f8842f2b4cbf232c6b7139efe2e348e13a12188a58e60ef1f767a635c341de26                                                0.0s
 => => naming to docker.io/library/my-static-website

Now you can run the command below to see the list of your images:

docker image ls

You should see your image in the list as below:

my-static-website   latest    f8842f2b4cbf   About a minute ago   62.2MB

Now that we have our image ready it is time to run it. To run it we can use the command below:

docker run -d -p "4000:80" my-static-website

The docker run command tries to run the image you provided. Here we added to flags which are as below:

-d tells docker to run the container in detached mode. Detached mode is when the process is run in background and doesn't need your terminal session to stay open.
-p flag which receives an argument with HOST:CONTAINER format binds your container's innerly exposed port to a port on your actual host machine.

Now you can see the list of your running containers using the command below:

docker container ls

You should see a record like below:

e7a66fd934c1   my-static-website   "/docker-entrypoint.…"   3 seconds ago   Up 2 seconds   0.0.0.0:4000->80/tcp, :::4000->80/tcp   quirky_keller

Now you can access your website using IP:4000. IP is the IP of the machine docker running on. Or 127.0.0.1:4000 if you are experimenting on your own machine.

If running a container as above satisfies your needs then we are done here. But I am going to show you how to set a domain on your project so you can access it using a domain instead of an IP.

Using docker composer

Usage of a compose file is super neat and makes your life easier. You can imagine it as a set of premade commands and instructions for your docker. Create a file named compse.yml and put the content below in it:

services:
    my-static-website:
        build:
            context: .
            dockerfile: Dockerfile
        ports:
            - "4000:80"

As you can relate probably, these settings are somehow counterparts of the commands that we've run manually.

Inside the services, we define our service called my-static-website and let docker know how to build it using our Dockerfile. And we've bound out ports as well just as we did when running the docker run command.

Now that you have this file the only command you need to run is:

docker compose up -d

This command builds and runs your image and container respectively just as we've done it manually. And thanks to the -d (flag of detachment) the running process moved to the background.

Setting a domain

To set a domain we need to run an Nginx instance on the machine we've deployed the container itself. This makes us able to have a reverse proxy that directs incoming HTTP requests which use port 80 to another port and sends back the response to the user.

Installing Nginx on Ubuntu is fairly simple:

sudo apt install nginx

After the installation is complete make sure to allow Nginx in your firewall:

sudo ufw allow 'Nginx HTTP'

This opens ports 80 and 443 for HTTP and HTTPS respectively.

Nginx uses a structure that is easy to control available sites and enabled sites. To make a site enabled it is usually recommended to create a file following the websites domain inside the /etc/nginx/sites-available directory. So first of all move inside this directory:

cd /etc/nginx/sites-available

Then we need to make a file named after the domain. Although it is not mandated to be the domain name, following this practice makes it easier to maintain your configuration files. You may create the file using the touch command:

touch mydomain.com.conf

Or simple using a text editor to open the file (in case the file doesn't exist it will create it upon saving). I prefer nano so here is how we do it:

nano mydomain.com.conf

Inside the editor paste the code below:

server {
        listen 80;
        server_name mydomain.com;
        location / {
                proxy_pass http://127.0.0.1:4000;
                include proxy_params;
        }
}

Let's break this configuration up:

listen 80;

This tells Nginx to listen to port 80 for this server configuration.

server_name mydomain.com;

This sets the active domains for this server configuration. You may use multiple domains here and put the www. subdomain here as well in case you want it:

server_name mydomain.com www.mydomain.com

The location scope in this configuration is:

location / {
      proxy_pass http://127.0.0.1:4000;
      include proxy_params;
}

This is the main part that redirects all the requests to your container. It passes every request to 127.0.0.1:4000 along with all the parameters.

Now save the file and make sure your file is saved correctly using the ls command:

ls -hla

If you see your file here then we are done here.

Now it is time to link this file to the /etc/nginx/sites-enabled directory which Nginx reads to serve websites:

sudo ln -s /etc/nginx/sites-available/mydomain.com.conf /etc/nginx/sites-enabled

Now move to the enabled sites directory:

cd /etc/nginx/sites-enabled

Check if your file is linked in this directory:

ls -hla

You should see a record as below:

lrwxrwxrwx 1 root root   44 Sep 28 17:05 mydomain.com.conf -> /etc/nginx/sites-available/mydomain.com.conf

Now it is time to reload your Nginx so your website comes alive:

sudo systemctl reload nginx

If there are no errors in the configuration you've just created reloading the Nginx service won't output anything. So if you see no message you are done here as well.

Now that our Nginx server waits for requests coming for mydomain.com we need to point this domain to our server.

If you are using a real domain and a real server you can use a DNS service such as Cloudflare and make an A RECORD pointing your domain to your server's IP.

In case you are just testing locally you may change your hosts file to point your domain to your servers IP.

Now accessing the mydomain.com domain should show you your static website successfully!

Hope you've found this article helpful. Feel free to let me know if there are any mistakes in the article or any points to make it better.

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

Dockerizing Laravel (With compose) [Alpine + NGINX + PHP FPM + MariaDB + PHPMyAdmin] 🛳️🛳️

Adnan Babakan (he/him) — Thu, 11 Jan 2024 14:07:40 +0000

Hey there DEV.to community!

In the last part, we've covered how to dockerize a Laravel app. That was a great way to know how stuff goes around in a docker container and get you started before moving to the next level!

Although it is possible to run all your requirements inside a single container it is not a great practice. (Thanks to @yuhenobi)

In this part, we will go through a better-architectured solution using docker compose.

What's a docker compose?

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application's services. Then, with a single command, you create and start all the services from your configuration.

This is the definition of docker's compose tool by its official documentation. I believe it is the simplest description you'll find of it.

But let me explain how docker compose can make your life easier.

Imagine you want to run a nginx container to serve for your laravel app. The amount of arguments you have to put in can grow radically very fast very soon because you probably want to configure it to your needs.

This is how a simple nginx container should start along with its volume:

docker run --name some-nginx -v /some/content:/usr/share/nginx/html:ro -d nginx

Now imagine that you want to publish the port of your container to the host:

docker run --name nginx -v /nginx/html:/usr/share/nginx/html -p "8000:80" -d nginx

And the command grows bigger and bigger. It is hard to handle such commands and remembering all the options is pretty hard at times.

Docker compose is a simple YAML file that you can store your configuration of how one or more containers should run and how they interact with each other and so on.

So the composer configuration for the aforementioned command looks like below:

services:
    nginx:
        image: nginx
        volumes:
            - /nginx/html:/usr/share/nginx/html
        ports:
            - 8000:80

Saving this configuration inside a file called docker-compose.yml and running the command below will result in the same as before:

docker compose up -d

The flag -d stands for detached. It means send the process to the background when it's done. If you omit adding this flag the containers defined in the compose file will stop if you exit the process.

Laravel Dockerfile

Before everything else we need to dockerize Laravel. I chose php:8.2-fpm-alpine3.19 as my base image since it has a small image size since it is based on alpine and fpm gives you the speed you need for your application!

Create a file called Dockerfile.laravel and put the code below in it:

FROM php:8.2-fpm-alpine3.19 AS build

ARG APP_NAME
ARG APP_ENV
ARG APP_KEY
ARG APP_DEBUG
ARG APP_URL
ARG LOG_CHANNEL
ARG LOG_DEPRECATIONS_CHANNEL
ARG LOG_LEVEL
ARG DB_CONNECTION
ARG DB_HOST
ARG DB_PORT
ARG DB_DATABASE
ARG DB_USERNAME
ARG DB_PASSWORD
ARG BROADCAST_DRIVER
ARG CACHE_DRIVER
ARG FILESYSTEM_DISK
ARG QUEUE_CONNECTION
ARG SESSION_DRIVER
ARG SESSION_LIFETIME
ARG MEMCACHED_HOST
ARG REDIS_HOST
ARG REDIS_PASSWORD
ARG REDIS_PORT
ARG MAIL_MAILER
ARG MAIL_HOST
ARG MAIL_PORT
ARG MAIL_USERNAME
ARG MAIL_PASSWORD
ARG MAIL_ENCRYPTION
ARG MAIL_FROM_ADDRESS
ARG MAIL_FROM_NAME
ARG AWS_ACCESS_KEY_ID
ARG AWS_SECRET_ACCESS_KEY
ARG AWS_DEFAULT_REGION
ARG AWS_BUCKET
ARG AWS_USE_PATH_STYLE_ENDPOINT
ARG PUSHER_APP_ID
ARG PUSHER_APP_KEY
ARG PUSHER_APP_SECRET
ARG PUSHER_HOST
ARG PUSHER_PORT
ARG PUSHER_SCHEME
ARG PUSHER_APP_CLUSTER
ARG VITE_APP_NAME
ARG VITE_PUSHER_APP_KEY
ARG VITE_PUSHER_HOST
ARG VITE_PUSHER_PORT
ARG VITE_PUSHER_SCHEME
ARG VITE_PUSHER_APP_CLUSTER
ARG BUCKET_ENDPOINT_URL
ARG BUCKET_ACCESS_KEY
ARG BUCKET_SECRET_KEY
ARG BUCKET_DEFAULT_REGION
ARG BUCKET_NAME

RUN apk add php-session \
    php-tokenizer \
    php-xml \
    php-ctype \
    php-curl \
    php-dom \
    php-fileinfo \
    php-mbstring \
    php-openssl \
    php-pdo \
    php-pdo_mysql \
    php-session \
    php-tokenizer \
    php-xml \
    php-ctype \
    php-xmlwriter \
    php-simplexml \
    composer


RUN docker-php-ext-install mysqli pdo_mysql
RUN docker-php-ext-enable mysqli pdo_mysql

RUN apk add --update nodejs npm

COPY . /var/www/html

WORKDIR /var/www/html

RUN printf "\
APP_NAME=$APP_NAME\n\
APP_ENV=$APP_ENV\n\
APP_KEY=$APP_KEY\n\
APP_DEBUG=$APP_DEBUG\n\
APP_URL=$APP_URL\n\
LOG_CHANNEL=$LOG_CHANNEL\n\
LOG_DEPRECATIONS_CHANNEL=$LOG_DEPRECATIONS_CHANNEL\n\
LOG_LEVEL=$LOG_LEVEL\n\
DB_CONNECTION=$DB_CONNECTION\n\
DB_HOST=$DB_HOST\n\
DB_PORT=$DB_PORT\n\
DB_DATABASE=$DB_DATABASE\n\
DB_USERNAME=$DB_USERNAME\n\
DB_PASSWORD=$DB_PASSWORD\n\
BROADCAST_DRIVER=$BROADCAST_DRIVER\n\
CACHE_DRIVER=$CACHE_DRIVER\n\
FILESYSTEM_DISK=$FILESYSTEM_DISK\n\
QUEUE_CONNECTION=$QUEUE_CONNECTION\n\
SESSION_DRIVER=$SESSION_DRIVER\n\
SESSION_LIFETIME=$SESSION_LIFETIME\n\
MEMCACHED_HOST=$MEMCACHED_HOST\n\
REDIS_HOST=$REDIS_HOST\n\
REDIS_PASSWORD=$REDIS_PASSWORD\n\
REDIS_PORT=$REDIS_PORT\n\
MAIL_MAILER=$MAIL_MAILER\n\
MAIL_HOST=$MAIL_HOST\n\
MAIL_PORT=$MAIL_PORT\n\
MAIL_USERNAME=$MAIL_USERNAME\n\
MAIL_PASSWORD=$MAIL_PASSWORD\n\
MAIL_ENCRYPTION=$MAIL_ENCRYPTION\n\
MAIL_FROM_ADDRESS=$MAIL_FROM_ADDRESS\n\
MAIL_FROM_NAME=$MAIL_FROM_NAME\n\
AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID\n\
AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY\n\
AWS_DEFAULT_REGION=$AWS_DEFAULT_REGION\n\
AWS_BUCKET=$AWS_BUCKET\n\
AWS_USE_PATH_STYLE_ENDPOINT=$AWS_USE_PATH_STYLE_ENDPOINT\n\
PUSHER_APP_ID=$PUSHER_APP_ID\n\
PUSHER_APP_KEY=$PUSHER_APP_KEY\n\
PUSHER_APP_SECRET=$PUSHER_APP_SECRET\n\
PUSHER_HOST=$PUSHER_HOST\n\
PUSHER_PORT=$PUSHER_PORT\n\
PUSHER_SCHEME=$PUSHER_SCHEME\n\
PUSHER_APP_CLUSTER=$PUSHER_APP_CLUSTER\n\
VITE_APP_NAME=$VITE_APP_NAME\n\
VITE_PUSHER_APP_KEY=$VITE_PUSHER_APP_KEY\n\
VITE_PUSHER_HOST=$VITE_PUSHER_HOST\n\
VITE_PUSHER_PORT=$VITE_PUSHER_PORT\n\
VITE_PUSHER_SCHEME=$VITE_PUSHER_SCHEME\n\
VITE_PUSHER_APP_CLUSTER=$VITE_PUSHER_APP_CLUSTER\n\
BUCKET_ENDPOINT_URL=$BUCKET_ENDPOINT_URL\n\
BUCKET_ACCESS_KEY=$BUCKET_ACCESS_KEY\n\
BUCKET_SECRET_KEY=$BUCKET_SECRET_KEY\n\
BUCKET_DEFAULT_REGION=$BUCKET_DEFAULT_REGION\n\
BUCKET_NAME=$BUCKET_NAME" > /usr/local/laravel.env

RUN composer install
RUN npm install

EXPOSE 9000

RUN printf "\
chmod -R o+w /var/www/html/storage\n\
chown -R root:root /var/www/html/storage\n\
cp /usr/local/laravel.env /var/www/html/.env\n\
php-fpm\n\
" > /start.sh

RUN chmod +x "/start.sh"

ENTRYPOINT "/start.sh"

When you need more than one Dockerfile the convention is to name it like Dockerfile.[NAME].

So let's dive into the Dockerfile and see what's happening.

First of all, we define our base image:

FROM php:8.2-fpm-alpine3.19 AS build

Then define the ARGs that we are going to use as our Laravel application's env.

ARG APP_NAME
ARG APP_ENV
ARG APP_KEY
ARG APP_DEBUG
ARG APP_URL
ARG LOG_CHANNEL
ARG LOG_DEPRECATIONS_CHANNEL
ARG LOG_LEVEL
ARG DB_CONNECTION
ARG DB_HOST
ARG DB_PORT
ARG DB_DATABASE
ARG DB_USERNAME
ARG DB_PASSWORD
ARG BROADCAST_DRIVER
ARG CACHE_DRIVER
ARG FILESYSTEM_DISK
ARG QUEUE_CONNECTION
ARG SESSION_DRIVER
ARG SESSION_LIFETIME
...

After defining the base image and ARGs we need to install the requirements of Laravel so it can run on this container:

RUN apk add php-session \
    php-tokenizer \
    php-xml \
    php-ctype \
    php-curl \
    php-dom \
    php-fileinfo \
    php-mbstring \
    php-openssl \
    php-pdo \
    php-pdo_mysql \
    php-session \
    php-tokenizer \
    php-xml \
    php-ctype \
    php-xmlwriter \
    php-simplexml \
    composer

I've omitted git and other tools that are not absolute requirements of Laravel but you can add them if you wish.

Then using a great tool called docker-php-ext-install which is already installed in the base image we chose, we enable MySQL extension:

RUN docker-php-ext-install mysqli pdo_mysql
RUN docker-php-ext-enable mysqli pdo_mysql

To see the supported PHP extensions you can enable using docker-php-ext-install visit here.

Some Laravel apps need Node to run if you are using Laravel as a full-stack framework. So installing Node.js is a must:

RUN apk add --update nodejs npm

Then simply copy the current directory inside /var/www/html and change the working directory as well:

COPY . /var/www/html
WORKDIR /var/www/html

Well, this part gets a little tricky but it is pretty simple. Since we are going to mount /var/www/html as a volume to be shared between other containers, the data inside this directory cannot be changed while building the image and needs to be changed after the container has run. Thus, we need to create a .env file and copy it into the Laravel directory later on:

RUN printf "\
APP_NAME=$APP_NAME\n\
APP_ENV=$APP_ENV\n\
APP_KEY=$APP_KEY\n\
APP_DEBUG=$APP_DEBUG\n\
APP_URL=$APP_URL\n\
LOG_CHANNEL=$LOG_CHANNEL\n\
LOG_DEPRECATIONS_CHANNEL=$LOG_DEPRECATIONS_CHANNEL\n\
LOG_LEVEL=$LOG_LEVEL\n\
DB_CONNECTION=$DB_CONNECTION\n\
DB_HOST=$DB_HOST\n\
DB_PORT=$DB_PORT\n\
DB_DATABASE=$DB_DATABASE\n\
DB_USERNAME=$DB_USERNAME\n\
DB_PASSWORD=$DB_PASSWORD\n\
BROADCAST_DRIVER=$BROADCAST_DRIVER\n\
CACHE_DRIVER=$CACHE_DRIVER\n\
FILESYSTEM_DISK=$FILESYSTEM_DISK\n\
QUEUE_CONNECTION=$QUEUE_CONNECTION\n\
SESSION_DRIVER=$SESSION_DRIVER\n\
SESSION_LIFETIME=$SESSION_LIFETIME\n\
MEMCACHED_HOST=$MEMCACHED_HOST\n\
REDIS_HOST=$REDIS_HOST\n\
REDIS_PASSWORD=$REDIS_PASSWORD\n\
REDIS_PORT=$REDIS_PORT\n\
MAIL_MAILER=$MAIL_MAILER\n\
MAIL_HOST=$MAIL_HOST\n\
MAIL_PORT=$MAIL_PORT\n\
MAIL_USERNAME=$MAIL_USERNAME\n\
MAIL_PASSWORD=$MAIL_PASSWORD\n\
MAIL_ENCRYPTION=$MAIL_ENCRYPTION\n\
MAIL_FROM_ADDRESS=$MAIL_FROM_ADDRESS\n\
MAIL_FROM_NAME=$MAIL_FROM_NAME\n\
AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID\n\
AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY\n\
AWS_DEFAULT_REGION=$AWS_DEFAULT_REGION\n\
AWS_BUCKET=$AWS_BUCKET\n\
AWS_USE_PATH_STYLE_ENDPOINT=$AWS_USE_PATH_STYLE_ENDPOINT\n\
PUSHER_APP_ID=$PUSHER_APP_ID\n\
PUSHER_APP_KEY=$PUSHER_APP_KEY\n\
PUSHER_APP_SECRET=$PUSHER_APP_SECRET\n\
PUSHER_HOST=$PUSHER_HOST\n\
PUSHER_PORT=$PUSHER_PORT\n\
PUSHER_SCHEME=$PUSHER_SCHEME\n\
PUSHER_APP_CLUSTER=$PUSHER_APP_CLUSTER\n\
VITE_APP_NAME=$VITE_APP_NAME\n\
VITE_PUSHER_APP_KEY=$VITE_PUSHER_APP_KEY\n\
VITE_PUSHER_HOST=$VITE_PUSHER_HOST\n\
VITE_PUSHER_PORT=$VITE_PUSHER_PORT\n\
VITE_PUSHER_SCHEME=$VITE_PUSHER_SCHEME\n\
VITE_PUSHER_APP_CLUSTER=$VITE_PUSHER_APP_CLUSTER\n\
BUCKET_ENDPOINT_URL=$BUCKET_ENDPOINT_URL\n\
BUCKET_ACCESS_KEY=$BUCKET_ACCESS_KEY\n\
BUCKET_SECRET_KEY=$BUCKET_SECRET_KEY\n\
BUCKET_DEFAULT_REGION=$BUCKET_DEFAULT_REGION\n\
BUCKET_NAME=$BUCKET_NAME" > /usr/local/laravel.env

I've saved this file /usr/local/laravel.env which will be used in our custom start-up script.

Now it's time to install PHP and Node.js dependencies:

RUN composer install
RUN npm install

And expose port 9000. This port is used by PHP-FPM:

EXPOSE 9000

In the next step we need to create a custom start-up script as bellow:

RUN printf "\
chmod -R o+w /var/www/html/storage\n\
chown -R root:root /var/www/html/storage\n\
cp /usr/local/laravel.env /var/www/html/.env\n\
php-fpm\n\
" > /start.sh

This is done since only one command can be run inside a container and a container will stop when the command has been completed.

Give the script permission to be executed:

RUN chmod +x "/start.sh"

And finally, set it as our entrypoint:

ENTRYPOINT "/start.sh"

NGINX Dockerfile

We need some customization to run NGINX the way we need it.

Create a file called Dockerfile.nginx and put the code below in it:

FROM nginx:stable-alpine AS base

RUN printf "\
    server {\n\
        listen 80;\n\
        index index.php index.html;\n\
        error_log  /var/log/nginx/error.log;\n\
        access_log /var/log/nginx/access.log;\n\
        root /var/www/html/public;\n\
        location ~ \.php$ {\n\
            try_files \$uri =404;\n\
            fastcgi_split_path_info ^(.+\.php)(/.+)$;\n\
            fastcgi_pass laravel:9000;\n\
            fastcgi_index index.php;\n\
            include fastcgi_params;\n\
            fastcgi_param SCRIPT_FILENAME \$document_root\$fastcgi_script_name;\n\
            fastcgi_param PATH_INFO \$fastcgi_path_info;\n\
        }\n\
        location / {\n\
            try_files \$uri \$uri/ /index.php?\$query_string;\n\
            gzip_static on;\n\
        }\n\
    }\n" > /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

This Dockerfile uses FROM nginx:stable-alpine as its base image.

We need to customize the way NGINX behaves to meet Laravel's requirements. The configuration that is saved inside /etc/nginx/conf.d/default.conf is the configuration recommended by Laravel's official documentation with a few minor tweaks:

Changed the fast_cgi address to laravel:9000 which will be available inside a private network we will define late inside a docker-compose.yml file.
Changed the root of our website to /var/www/html/public

Docker compose

Now that we have our customized Laravel and NGINX images, it is time to define the relation of these images and a few more images.

Create a file called docker-compose.yml and put the code below in it:

name: my-laravel

networks:
  laravel-network:
    driver: bridge

volumes:
  laravel-db:
    driver: local
  laravel-app:
    driver: local

services:
    laravel:
        build:
            context: .
            dockerfile: Dockerfile.laravel
            args:
              - APP_NAME=Laravel
              - APP_ENV=local
              - APP_KEY=
              - APP_DEBUG=true
              - APP_URL=YOUR_APP_URL
              - LOG_CHANNEL=stack
              - LOG_DEPRECATIONS_CHANNEL=null
              - LOG_LEVEL=debug
              - DB_CONNECTION=mysql
              - DB_HOST=db
              - DB_PORT=3306
              - DB_DATABASE=laravel
              - DB_USERNAME=root
              - DB_PASSWORD=DATABASE_PASSWORD
              - BROADCAST_DRIVER=log
              - CACHE_DRIVER=file
              - FILESYSTEM_DISK=minio
              - QUEUE_CONNECTION=sync
              - SESSION_DRIVER=file
              - SESSION_LIFETIME=120
              - MEMCACHED_HOST=127.0.0.1
              - REDIS_HOST=127.0.0.1
              - REDIS_PASSWORD=null
              - REDIS_PORT=6379
              - MAIL_MAILER=smtp
              - MAIL_HOST=mailpit
              - MAIL_PORT=1025
              - MAIL_USERNAME=null
              - MAIL_PASSWORD=null
              - MAIL_ENCRYPTION=null
              - MAIL_FROM_ADDRESS="hello@example.com"
              - MAIL_FROM_NAME="${APP_NAME}"
              - AWS_DEFAULT_REGION=us-east-1
              - AWS_USE_PATH_STYLE_ENDPOINT=false
              - PUSHER_PORT=443
              - PUSHER_SCHEME=https
              - PUSHER_APP_CLUSTER=mt1
              - VITE_APP_NAME="${APP_NAME}"
              - VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
              - VITE_PUSHER_HOST="${PUSHER_HOST}"
              - VITE_PUSHER_PORT="${PUSHER_PORT}"
              - VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
              - VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
        networks:
            - laravel-network
        volumes:
            - laravel-app:/var/www/html
        restart: always

    nginx:
        build:
            context: .
            dockerfile: Dockerfile.nginx
        volumes:
            - laravel-app:/var/www/html
        ports:
            - "16005:80"
        networks:
            - laravel-network

    db:
        image: mariadb
        expose:
            - 3306
        networks:
            - laravel-network
        environment:
            MYSQL_ROOT_PASSWORD: DATABASE_PASSWORD
            MYSQL_USER: root
            MYSQL_PASSWORD: DATABASE_PASSWORD
        volumes:
            - laravel-db:/var/lib/mysql
        restart: always

    phpmyadmin:
        image: phpmyadmin
        ports:
            - "16006:80"
        environment:
            - PMA_HOST=db
            - PMA_PORT=3306
            - UPLOAD_LIMIT=50000000
        networks:
            - laravel-network
        restart: always

Change the configuration to your needs and run the command below to start your containers:

docker compose up -d

Now you can access your Laravel app from localhost:16005 and your PhpMyAdmin from localhost:16006.

I hope this article was helpful. Please let me know of any mistakes or improvements.

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

Dockerizing Laravel 10 [Ubuntu image + PHP 8.2 FPM + NGINX] 🛳️🛳️

Adnan Babakan (he/him) — Sat, 23 Dec 2023 18:31:54 +0000

Hi there DEV.to community!

I've been trying to dockerize my Laravel app which acts as an API and run it on my server. While many Dockerfile exists on the internet when you search, they are mostly incomplete or somehow specific to some usage.

I will explain how I've done it and try to complete it to become a great Dockerfile for Laravel. Please let me know of anything better or any way to optimize it or any features missing from an optimal Laravel environment.

Be aware that this article is only about dockerizing a Laravel application and not any other database or filesystem. I will put these as a series procedurally.

TL;DR

Copy the content below inside a file called Docerfile at the root of your project. (Root of a project is where there are files like artisan, composer.json and .env , in case you are confused)

FROM ubuntu:latest AS base

ENV DEBIAN_FRONTEND noninteractive

# Install dependencies
RUN apt update
RUN apt install -y software-properties-common
RUN add-apt-repository -y ppa:ondrej/php
RUN apt update
RUN apt install -y php8.2\
    php8.2-cli\
    php8.2-common\
    php8.2-fpm\
    php8.2-mysql\
    php8.2-zip\
    php8.2-gd\
    php8.2-mbstring\
    php8.2-curl\
    php8.2-xml\
    php8.2-bcmath\
    php8.2-pdo

# Install php-fpm
RUN apt install -y php8.2-fpm php8.2-cli

# Install composer
RUN apt install -y curl
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Install nodejs
RUN apt install -y ca-certificates gnupg
RUN mkdir -p /etc/apt/keyrings
RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
ENV NODE_MAJOR 20
RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
RUN apt update
RUN apt install -y nodejs

# Install nginx
RUN apt install -y nginx
RUN echo "\
    server {\n\
        listen 80;\n\
        listen [::]:80;\n\
        root /var/www/html/public;\n\
        add_header X-Frame-Options \"SAMEORIGIN\";\n\
        add_header X-Content-Type-Options \"nosniff\";\n\
        index index.php;\n\
        charset utf-8;\n\
        location / {\n\
            try_files \$uri \$uri/ /index.php?\$query_string;\n\
        }\n\
        location = /favicon.ico { access_log off; log_not_found off; }\n\
        location = /robots.txt  { access_log off; log_not_found off; }\n\
        error_page 404 /index.php;\n\
        location ~ \.php$ {\n\
            fastcgi_pass unix:/run/php/php8.2-fpm.sock;\n\
            fastcgi_param SCRIPT_FILENAME \$realpath_root\$fastcgi_script_name;\n\
            include fastcgi_params;\n\
        }\n\
        location ~ /\.(?!well-known).* {\n\
            deny all;\n\
        }\n\
    }\n" > /etc/nginx/sites-available/default

RUN echo "\
    #!/bin/sh\n\
    echo \"Starting services...\"\n\
    service php8.2-fpm start\n\
    nginx -g \"daemon off;\" &\n\
    echo \"Ready.\"\n\
    tail -s 1 /var/log/nginx/*.log -f\n\
    " > /start.sh

COPY . /var/www/html
WORKDIR /var/www/html

RUN chown -R www-data:www-data /var/www/html

RUN composer install

EXPOSE 80

CMD ["sh", "/start.sh"]

Run the build command from terminal and then run the image:

docker build -t MY_IMAGE .
docker run -p "8000:80" MY_IMAGE

Then open your browser and navigate to "http://localhost:8000/"

Boom! Your Laravel is up!

Dive deeper

If you are in a hurry it is good to just copy/paste the codes above and get your job done. But if you want to know what is happening and how you can customize it based on your needs follow the article. You need a basic understanding of Docker though, so research about Docker for more detailed information.

Base image and stage

In the first line, you can see this line:

FROM ubuntu:latest AS base

This means that we are defining a stage of build called base from the latest Ubuntu image.

Follow the line mentioned above you see an environment variable being set:

ENV DEBIAN_FRONTEND noninteractive

This sets Ubuntu's interface as a non-interactive one. This is done because some commands might ask for user input and since that is not possible to do so and we need our image to build as quickly and as easily as possible, we need to disable input prompts so it does not stop the build process.

We need to update the packages of Ubuntu, hence the line:

RUN apt update

Laravel dependencies

Obviously, every program needs some stuff installed before running and Laravel is not an exception. If you follow the link to Laravel's official deployment documentation you can see the prerequisites to run Laravel.

As Laravel's documentation mentions it needs PHP version 8.1 or higher. We will use PHP 8.2 along with the FPM to run Laravel and NGINX as a reverse proxy.

To install PHP 8.2 on Ubuntu we need to add some repositories since it is not available as a default. A good way to add a repository is to use a tool called add-apt-repository, but again it is not available as a default. The add-apt-repository tool is available in a package called software-properties-common. To install this package we can tell Docker to tell Ubuntu to install it (that seems bizarre LOL):

RUN apt install -y software-properties-common

The flag -y is there to confirm all prompts by default since apt install asks for a confirmation midway through.

After the installation is done we can use add-apt-repository to add the required repository to install php8.2:

RUN add-apt-repository -y ppa:ondrej/php

Then update the list of packages again to ensure everything will be installed from the newly added repositories:

RUN apt update

Along with PHP itself, we will install Laravel's requirements too:

RUN apt install -y php8.2\
    php8.2-cli\
    php8.2-common\
    php8.2-fpm\
    php8.2-mysql\
    php8.2-zip\
    php8.2-gd\
    php8.2-mbstring\
    php8.2-curl\
    php8.2-xml\
    php8.2-bcmath\
    php8.2-pdo

If you wonder what are all those back-slashes (), they are there to tell docker that the new line character should be escaped.

PHP FPM & CLI

So far everything is fine for a Laravel application to run, but we want to give it some more speed and we are going to use PHP FPM. (More info about PHP FPM here)

Here we will install FPM:

RUN apt install -y php8.2-fpm php8.2-cli

PHP CLI also needs to be installed as it is essential to run many commands especially php artisan.

Composer

As you might know, Composer is a package manager for PHP projects and Laravel uses it too. To install Composer we need to download the installer file and run it with PHP. To download something we can use wget or curl. Here we will use curl to download and pipe the result to PHP for installation.

First, install curl:

RUN apt install -y curl

Then, download the file and pip it to PHP:

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

Node.js

If you are using Laravel as a full-stack framework (both front-end and back-end), you need Node.js too.

Node's official documentation suggests installing Node on Debian/Ubuntu-based distros (on which our image is based) through Node binary distributions. (Documentation for Debian/Ubuntu

I am not going to dive into full details of the commands since full description is available in the documentation provided above. So once again we will tell Docker to tell ubuntu to run the commands, thus the codes:

RUN apt install -y ca-certificates gnupg
RUN mkdir -p /etc/apt/keyrings
RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
ENV NODE_MAJOR 20
RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
RUN apt update
RUN apt install -y nodejs

NGINX

We will install and configure as a reverse proxy.

To install NGINX:

RUN apt install -y nginx

Once NGINX is installed, we need to add our website configuration. The default website's configuration is located at /etc/nginx/sites-available/default so we echo our configuration inside this file and overwrite it:

RUN echo "\
    server {\n\
        listen 80;\n\
        listen [::]:80;\n\
        root /var/www/html/public;\n\
        add_header X-Frame-Options \"SAMEORIGIN\";\n\
        add_header X-Content-Type-Options \"nosniff\";\n\
        index index.php;\n\
        charset utf-8;\n\
        location / {\n\
            try_files \$uri \$uri/ /index.php?\$query_string;\n\
        }\n\
        location = /favicon.ico { access_log off; log_not_found off; }\n\
        location = /robots.txt  { access_log off; log_not_found off; }\n\
        error_page 404 /index.php;\n\
        location ~ \.php$ {\n\
            fastcgi_pass unix:/run/php/php8.2-fpm.sock;\n\
            fastcgi_param SCRIPT_FILENAME \$realpath_root\$fastcgi_script_name;\n\
            include fastcgi_params;\n\
        }\n\
        location ~ /\.(?!well-known).* {\n\
            deny all;\n\
        }\n\
    }\n" > /etc/nginx/sites-available/default

This is the same configuration suggested by Laravel's official documentation with minor tweaks:

We don't need server_name since this container is used server only Laravel and should respond to everything.
Changed the root to /var/www/html/public as it is the root of where our application is going to be deployed.
fastcgi_pass's fpm socket is changed to unix:/run/php/php8.2-fpm.sock as php8.2-fpm's socket in our scenario is placed here.

Custom shell script to run our application

At this step, we will create a custom shell script to prepare the system and run the app each time the container is started.

Here is how our bash script looks:

#!/bin/sh
echo "Starting services..."
service php8.2-fpm start
nginx -g "daemon off;" &
echo "Ready."
tail -s 1 /var/log/nginx/*.log -f

This script starts the FPM service then runs the entry point of nginx and sends it to the background and finally starts printing nginx logs.

To create this file we can echo it inside a file like below:

RUN echo "\
    #!/bin/sh\n\
    echo \"Starting services...\"\n\
    service php8.2-fpm start\n\
    nginx -g \"daemon off;\" &\n\
    echo \"Ready.\"\n\
    tail -s 1 /var/log/nginx/*.log -f\n\
    " > /start.sh

I've named the file start.sh and placed it at the root of the container. You are free to name it anything and place it anywhere you want.

Deploying Laravel

Now that our environment is ready let's move to deploying Laravel.

First, copy the current files to /var/www/html:

COPY . /var/www/html

Then change the working directory of Docker to the same address:

WORKDIR /var/www/html

Since Laravel needs access to this folder as well we set the permission of the directory:

RUN chown -R www-data:www-data /var/www/html

And finally, ask Composer to install the ph packages required by Laravel:

RUN composer install

Note: don't run composer install before setting the permissions. Setting permission of every folder is done recursively and it's better run before all those packages installed since it will take way longer in that case.

Expose port 80

NGINX will try to listen to post 80 and needs to be exposed in order to be bound:

EXPOSE 80

Run the server

Remember the shell script we've created? It is time to run the script when the container is started:

CMD ["sh", "/start.sh"]

And over!

Build and run

To build and runt he image use the commands below where a docker instance is available:

docker build -t MY_IMAGE .
docker run -p "8000:80" MY_IMAGE

Replace MY_IMAGE with the desired name for your Docker image.

I hope this article was helpful. Please let me know of any mistakes or improvements.

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

Vue 3 Best Practices, Write a Better Code

Adnan Babakan (he/him) — Wed, 15 Nov 2023 18:05:45 +0000

Hey DEV.to community.

In this article, I will discuss how you should (or at least I believe so :)) organize your Vue 3 code. Although the main focus of this post is based on Vue 3, the principles mentioned here are applicable to Vue 2 and any other framework/library. Please correct me if I'm wrong or you know a better way.

Data initialization

You will get your hands dirty with states and data no matter the project. This topic gets harder to manage in certain cases especially when dealing with data being fetched from an external source such as a RESTFul API.

When initializing a ref you may pass its default value as you know. However, choosing the correct initial value might be difficult.

Imagine we want to store an array of products inside a ref. But the array will be fetched from the API and obviously, it needs some time or might fail.

What you might suggest is to set the default value of products as ref([]) which generates a ref with an empty array as its default value. The problem with this type of initialization is that you wouldn't know if the actual response of the API was an empty array (for instance no products found) or simply the request failed or something else happened. And for sure you need to have a loading ref to indicate the loading process and use it in your UI to show some loading animation or something.

So I suggest initializing the value of your products with ref(null). If you do so you may show if the request is loading or the request is finished and there are no results. This mode solves the collision of products being empty and requests failing while the initial value of an empty array is preserved.

<template>
    <div>
        <div v-if='!loading'>
            <div v-if='products'>
                <div v-if='products.length > 0'>
                    <!-- Products here -->
                </div>
                <div v-else>
                    <!-- No products found error here -->
                </div>
            </div>
            <div v-else>
                <!-- Something is actually wrong -->
            </div>
        </div>
        <div v-else>
            <!-- Loading animation here -->
        </div>
    </div>
</template>

<script setup>
const loading = ref(false)
const products = ref(null)

const init = async () => {
    loading.value = true
    try {
        products.value = await getProducts()
    } catch (e) {
    }
    loading.value = false
}

onMounted(() => {
    init()
})
</script>

Using lifecycle hooks

Lifecycle hooks are the basic fundamental of any Vue app and give you the power to control what happens in certain steps of the app. The thing most developers tend to do is to write their logic inside the hooks itself which can bring many problems and can toughen debugging or reduce the reusability of the logic.

Imagine that you want to fetch some data from an API, make some modifications to the result and assign the result to a ref of your choosing. Just like the example above in which we fetched the products and assigned them to the products ref when the component was mounted.

The first way you might think of doing so would highly likely look like this:

<script setup>
...
onMounted(async () => {
    loading.value = true
    try {
        products.value = await getProducts()
    } catch (e) {
    }
    loading.value = false
})
...
</script>

This code is absolutely correct and works perfectly. But given that you need to add a refresh button to your app and make your users able to refetch the data you will need to repeat the code inside the onMounted hook and your code would look like this:

<template>
    ....
    <button @click="refreshData">Refresh</button>
    ....
</template>

<script setup>
...
onMounted(async () => {
    loading.value = true
    try {
        products.value = await getProducts()
    } catch (e) {
    }
    loading.value = false
})

const refreshData = async () => {
    loading.value = true
    try {
        products.value = await getProducts()
    } catch (e) {
    }
    loading.value = false
} 
...
</script>

Such code is not easy to maintain since if you wanted to make a small change to the procedure of fetching and assigning the data you will need to do it more than once (twice in this case).

A better solution is to wrap your fetch/assign logic inside another function and call it wherever you need:

<template>
    ....
    <button @click="getProductsHandler">Refresh</button>
    ....
</template>

<script setup>
...
onMounted(async () => {
    getProductsHandler()
})

const getProductsHandler = async () => {
    loading.value = true
    try {
        products.value = await getProducts()
    } catch (e) {
    }
    loading.value = false
} 
...
</script>

Now you only have one base for your logic and it is way simpler, cleaner and easier to make changes to.

Computed values and side effects

Well, this one is super important and can save you a lot of time when you don't know what is happening inside your app and you are losing your mind over it.

Some JavaScript methods/functions have side effects, meaning that they mutate (a fancy word for changing :)) the original value as well. For instance, reverse() method of arrays in JS not only returns the reverse of an array, but it actually reverses the original array as well.

To test this scenario you can run the code below in any JS environment:

const arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr) // [5, 4, 3, 2, 1]

Now imagine you reach the same approach inside of a computed value in Vue:

<script setup>
const arr = ref([1, 2, 3, 4, 5])
const reverseOfArr = computed(() => arr.value.reverse())
</script>

This kind of method can ruin your app and result in unexpected behaviours.

As seen in the JS code, although this computed value returns the reverse of the array, it mutates the original value as well, so each time the value of arr is changed the computed value is going to be recalculated thus changing your original value as well.

Avoid using such methods inside computed values. Instead of the computed value above you better write it yourself in an imperative way to make sure the behaviour you get is the one you want:

<script setup>
const arr = ref([1, 2, 3, 4, 5])
const reverseOfArr = computed(() => {
    const t = []
    for(let i = arr.value.length - 1; i >= 0; i--) {
        t.push(arr.value[i])
    }
    return t
})
</script>

Mutating props

It is always suggested against mutating the props directly. Props are the values you receive from the parent component (the component where the current component is called from).

Imagine we want to have a simple number input component with two simple increase and decrease buttons. Here is how to implement it:

<template>
    <div>
     <button @click='decrease'>-</button>
     <div>{{ v }}</div>
     <button @click='increase'>+</button>
    </div>
</template>

<script setup>
const props = defineProps({
    modelValue: {
        type: Number,
        required: true
    }
})

const emits = defineEmits(['udpate:modelValue'])

const v = ref(props.modelValue)

const increase = () => {
    v.value++
}

const decrease = () => {
    v.value--
}

watch(v, () => {
    emits('udpate:modelValue', v.value)
})
</script>

As you can see, it is better to assign the value of modelValue (which is a special prop that is attached to v-model when the component is used) to a secondary ref and manipulate its data instead of props.modelValue. Then by watching the value of v we may use an emit called update:modelValue to inform the parent component about the recent changes to the value.

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

Feel free to contact me if you have any questions or suggestions.

Implement UUID primary key in Laravel, and its benefits

Adnan Babakan (he/him) — Thu, 13 Jul 2023 00:26:52 +0000

Hey, DEV.to community!

It's been a long time since I last wrote here.

During the time that I've been absent, I've been working on some large-scale projects in which I've seen how UUIDs can benefit your application in multiple ways.

I've been using UUIDs as my primary key structure for a fair amount of time now but the real advantages have shown themselves after finishing the projects and I am glad I've decided to do so.

I primarily use Laravel as my back-end and love using MySQL (I know there are lots of other RDBMS/DBMS out there but I love MySQL and feel comfortable with it XD). Although when using MySQL or many other databases your primary key is set as an AI (auto-incremental) and the data type is an integer, you may use UUID with a few tweaks and believe me it's worth the hassle.

Me when coding.

Benefits

Enumeration exploit fix

An enumeration exploit is when your data is predictable. Let's say for instance you upload a video on YouTube which is hidden from the public and can only be viewed by those whom you shared the link with. Well, Let's look at a YouTube link:

https://www.youtube.com/watch?v=3wVTmlD86a

My favorite song BTW

As you can see the address ends in v=3wVTmlD86a which indicates the (let's say) ID of the video. So imagine YouTube used a numerical index and incremented it one by one for each video uploaded. Then what you might ask. In that case, someone could start from number 1 and try every link using a custom-made program to extract all the available videos on YouTube and your link-only video would be exposed as well.

This is called enumeration exploiting which can cause serious data leaks depending on what your program is supposed to do.

The algorithm YouTube uses to make IDs for their videos is custom, but the purpose of my description is the same for UUIDs.

Given a UUID such as 700234f5-0e45-452e-ae3a-70b4b3d024e1, you wouldn't know what UUID is before or after this since there is no order. As you can see this can solve the enumeration exploit in your application.

Horizontally expandable databases

Let's imagine that you have two database instances of the same system that you want to expand or just make a new cluster for some reason and then merge both instances. Given that the database structure is the same and you have complex relations in your database, you might find it difficult to merge data without manually adjusting some values or using an automated task.

As you can see in the simple diagram above of an abstract database, you might have a table of orders, which is related to both a product and a user.

Now let's think about this: In each of your database instances, you only have 10 users and 10 products, and 10 orders which are numerically indexed from 1 to 10. Let's say in our first database instance, order 2 is related to user ,3 whose name is Adnan Babakan. In the other instance, order 2 is related to use 3 as well but their name is Arian Amini. Even if we import the orders properly and their IDs aren't referenced from other tables and their indexes are reassigned from 1 to 20, since the users are reindexed as well now our orders reference wrong users!

I suppose you see the problem and solution now. If we use UUIDs, since they are globally unique there will be no collision between our data and we can merge as many instances as we want with no problem.

Apart from merging two databases, UUIDs make it easier to manage a cluster-based database architecture as well with multiple database instances running at the same time.

Downsides

There are two main downsides to using UUIDs in databases. First is the size it takes in your database and second is the insert problem.

Since UUIDs aren't ordered performing an insert operation becomes costly because your record will be inserted somewhere random rather than at the end of your table when using a numerical index system.

Even though these disadvantages are present, it is forgivable as space isn't that expensive and the insert problem isn't such a big deal for most cases.

There is a way to avoid the insert problem which is using the same numerical index system as before but assigning a separate UUID for each record as well so you benefit from the points aforementioned.

Using UUIDs in Laravel

In this section of the article, I will discuss how you can implement UUIDs in your Laravel application and the problems I faced and how I solved them. Remember that UUIDs are NOT for Laravel/MySQL only and you may use them in any other programming language, framework and database you like.

Keep in mind this is my preferred way of implementing such an approach and you might find a more efficient way, and let me know in the comments if you did so.

Migrations

The first thing you need to do is know how to define your migrations so your tables use UUID.

Fortunately, Laravel comes packed with many good methods and stuff to help you with your goal.

First of all, let's change how we define our PK (primary key) in a migration. This is how you usually define your PK in a Laravel migration:

$table->id();

The code above is equivalent of:

$table->integer('id')->primary();

Unfortunately, there is no shorthand method for creating a UUID-based PK in migrations. But it isn't that much of a work either:

$table->uuid('id')->primary();

TADA! Now your table will have a column named id which holds UUIDs.

References and relations

Now let's talk about relations. A relation is when you want to reference a different record from another table or the same table. Referencing is done using the target record's id since it is the unique key that you are sure will never be duplicated.

Imagine you want to reference a user in your table, this is how you define a normal relation in your migrations:

$table->foreignId('user_id')->constrained();

Keep in mind the constrained() method is a shorthand for:

$table->foreignId('user_id')->references('id')->on('users');

Laravel gives you the power of the shorthand at the cost of following naming conventions. So when your foreign id column is named user_id and constrained() is called afterwards, Laravel knows you mean that this user_id will reference the id column on the users table. If it is not the case you must define it using the references() and the on() methods to specifically determine what you mean.

To reference a foreign id which is a UUID, you may use the foreignUuid() method instead of foreignId() method. The rest is the same and you can apply constrained() to a foreign UUID reference as well. This is how you reference a user record given that the users table utilizes UUID as its PK structure.

$table->foreignUuid('user_id')->constrained();

Or more elaborately:

$table->foreignUuid('user_id')->references('id')->on('users');

Models

Now that you've successfully defined your migrations, there is a small tweak you need to make on your models.

A model's defaults tell it to utilize integer-based ids and we should tell the model that it is not the case.

First, add a private property named $keyType to your model and set its value as 'string':

protected $keyType = 'string';

This tells the model that your key is a type of string and not an integer (UUIDs are strings).

The second thing to do is tell the model not to use the incrementing system for this type of key which is done by setting the $incrementing property as false:

public $incrementing = false;

After doing these your model know how your PK works perfectly.

But wait! Is there a problem you face when creating a new record telling you that id cannot be null and doesn't have a default value?

To solve this issue either you have to define a UUID each time you create a new record such as below:

$new_user = new User();
$new_user->id = Str::uuid();
$new_user->username = 'Adnan';
$new_user->password = Hash::make('helloWorld');
$new_user->save();

The Str class is imported from Illuminate\Support\Str. The Str::uuid() helper creates a new UUID for you.

Or you can use model events to tell Laravel how to create an ID for your model when creating the record on the database.

This can be done simply by using closure events in your booted method. Add a static method called booted to your model:

public static function booted() {

}

Then you can use an event called creating inside of it and tell it to make a UUID and assign it to your model's id:

public static function booted() {
    static::creating(function ($model) {
        $model->id = Str::uuid();
    });
}

You can read more about model events at https://laravel.com/docs/10.x/eloquent#events-using-closures

If you are using the old boot method, remember to call the parent's boot method so it is not overwritten:

public static function boot() {
    parent::boot();

    static::creating(function ($model) {
        $model->id = Str::uuid();
    });
}

If you've followed so far, your User model or any other model should look something like this:

class User extends Model {
    use HasFactory;

    ...

    protected $keyType = 'string';

    public $incrementing = false;

    ...

    public static function boot() {
        parent::boot();

        static::creating(function ($model) {
            $model->id = Str::uuid();
        });
    }
}

Solving the Sanctum problem

If you try to use Sanctum to issue your tokens you might realize that you face an error telling you that your constraints fail. This is because your personal_access_tokens table is designed to reference integer-based foreign ids (this table uses morphs as it should be able to reference multiple types of models).

In case you already have a project running you should change the tokenable_id column's type in your personal_access_tokens table using a new migration.

First, create a new migration:

php artisan make:migration change_tokenable_id_type_in_personal_access_tokens_table

Then in your migration use the change() method on the tokenable_id column:

$table->foreignUuid('tokentable_id')->change();

This changes the data type of tokenable_id to reference UUIDs instead of integers.

To make our database structure unified I'd like to make my token records use UUID as their ids as well so add the instruction below as well:

$table->uuid('id')->primary()->change();

If you receive an error running this migration install the doctrine/dbal package using composer.

composer require doctrine/dbal

Although the method described above is the proper way to change the data type of the tokenable_id column, there is a simpler way of doing so if you are just starting a new project or you don't care about your current data and are willing to refresh your migration (which will delete your data).

Just open the 2019_12_14_000001_create_personal_access_tokens_table.php file (the date at the beginning might differ) and change:

$table->morphs('tokenable');

to:

$table->uuidMorphs('tokenable');

and change:

$table->id();

to:

$table->uuid('id')->primary();

and then run:

php artisan migrate

or:

php artisan migrate:fresh

if you've already run your migrations before.

Now that our personal_access_tokens can reference UUIDs and its id is also a UUID we need to make Laravel know how to treat our tokens as Sanctum uses a default model to handle these records.

First, let's create a new model that will be the model Sanctum uses since we've changed the structure:

php artisan make:model PersonalAccessToken

Now open the created model's file and instead of extending the Model class, extend the class by Laravel\Sanctum\PersonalAccessToken:

use Laravel\Sanctum\PersonalAccessToken as SanctumPersonalAccessToken;

class PersonalAccessToken extends SanctumPersonalAccessToken
{

}

Since our class has the same name as the class used by Sanctum's default PersonalAccessToken class, you should either define an alias when importing it or use absolute naming after the extend keyword like: \Laravel\Sanctum\PersonalAccessToken

We have to make sure Laravel knows how this model works just as before. So we should set $keyType, $incrementing and define an event to create a UUID for the id of each record.

This is how your final PersonalAccessToken model should look like:

<?php

namespace App\Models;

...
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Support\Str;
use Laravel\Sanctum\PersonalAccessToken as SanctumPersonalAccessToken;
...

class PersonalAccessToken extends SanctumPersonalAccessToken
{
    use HasFactory;

    public $keyType = 'string';

    public $incrementing = false;

    ....

    public static function boot()
    {
        parent::boot();

        static::creating(function ($model) {
            $model->id = (string) Str::uuid();
        });
    }

    ...
}

The last step is to define this model as the model used by Sanctum. This step can be done by using the Sanctum::usePersonalAccessTokenModel() method. This method should be called in a provider file. I prefer AppServiceProvider which is located at app/Providers/AppServiceProvider.php.

Open the provider file and add the code below inside of the boot method:

Sanctum::usePersonalAccessTokenModel(PersonalAccessToken::class);

Remember to import Sanctum and your custom PersonalAccessToken classes properly. The Sanctum class is imported from Laravel\Sanctum\Sanctum and your custom PersonalAccessToken is imported from App\Models\PersonalAccessToken.

And now you are done implementing UUIDs in your Laravel application!

I hope you enjoyed this article and it helped you do what you wanted to do. Kindly let me know if there are any mistakes in this article or if you know a better way to do something.

BTW! Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books

DEV Community: Adnan Babakan (he/him)

Deploying Minio using Docker Compose

Defining network

Defining volume

Defining service

Final docker compose

NodeJS Essentials | Free E-Book

PHP Syntax Cheatsheet [Part 1]

Table of Content

Syntax

Comments

Variables

Variable variables

Constant

Run-time constant

Compile-time constant

Types

String

Integer

Float

Boolean

Array

Index-based array

Key-based array

Array language construct

Multi-dimensional arrays

Null

Echo and Print

Casting

Operators

Arithmetic operators

+ Summation

- Subtraction

* Multiplication

/ Division

** Exponentiation

% Modulo

Comparison operators

== equal and !=/<> not equal

=== identical and !== not identical

< less than and <= less than or equal

> greater than and >= greater than or equal

<=> Spaceship operator

Conditions

If

If-else and elseif

Switch case

Loops

For loop

While loop

Do while loop

Foreach loop

Functions

NodeJS Essentials | Free E-Book

How to Design a Multilingual Database Structure | A Practical Guide

What is the problem?

Relational or Non-relational

What is required

A background of what we want

The Languages Table

The language records table

Entities to be translated

Storing Language Records

NodeJS Essentials | Free E-Book

Doubly Linked List Implementation in Go

Doubly Node

List

Testing

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

Singly Linked List Implementation in Go

Node

List

Testing

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

More Secure JWT | A Better Experience

Why Do Many People Not Recommend Using JWT?

Safdar Ali ・ Oct 3 '24

JWT size is big

`+` Summation

`-` Subtraction

`*` Multiplication

`/` Division

`**` Exponentiation

`%` Modulo

`==` equal and `!=`/`<>` not equal

`===` identical and `!==` not identical

`<` less than and `<=` less than or equal

`>` greater than and `>=` greater than or equal

`<=>` Spaceship operator