Forem: EneasLari

🐳 The Complete Guide to Dockerizing a Node.js + Express App with Database & File Uploads

EneasLari — Wed, 13 Aug 2025 19:55:50 +0000

This guide explains how to build, run, and persist a Node.js + Express application inside Docker — with support for MongoDB, PostgreSQL, and file uploads — and also clarifies the relationship between images, containers, and volumes.

1. Big Picture: Images → Containers → Volumes

If Docker was a kitchen:

Docker Concept	Kitchen Analogy	Purpose
Image	Recipe	Instructions + ingredients for your app
Container	Prepared Meal	A running instance of the recipe
Volume	Fridge/Pantry	Where persistent ingredients are kept

Key rules:

Images are read-only.
Containers are ephemeral — delete them, data is gone unless stored in a volume.
Volumes survive container restarts and recreate.

Diagram: How They Work Together

   Image: my-node-app          Image: mongo:6            Image: postgres:16
+----------------------+  +---------------------+  +---------------------+
| code + deps          |  | mongo binary + init |  | postgres binary + init|
+----------------------+  +---------------------+  +---------------------+
         |                         |                         |
         v                         v                         v
Container: app            Container: mongo          Container: postgres
(ephemeral FS)            (/data/db)                (/var/lib/postgresql)
         |                         |                         |
         v                         v                         v
  Volume: uploads          Volume: mongo_data       Volume: pg_data
 (user files)              (MongoDB storage)        (Postgres storage)

2. Why Use Docker for Node.js Apps

Consistent environment for development, testing, and production.
No "works on my machine" headaches.
Easy to ship and run anywhere.
Built-in isolation between services (app, DB, admin tools).

3. Project Structure Example

myapp/
  src/
    index.js
    routes/
  package.json
  Dockerfile
  docker-compose.yml
  .env
  uploads/          # Will be mounted to a volume in production

4. Dockerfile for Node.js + Express

FROM node:20-alpine

# Create app directory
WORKDIR /app

# Install dependencies first (layer caching)
COPY package*.json ./
RUN npm ci --omit=dev

# Copy app code
COPY . .

# Environment variables
ENV NODE_ENV=production
ENV PORT=3000

# Create uploads folder and fix permissions
RUN mkdir -p /app/uploads && chown -R node:node /app
USER node

EXPOSE 3000
CMD ["node", "src/index.js"]

5. docker-compose.yml with MongoDB, PostgreSQL & File Uploads

services:
  app:
    build: .
    env_file: .env
    ports:
      - "3000:3000"
    volumes:
      - uploads:/app/uploads
    depends_on:
      - mongo
      - postgres
    restart: unless-stopped

  mongo:
    image: mongo:6
    volumes:
      - mongo_data:/data/db
    restart: unless-stopped

  mongo-express:
    image: mongo-express:1
    ports:
      - "8081:8081"
    environment:
      - ME_CONFIG_MONGODB_SERVER=mongo
      - ME_CONFIG_BASICAUTH=false
    depends_on:
      - mongo

  postgres:
    image: postgres:16
    environment:
      - POSTGRES_DB=mydb
      - POSTGRES_USER=app
      - POSTGRES_PASSWORD=app
    volumes:
      - pg_data:/var/lib/postgresql/data
    restart: unless-stopped

  pgadmin:
    image: dpage/pgadmin4:8
    ports:
      - "8082:80"
    environment:
      - PGADMIN_DEFAULT_EMAIL=admin@example.com
      - PGADMIN_DEFAULT_PASSWORD=secret
    depends_on:
      - postgres

volumes:
  uploads:
  mongo_data:
  pg_data:

6. Environment File Example (.env)

NODE_ENV=production
PORT=3000

DB_CLIENT=mongo
MONGO_URI=mongodb://mongo:27017/mydb

# PostgreSQL alternative
POSTGRES_URI=postgres://app:app@postgres:5432/mydb

7. How to Run

# Build and start all services
docker compose up -d --build

# Stop everything
docker compose down

# View logs
docker compose logs -f app

# Enter app container
docker compose exec app sh

8. Volumes in Practice

uploads → holds all user-uploaded files.
mongo_data → stores MongoDB’s database files.
pg_data → stores PostgreSQL’s database files.

Even if you run:

docker compose down
docker compose up -d

Your DB data and uploaded files remain intact because they’re in named volumes.

9. Security Tips

Never commit .env files with passwords to Git.
Do not expose DB ports to the internet in production.
Use specific image versions (mongo:6.0.13, not just mongo:latest).
Run app as a non-root user in Dockerfile.

10. Final Takeaways

Image = blueprint for your app.
Container = running copy of that blueprint.
Volume = persistent storage for data that must survive restarts.
Use docker-compose to orchestrate app + DB + admin tools.
Always separate dev and prod configs.

121 Docker Commands (with Explanations)

Build the image

docker build -t myapp .

-t myapp → tags the image name.

Run a container

docker run -d --name myapp-container -p 3000:3000 myapp

-d → detached mode.
-p 3000:3000 → map port 3000 host → container.

List containers

docker ps

Stop a container

docker stop myapp-container

Remove a container

docker rm myapp-container

List images

docker images

Remove an image

docker rmi myapp

List volumes

docker volume ls

Inspect a volume

docker volume inspect uploads

Remove a volume

docker volume rm uploads

12. Running with Docker Compose

Start all services

docker compose up -d --build

Stop all services

docker compose down

Stop and remove with volumes

docker compose down -v

Check logs

docker compose logs -f app

13. Migrating to Another Server

Backup volumes

docker run --rm -v uploads:/data -v $PWD:/backup alpine \
  tar -czf /backup/uploads.tar.gz -C /data .

docker run --rm -v mongo_data:/data -v $PWD:/backup alpine \
  tar -czf /backup/mongo_data.tar.gz -C /data .

Restore volumes

docker run --rm -v uploads:/data -v $PWD:/backup alpine \
  tar -xzf /backup/uploads.tar.gz -C /data

docker run --rm -v mongo_data:/data -v $PWD:/backup alpine \
  tar -xzf /backup/mongo_data.tar.gz -C /data

14. Summary of Best Practices

Use named volumes for persistence (DB, uploads).
Separate app, DB, and admin into their own containers.
Keep sensitive data in .env, not in code.
Use docker-compose.yml for multi-service orchestration.
Always .dockerignore node_modules if installing inside the container.
Avoid running containers as root in production.
Use lightweight base images (node:alpine).

From Burnout to Balance: Rediscovering Energy in Game Dev, Fitness, and Life

EneasLari — Fri, 07 Feb 2025 11:40:23 +0000

The start of 2025 didn’t go as I had hoped. On New Year’s Eve, I caught COVID, and I was down with a fever for a whole week. It completely drained my energy and threw me off track. I had big plans to kick off the year strong, but instead, I spent the first days of 2025 feeling exhausted and unmotivated. It’s been tough trying to get back into my routine after that.

Around this time last year, I was juggling everything—working full-time as a programmer, developing my game, taking saxophone lessons, hitting the gym twice a day, and even keeping up with my personal blog, posting every week. Somehow, I managed to do it all at once, and I felt unstoppable. It was like I had endless energy, constantly moving from one thing to the next without slowing down.

But looking back, I can see that I was burning out without even realizing it. I was caught up in the momentum, pushing forward because it felt good to be productive. I didn’t notice how much I was draining myself because I was too busy chasing progress. Now that I’ve hit a wall, I can finally see that I wasn’t invincible—I was just running on borrowed energy.

Being sick and losing some of my physical energy made me want to rest for a few days—which I thought was completely fine. But without realizing it, those few days of rest slowly turned into a lack of motivation. The more I stayed inactive, the harder it became to start again.

I’ve come to realize that even rest needs discipline. It’s like walking downhill—if you’re not careful, you can pick up too much speed and end up at the bottom before you even notice. Rest is necessary, but if you don’t set some limits, it can easily turn into stagnation. Finding the balance between recovery and getting stuck is still something I’m trying to figure out.

Pushing myself to the limit last year felt amazing. I was making progress in so many areas—getting stronger, improving my skills, and feeling productive every single day. It was rewarding to see how much I could handle and how far I could push myself. But as great as it felt, it wasn’t something I could keep up forever. I was running on pure momentum, not realizing that I was slowly wearing myself down. At the time, I didn’t see it, but now I understand that going all-in without proper balance eventually catches up with you.

Lately, as I’ve been refactoring my space match-three game, I’ve realized I need to do the same with my life. Just like cleaning up messy code makes a game run smoother, adjusting my habits and expectations can help me regain balance. In coding, you optimize performance by removing unnecessary processes—just like in life, where cutting out what drains you can help restore energy. That’s why, for now, I’ve stopped saxophone lessons, work out mostly once a day instead of twice, and allow myself some time to relax by watching series or reading—things I hadn’t done in years. But this isn’t permanent. Eventually, I want my busy schedule back, but I don’t want to rush into everything at once. Instead, I’m focusing on rebuilding my habits one by one, making sure they’re sustainable this time. Just like in game development, small, careful improvements lead to long-term success.

Burning myself out didn’t just drain my energy—it also made my thinking foggy and unorganized. When you’re constantly moving from one thing to the next without a break, your mind never gets the chance to slow down and process everything. I’ve realized that this lack of clarity is one of the biggest things I need to fix because it adds unnecessary stress and takes away the feeling of accomplishment. When your thoughts are scattered, you don’t have time to step back, recognize your progress, or even enjoy the things you’ve worked so hard for. Instead, it all blurs together into a cycle of doing more without feeling more. Getting back to a clear, focused mindset is just as important as rebuilding my habits—it’s what will help me move forward without feeling lost in the process.

So, after pushing myself to the limit, burning out, and then accidentally slipping into full-on rest mode, I’m now trying to find a balance. I know I can’t just snap my fingers and get all my energy and motivation back overnight, but I also don’t want to stay stuck in this sluggish state.

The plan? Take things one step at a time. Rebuild my habits slowly, give myself room to breathe, and actually enjoy the process instead of just rushing through it. I still want to be productive, but I also don’t want to end up back where I started—feeling exhausted and running on fumes.

And if I ever start slipping again? Well, I’ll just remind myself that even the best games need a reset once in a while.

How to Open Doors Like a Gentleman in Unity

EneasLari — Tue, 27 Aug 2024 17:24:39 +0000

Introduction:

Doors are essential elements in many games, allowing players to navigate between different areas. Today, I’ll show you how to create a simple, yet functional, door that opens and closes when the player approaches and interacts with it. This easy-to-follow tutorial is perfect for beginners looking to add more interactivity to their Unity projects.

Prerequisites

Unity 2020.3.0f1 or later.
Basic understanding of C# scripting.
A simple 3D model of a door (In this tutorial we will use ProBuilder).

Step 1: Crate a new Unity Project

Create a new Unity project.

Step 2: Download StarterAssets - First Person Pack

Visit StarterAssets - First Person .
Click Add to my Assets and then Open in Unity

Download and import to your project

Now open the playground scene from the Starter Pack ( Assets > StarterAssets > FirstPersonController > Scenes)
If you Press Play you can roam through scene in FPS

Step 3: Create a door with ProBuilder

Next we need ProBuilder to make a simple door. Or you can download a door model from Asset store.
In order to download Probuilder
Click on Window > Package Manager > In packages select Unity Registry then search for probuilder

Lets create a simple door with ProBuilder:

As you can see from the image above you need two different object to make a door , frame and the actual door

For the auto opening and close door you will need an trigger also

Make mesh collider IsTrigger = true

Step 4: Lets add some scripts

We will need three scripts
- Door.cs
- PlayerActions.cs
- DoorTrigger.cs

Lets Create them on by one:

Door.cs:

using System.Collections;
using UnityEngine;

public class Door : MonoBehaviour
{
    public bool IsOpen = false;
    [SerializeField]
    private bool IsRotatingDoor = true;
    [SerializeField]
    private float Speed = 1f;
    [Header("Rotation Configs")]
    [SerializeField]
    private float RotationAmount = 90f;
    [SerializeField]
    private float ForwardDirection = 0;
    [Header("Sliding Configs")]
    [SerializeField]
    private Vector3 SlideDirection = Vector3.back;
    [SerializeField]
    private float SlideAmount = 1.9f;

    private Vector3 StartRotation;
    private Vector3 StartPosition;
    private Vector3 Forward;

    private Coroutine AnimationCoroutine;

    private void Awake()
    {
        StartRotation = transform.rotation.eulerAngles;
        // Since "Forward" actually is pointing into the door frame, choose a direction to think about as "forward" 
        Forward = transform.right;
        StartPosition = transform.position;
    }

    public void Open(Vector3 UserPosition)
    {
        if (!IsOpen)
        {
            if (AnimationCoroutine != null)
            {
                StopCoroutine(AnimationCoroutine);
            }

            if (IsRotatingDoor)
            {
                float dot = Vector3.Dot(Forward, (UserPosition - transform.position).normalized);
                Debug.Log($"Dot: {dot.ToString("N3")}");
                AnimationCoroutine = StartCoroutine(DoRotationOpen(dot));
            }
            else
            {
                AnimationCoroutine = StartCoroutine(DoSlidingOpen());
            }
        }
    }

    private IEnumerator DoRotationOpen(float ForwardAmount)
    {
        Quaternion startRotation = transform.rotation;
        Quaternion endRotation;

        if (ForwardAmount >= ForwardDirection)
        {
            endRotation = Quaternion.Euler(new Vector3(0, StartRotation.y - RotationAmount, 0));
        }
        else
        {
            endRotation = Quaternion.Euler(new Vector3(0, StartRotation.y + RotationAmount, 0));
        }

        IsOpen = true;

        float time = 0;
        while (time < 1)
        {
            transform.rotation = Quaternion.Slerp(startRotation, endRotation, time);
            yield return null;
            time += Time.deltaTime * Speed;
        }
    }

    private IEnumerator DoSlidingOpen()
    {
        Vector3 endPosition = StartPosition + SlideAmount * SlideDirection;
        Vector3 startPosition = transform.position;

        float time = 0;
        IsOpen = true;
        while (time < 1)
        {
            transform.position = Vector3.Lerp(startPosition, endPosition, time);
            yield return null;
            time += Time.deltaTime * Speed;
        }
    }

    public void Close()
    {
        if (IsOpen)
        {
            if (AnimationCoroutine != null)
            {
                StopCoroutine(AnimationCoroutine);
            }

            if (IsRotatingDoor)
            {
                AnimationCoroutine = StartCoroutine(DoRotationClose());
            }
            else
            {
                AnimationCoroutine = StartCoroutine(DoSlidingClose());
            }
        }
    }

    private IEnumerator DoRotationClose()
    {
        Quaternion startRotation = transform.rotation;
        Quaternion endRotation = Quaternion.Euler(StartRotation);

        IsOpen = false;

        float time = 0;
        while (time < 1)
        {
            transform.rotation = Quaternion.Slerp(startRotation, endRotation, time);
            yield return null;
            time += Time.deltaTime * Speed;
        }
    }
}

This script handles the logic for a door that can either rotate or slide when opened or closed. The door's behavior is determined by the IsRotatingDoor flag, and the animation is controlled by coroutines to smoothly transition between states. The Open and Close methods can be triggered by other scripts or events in your game, such as player input or triggers.

PlayerActions.cs:

using UnityEngine;

public class PlayerActions : MonoBehaviour
{
    [SerializeField]
    private Transform Camera;
    [SerializeField]
    private float MaxUseDistance = 5f;
    [SerializeField]
    private LayerMask UseLayers;

    public void OnUse()
    {
        if (Physics.Raycast(Camera.position, Camera.forward, out RaycastHit hit, MaxUseDistance, UseLayers))
        {
            if (hit.collider.TryGetComponent<Door>(out Door door))
            {
                if (door.IsOpen)
                {
                    door.Close();
                }
                else
                {
                    door.Open(transform.position);
                }
            }
        }
    }
}

This script allows a player to interact with doors in the game by checking if a door is within a certain distance and then opening or closing it based on its current state.

using UnityEngine;

public class DoorTrigger : MonoBehaviour
{
    [SerializeField]
    private Door Door;

    private void OnTriggerEnter(Collider other)
    {
        if (other.TryGetComponent<CharacterController>(out CharacterController controller))
        {
            if (!Door.IsOpen)
            {
                Door.Open(other.transform.position);
            }
        }
    }

    private void OnTriggerExit(Collider other)
    {
        if (other.TryGetComponent<CharacterController>(out CharacterController controller))
        {
            if (Door.IsOpen)
            {
                Door.Close();
            }
        }
    }
}

This script uses a trigger collider to automatically open and close a door when a character enters or exits the trigger zone. The OnTriggerEnter method opens the door when the character enters the trigger, and the OnTriggerExit method closes the door when the character leaves the trigger.

Step 5: Attach the scripts

Lets Attach the scripts:

Attach the Door.cs script to the Door GameObject

As you can see from the inspector there is a flag IsRotatingDoor which if its true the door will open rotating if it's false it will slide.

After there are configuration variables for rotation and for sliding.

The RotationAmount variable sets the angle that the door will open
The ForwardDirection variable sets the direction that the door will open.
The SlideDirection variable sets the axis and the direction of the sliding. In the picture the door will open in the z axis and it will slide in the opposite direction.
The SlideAmount sets the amount of sliding. Here it will move in the z direction by 1.9
Attach the PlayerAction.cs script to the PlayerCapsule GameObject and set the Inspector as seen in the picture bellow.
Set camera to MainCamera
Create Layer Usable and set the new layer in the inspector of PlayerActions

In order to make the OnUse function you have to map the Action to the input system. Click on StarterAssets(Input Actions Asset) and open the asset

Add Use Action and set the property to "E" button (the key that will open the door)

Also add the Usable layer on the door object so the PlayerAction works

And Finaly Add DoorTrigger.cs at the DoorTrigger GameObject if you want the door to open automatically when you get close.

Assign the Door GameObject in the inspector

Now Make a Auto door and a sliding door changing the Variables in the inspector of the Door.cs or Attach the DoorTrigger.cs to the DoorTrigger GameObject

Conclusion:
You've now added a functional door to your Unity project, enhancing its interactivity. Experiment with different door designs and behaviors to create a unique experience in your game.

6. Call to Action

Encourage readers to comment, share, or try more tutorials. Example: "Have fun with your new door system! If you have any questions or want to see more tutorials like this, leave a comment below or share your thoughts on social media."

7. Additional Resources

Doors in Unity - Sliding and Rotating Doors LlamAcademy

Optimizing Unity Projects: Architectural Patterns and Best Practices for Scalable Game Development

EneasLari — Wed, 05 Jun 2024 20:11:21 +0000

Embarking on a Unity project is always an exciting journey filled with creativity and technical challenges. However, like many game developers, I've often found myself grappling with the complexities of organizing code and game objects. In my experience, without a solid architectural foundation, projects can quickly become tangled webs that are hard to manage and scale. This issue hit home for me during the development of my latest match-three game.

Initially, everything seemed manageable, but as the game grew, so did the complexity of its structure. New features, interactions, and game mechanics piled up, turning my well-intentioned code into a labyrinth of dependencies. It wasn't long before I found myself stuck, spending more time troubleshooting and untangling code than actually developing the game. The tipping point came when I realized that adding anything new or modifying existing features was becoming a Herculean task. It was clear that my initial approach wasn't sustainable, and I had no choice but to take a step back.

Reluctantly, I made the decision to rewrite our entire codebase—a daunting but necessary step to save the project. Throughout this challenging process, I learned just how critical it is to choose the right architecture early on. Eager to help fellow developers sidestep these issues, I began educating myself on various architectural patterns and principles. While I haven't personally tested all of these strategies, the ones I've implemented in my Unity projects have been transformative. They've not only kept my projects well-organized but have also enhanced their scalability and maintainability. Let's explore these architectural lifesavers.

1. MVC (Model-View-Controller)

Model: Represents the data and business logic.
View: Handles the presentation layer and user interface.
Controller: Manages input and updates the model and view accordingly.

2. MVVM (Model-View-ViewModel)

Model: Contains the application's data.
View: Displays data and sends user commands to the ViewModel.
ViewModel: Acts as a bridge between the Model and View, handling the presentation logic.

3. ECS (Entity-Component-System)

Entity: Represents objects in the game.
Component: Holds data related to entities.
System: Contains logic that processes entities with certain components.

4. Service Locator

Provides a centralized registry for services (like audio, input, etc.) and allows for decoupling between classes.

5. Singletons

Ensures a class has only one instance and provides a global point of access to it. Commonly used for game managers, input managers, etc.

6. Observer Pattern

Allows objects (observers) to be notified of changes in other objects (subjects). Useful for event systems and state changes.

7. Command Pattern

Encapsulates a request as an object, thereby allowing for parameterization and queuing of requests.

1. MVC Detailed Explanation

Model

The Model represents the data and the business logic of your application. In a Unity context, the Model would manage the game data, rules, and behaviors independently of the user interface. It's purely about the data and its related logic.

Example: In a role-playing game (RPG), the Model might manage character stats, inventory items, and game mechanics like health and damage calculations.

View

The View is responsible for presenting data to the player and handling user interactions. Views are typically linked to Unity scenes or UI elements, displaying information to the player and sending user inputs to the Controller.

Example: The View could be a UI canvas displaying the player's health, inventory, and stats.

Controller

The Controller serves as an intermediary that manages communication between the Model and the View. It responds to user input, updating the Model as necessary, and refreshes the View when the data changes.

Example: When a player moves an item in their inventory, the Controller would update the Model to reflect this change and then prompt the View to update the UI display.

2. MVVM (Model-View-View Model)

MVVM stands for Model-View-ViewModel. This pattern is particularly useful for projects where you want to separate the game logic and how it's displayed, which can make it easier to manage and update your game.

Model: This is where your game's data lives. Think of it as the heart of your game's rules and what happens in the game.
View: This is what the players see on their screens. It might include things like health bars, menus, or the game world itself.
ViewModel: This acts as a middleman between the Model and the View. It takes data from the Model and formats it so the View can display it in a user-friendly way.

Example: Let’s say you’re making a card game. The Model would handle the logic of the cards, such as their values and rules. The ViewModel would take this information and prepare a display like sorting the cards or highlighting playable ones. The View would then show these cards on the screen, laid out nicely for the player to interact with.

3. ECS (Entity-Component-System)

ECS stands for Entity-Component-System, and it’s a bit different from traditional object-oriented programming. It’s great for games because it helps manage lots of objects and interactions efficiently, making your game run smoother.

Entity: These are the individual things in your game, like players, enemies, or items. They are just identifiers with no actual data or behavior.
Component: Components are data containers attached to entities. For example, a health component might store the health value of an entity.
System: Systems are where the logic is processed. They operate on entities that have specific components. For example, a movement system might handle all entities that have position and velocity components.

Example: In a space shooter game, your spaceship entity might have components like position, health, and weapon. Systems would read these components to move the spaceship, track and display health, and manage shooting.

4. Service Locator

The Service Locator pattern is a way to organize different services (like sound effects, data loading, etc.) in your game. It provides a single point where you can access these services without needing to know exactly how they are implemented.

Example: Imagine your game needs to play sound effects. Instead of each part of your game handling sound playback itself, they just tell the Service Locator, "I need to play this sound." The Service Finder then deals with the details of playing that sound.

5. Singletons

A Singleton is a design pattern used to ensure a class has only one instance and provides a global point of access to it. This is useful for things that should only exist once in a game.

Example: Think of a GameManager in a game, which might handle scores, player data, and game states. By making it a Singleton, you ensure there's only one GameManager being accessed globally, preventing conflicts or duplicate data.

6. Observer Pattern

The Observer Pattern is used to allow objects to observe and react to events in other objects. It’s like a subscription model where observers get notified when something they care about happens.

Example: In a game, you might want the UI to update when a player’s health changes. The health system can notify (or "publish") this event, and any UI elements that are observing (or "subscribed to") the player's health will automatically update.

7. Command Pattern

The Command Pattern encapsulates actions or requests as objects, allowing you to parameterize and schedule operations.

Example: Imagine a strategy game where you can queue up actions for your units. Each action (like move, attack, defend) can be a command object. This allows you to easily implement undo actions, delay commands, or even network commands if you’re playing online.

Best Practices and Principles

SOLID Principles

Single Responsibility Principle: A class should have one, and only one, reason to change.
Open/Closed Principle: Classes should be open for extension but closed for modification.
Liskov Substitution Principle: Subtypes must be substitutable for their base types.
Interface Segregation Principle: No client should be forced to depend on methods it does not use.
Dependency Inversion Principle: Depend upon abstractions, not concretions.

Dependency Injection

Promotes loose coupling by injecting dependencies rather than creating them within the classes.

Combining Patterns

Often, the best architecture for a Unity project involves combining multiple patterns. For example, you might use MVC for UI, ECS for game object management, and singletons for core services.

Example Architecture Setup

Core: Singleton managers (e.g., GameManager, AudioManager)
Data: Scriptable objects for game data, JSON/XML for saving/loading
Presentation: MVC or MVVM for UI management
Gameplay: ECS for managing entities and their behaviors
Utilities: Service locator for accessing services

Implementation Tips

Use Unity's Scriptable Objects for data-driven design.
Organize your project structure: Separate folders for scripts, prefabs, scenes, assets, etc.
Use namespaces to avoid class name conflicts.
Automate tasks using Unity's built-in tools or custom editor scripts.
Testing: Implement unit tests for core logic and integration tests for larger systems.

Conclusion

Selecting the right architecture depends on the specific needs of your Unity project. A hybrid approach that combines the strengths of various patterns often works best. Regularly refactor and review your architecture to ensure it remains robust and scalable as your project grows.

Astro and Express: SSR in Astro

EneasLari — Wed, 22 May 2024 07:49:43 +0000

Implementing Server-Side Rendering (SSR) with Astro JS is a great way to improve performance and SEO for your web applications. Astro is designed to support SSR out of the box, making it relatively straightforward to set up. Here’s a basic guide on how to implement SSR with Astro:

Setup Your Astro Project: If you haven’t already created an Astro project, you can start by setting one up. Run the following commands in your terminal:

   npm create astro@latest

Follow the prompts to create your new project.

**Enable SSR with:

npx astro add node

Configure SSR in Astro: By default, Astro projects are configured to render statically. To enable SSR, you’ll need to modify the astro.config.mjs file:

   import { defineConfig } from 'astro/config';

   export default defineConfig({
     output: 'server',
     adapter: {
       name: name: '@astrojs/node',
       // options here
     },
   });

Now lets create an Express server that serves data from a JSON file containing a list of people with their names, last names, and addresses, you'll follow these steps:

Step 1:At the root of your astro project Install Express

Install Express using npm:

npm install express

Step 2: Set Up the Express Server

Create a file named server.mjs in your project directory and add the following code:

import express from 'express';
import { handler as astroHandler } from './dist/server/entry.mjs';

const app = express();
const PORT = 3000;

app.get('/api/people', (req, res) => {
    res.json([
        { name: "John", lastName: "Doe", address: "1234 Main St" },
        { name: "Jane", lastName: "Doe", address: "1235 Main St" },
        { name: "Jim", lastName: "Beam", address: "1236 Main St" }
    ]);
});
// Use Astro handler for all other routes
app.use(astroHandler);

app.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}`);
});

Step 3: Run Your Server

Add "startserver": "node server.mjs" script at package.json

To start the server, run the following command in your terminal:

npm run startserver

You should see the output indicating that the server is running on http://localhost:3000. You can now visit http://localhost:3000/people in your web browser or a tool like Postman to see the JSON data being served.

This configuration uses the astroHandler, which is exported by the built Astro app, to handle requests that aren’t caught by the earlier Express route (/api/people). This allows you to use Express for APIs or other server-specific tasks while Astro handles the SSR and other routes.

Edit index.astro to fetch our data from the server and render them at page

// Make the fetch request to the local API endpoint
const response = await fetch('http://localhost:3000/api/people')
const data = await response.json()

Add inside html the follwing code

    <ul>
      {
        data.map((person) => (
          <li id={person.name}>
            {person.name} {person.lastName} - {person.address}
          </li>
        ))
      }
    </ul>

You Havet to build again the astro project

npm run build
npm run serve

Run npm run startserver

And congratulation you just implemented ssr with astro

Exploring Astro: A Journey into Modern Web Development with Astro JS

EneasLari — Mon, 20 May 2024 09:51:40 +0000

I was today years old when I learned about Astro. I know maybe I live under a rock as I discovered that Astro has been a very famous front-end solution for quite some time.

What is Astro?

Astro JS is a modern web framework designed to help developers build faster websites. It allows you to write your website using multiple web technologies like React, Vue, or Svelte, but it sends the final page to the user's browser as mostly static HTML. This makes the page load faster because the browser doesn't have to do as much work to display the page. Astro also only loads the JavaScript needed for interactivity when it's needed, which keeps pages light and fast.

Astro JS is a versatile framework that can be used in various scenarios to enhance web development projects.

Static Websites: Astro is excellent for building static websites, such as blogs, portfolios, and informational sites. It compiles to static HTML by default, which can be hosted on any static site hosting service, resulting in fast loading times and reduced server costs.
Content-Heavy Sites: For websites that need to manage and display large amounts of content, like news sites or educational platforms, Astro can be very effective. It allows developers to fetch data at build time and render it into the HTML, ensuring quick load times and a smooth user experience.
E-commerce Platforms: Astro can be used to build e-commerce sites where performance and speed are critical for user retention and SEO. Astro's efficient handling of JavaScript ensures that the user interface remains responsive and engaging without sacrificing load times.
Multi-Page Applications (MPA): For projects where a single-page application (SPA) might be overkill, Astro provides an excellent foundation for building multi-page applications. It allows each page to be independently developed and optimized, using the best-suited frameworks and libraries as needed.
Personalization and Dynamic Elements: Even though Astro is optimized for static generation, it supports client-side JavaScript to add interactivity and dynamic content as needed. This makes it suitable for sites that require user interaction and personalization without loading unnecessary JavaScript upfront.
Documentation Sites: Astro's ability to integrate with various front-end frameworks seamlessly makes it ideal for documentation websites that may need interactive examples and demos embedded within the content. This is useful for tech companies and open-source projects.
Progressive Web Applications (PWA): Astro's lightweight output and efficient asset handling make it a good choice for developing progressive web applications. PWAs built with Astro can benefit from fast loading times and reliable performance even in poor network conditions.

Astro's flexibility in integrating multiple UI frameworks and its focus on performance optimization make it a compelling choice for a wide range of web development projects.

Let's get our hands dirty enough talking.

npm create astro@latest

Then, if you want to follow this tutorial, select the same choices as me in the subsequent questions.

Navigate to the newly created directory and run npm run dev.

If all goes well, Astro should now be serving your project on http://localhost:4321/

Astro will listen for live file changes in your src/ directory, so you will not need to restart the server as you make changes during development.

Next, let's install the Astro extension on VSCode.

Now, as you can see, the syntax is highlighted.

Next, we will add a new component. Create a file with the name Test.astro under the Components directory.

---
interface Props {
  name: string
}

const { name } = Astro.props
---

<p>This is a test component with a prop {name}</p>

Now, in order to use it in our index file, add the component at index.astro.

import Test from '../components/Test.astro'

Under the h1 element, add the component.

<Test name='My name' />

You will see:

Adding a New Page

Create a New File:
- Navigate to the src/pages directory in your Astro project. This directory is where Astro looks for files to turn into pages on your website.
- Create a new file with an .astro extension for an Astro component or a .html extension if you prefer plain HTML. The name you give this file will be used in the URL of your new page. For example, if you create about.astro, the URL for this page would be /about.
Add Content to the New Page:
- Open your new file in a text editor or IDE.
- You can write HTML directly in this file. If you're using an .astro file, you can also utilize components and other features specific to Astro. Here’s a simple example:

   ---
   // This is the front matter section where you can include JavaScript and import components
   ---

   <html>
     <head>
       <title>About Page</title>
     </head>
     <body>
       <h1>Welcome to the About Page</h1>
       <p>This is an example of an Astro page.</p>
     </body>
   </html>

Open your web browser and go to http://localhost:4321/about to see your new page in action.

Creating a page with dynamic routes in an Astro project allows you to handle multiple URLs with a single file, typically used for cases like blog posts, product pages, or user profiles where the content changes based on some variable (like an ID). Here’s how you can set up dynamic routing in Astro:

Step 1: Create a Dynamic Route File

Navigate to the src/pages Directory:
- This is where Astro looks for files to create pages from.
Create a New File with a Dynamic Segment:
- Name the file with brackets to indicate a dynamic segment. For example, if you want to create dynamic blog post pages where each post has a unique ID, you might name your file [id].astro. Here, id will be the variable holding the dynamic part of the URL.

Step 2: Access the Route Parameter in Your Page

Open the New Dynamic Route File:
- Edit the file to handle the dynamic content. You can access the dynamic parameter using the Astro.request object.
Example Code for a Dynamic Blog Post Page ([id].astro):

---
import Layout from '../layouts/Layout.astro'
const { id } = Astro.params

export async function getStaticPaths() {
  return [{ params: { id: 'test' } }, { params: { id: 'test2' } }, { params: { id: 'test3' } }]
}
---

<Layout title='Post'>
  <h1 style='color: white'>{id}</h1>
</Layout>

Now visit http://localhost:4321/test

And you will see the page.

That's all for now.
We will explore more about Astro as it seems very interesting.

Understanding Nginx: From Simple Concepts to Technical Details and Deploying securely with PM2 and Certbot

EneasLari — Thu, 02 May 2024 17:03:23 +0000

Imagine you have a little shop where you sell lemonade, and you have a big sign that says "Lemonade for Sale." When people see your sign, they come to your shop to buy your lemonade. Now, imagine you're so popular that lots of people come at the same time. You need to make sure everyone gets their lemonade quickly and smoothly, so no one is waiting too long.

Nginx is like the best helper you could ask for in your shop. It's like a smart organizer who helps you handle all the people coming to your shop. When someone comes up to buy lemonade, Nginx quickly figures out who should get lemonade first, and makes sure that even if lots of people come at once, everyone gets their drink fast and without any trouble. It helps you manage the crowd so you can keep everyone happy!

WHAT??

Certainly! Nginx (pronounced as "Engine-X") is a powerful web server software that is also used as a reverse proxy, load balancer, and HTTP cache. It was specifically designed to handle high concurrency, which means it can manage many connections at once, efficiently and without requiring a lot of resources.

Web Server: As a web server, Nginx serves static content, like HTML, CSS, and JavaScript files, directly to clients. It is very efficient at this because of its event-driven architecture, which allows it to handle thousands of simultaneous connections on a single thread without much memory overhead.

Reverse Proxy: As a reverse proxy, Nginx sits between the client (like a web browser) and other servers. It can forward client requests to other servers and deliver the responses back to the client. This setup is useful for hiding the characteristics and location of the origin servers or for load balancing.

Load Balancer: Nginx can distribute incoming network traffic across multiple backend servers (like a group of application servers). This distributes the load, making sure no single server gets overwhelmed, which improves the responsiveness and availability of applications.

HTTP Cache: Nginx can also cache the responses from a server and reuse them to answer identical requests. This reduces the load on the server and speeds up the response time for clients.

Nginx is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption. These qualities make it a popular choice for scaling web applications and improving their performance and reliability.

Lets Use NGINX to run the Sigle File NodeJS Server that we set up here

Nginx, pronounced like “engine-ex”, is an open-source web server that, since its initial success as a web server, is now also used as a reverse proxy, HTTP cache, and load balancer.

Installing Nginx

apt install nginx

UFW

Uncomplicated Firewall (UFW) is a program for managing a netfilter firewall designed to be easy to use. It uses a command-line interface consisting of a small number of simple commands, and uses iptables for configuration. UFW is available by default in all Ubuntu installations since 8.04 LTS.[1] UFW has been available by default in all Debian installations since 10.

Install ufw

apt install ufw
ufw enable

Give nginx full control of firewall

ufw allow "Nginx Full"

When you install Nginx, a default configuration file is created at /etc/nginx/sites-available/default. It's a good idea to keep this file for reference, but if you don't want to use it immediately, you should disable it. To disable it, delete the symbolic link in /etc/nginx/sites-enabled/ that points to this default file.

Now let's Create a new config file with name seinglefileserver.conf under /etc/nginx/sites-available/ directory

server {
  server_name test.eneaslari.com;
  location / {
    proxy_pass http://<Your servers Ip>:6001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    }
}

This Nginx configuration file defines a server block that listens for requests directed to the domain test.eneaslari.com. Let's break down each directive:

server: Begins a new server block.
server_name test.eneaslari.com: Specifies the domain name for which this server block will be used to handle requests. In this case, it's set to test.eneaslari.com.
location /: Defines a location block that matches requests with any URI path.
proxy_pass http://<Your servers Ip>:6001;: This directive instructs Nginx to forward incoming requests to another server. In this case, it forwards requests to the IP address specified (replace <Your servers Ip> with the actual IP address) on port 6001.
proxy_http_version 1.1;: Sets the HTTP version used in proxy communication to HTTP/1.1.
proxy_set_header Upgrade $http_upgrade;: This sets the Upgrade header to the value of the Upgrade header from the client's request. This is often used to enable WebSocket connections.
proxy_set_header Connection 'upgrade';: Sets the Connection header to upgrade. This is also commonly used for WebSocket connections.
proxy_set_header Host $host;: Sets the Host header to the value of the Host header from the client's request.
proxy_cache_bypass $http_upgrade;: Sets conditions under which the request will bypass the cache. In this case, requests with the Upgrade header will bypass the cache.

This configuration essentially sets up a reverse proxy that forwards incoming requests from test.eneaslari.com to another server listening on port 6001. It also includes settings commonly used for WebSocket connections.

Here's a clearer breakdown of how Nginx's configuration files are structured:

Configuration Storage:
- Available Configurations: All the server block files are stored in /etc/nginx/sites-available/.
- Enabled Configurations: Nginx will only use configurations that are linked in /etc/nginx/sites-enabled/. These are usually symbolic links to files in the sites-available directory.
Enabling a New Configuration:
- To activate a configuration file, create a symbolic link from the sites-available directory to the sites-enabled directory using the following command:
```
 ln -s /etc/nginx/sites-available/<filename> /etc/nginx/sites-enabled/<filename>
```

Replace <filename> with the name of the configuration file you wish to enable.

If you want to unlink the default Nginx configuration, you can use the following command:

sudo unlink /etc/nginx/sites-available/default

Check Nginx Configuration: Before restarting Nginx, it's a good practice to check if the configuration is valid.

    sudo nginx -t

If there are any syntax errors in your configuration file, this command will point them out. Fix any errors before proceeding.

Restart Nginx: Once the configuration is validated, you can restart Nginx to apply the changes.

    sudo systemctl restart nginx

This command will restart Nginx and load the new configuration file. From this point onwards, Nginx will handle requests for test.eneaslari.com according to the configuration you provided.

Test the Configuration: After restarting Nginx, you can test whether it's working correctly by accessing http://test.eneaslari.com in your web browser or by sending requests to this domain using tools like curl.

Be sure that you are running the nodeJS Server for example npm start

That's it! Your Nginx server should now be configured to handle requests for test.eneaslari.com and proxy them to the specified server.

Now Visit test.eneaslari.com/ (for you it will be something different depends on what you have defined your servers name. Also you have to be sure that you have connected the specified domain from your domain provider with the server)

Optional

Now let's take it to the next level and use PM2 to run server in the background

Create at the root of your project a file with name ecosystem.config.cjs

Past this code :

module. Exports = {
  apps: [{
    name: "test.eneaslari.com",
    script: "npm start",
    watch: ["./"],
    ignore_watch: ["node_modules"],
  }]
}
//run this file with pm2 with pm2 start ecosystem.config.cjs

module.exports: This syntax is used in Node.js to export modules, making them available to other files. In this case, it's exporting an object that contains PM2 configuration.
apps: This key holds an array of objects, where each object represents a configuration for a specific application or microservice that PM2 will manage. You can include multiple configurations in the apps array for different applications.
name: A string that specifies the name of the application as it will appear in PM2's process listing. In this case, the application is named "test.eneaslari.com".
script: Defines the entry point script for the application. Here, "npm start" is used, which means PM2 will execute the start script defined in your package.json file.
watch: If set to true, PM2 will automatically restart the application when file changes in the current directory are detected. Here, it's set to watch all changes in the directory where PM2 is started ("./"). This is useful during development for automatic restarts on file save.
ignore_watch: An array of patterns to ignore from watching. In this configuration, changes in the node_modules directory won't trigger a restart. This is important because node_modules can contain a large number of files and frequent changes, which aren't typically necessary to watch for development purposes.

Install PM2: If you haven't already installed PM2, you can do so globally using npm:
```
npm install -g pm2
```
Navigate to Your Project Directory: Open your terminal or command prompt and navigate to your project directory where the ecosystem.config.js file is located.
Start Your Application with PM2: Run the following command to start your application using PM2:
```
pm2 start ecosystem.config.cjs
```

This command will start your application as defined in the PM2 configuration file (ecosystem.config.js). PM2 will manage your application process and keep it running in the background.

Check Application Status: You can check the status of your application by running:
```
pm2 status
```

This command will show you a list of applications managed by PM2 along with their status.

Monitor Application Logs: To monitor application logs, you can use the following command:
```
pm2 logs
```

More pm2 commands here

Securing Your Node.js Application with SSL

Ensuring that your Node.js application is secure is crucial, especially when dealing with sensitive data. One effective way to secure your application is by implementing SSL/TLS, which encrypts the data transmitted between your server and clients. Below is a step-by-step guide on how to set up SSL for a Node.js application hosted with Nginx using Certbot and Let's Encrypt.

Step 1: Install Certbot and Its Nginx Plugin

First, you need to install Certbot and the Certbot Nginx plugin on your server. Certbot is a free, automated tool that simplifies the process of obtaining and renewing Let’s Encrypt SSL certificates. To install these packages, run:

sudo apt install certbot python3-certbot-nginx

This command installs Certbot along with the Nginx plugin, which allows Certbot to automatically configure SSL for Nginx.

Step 2: Obtain an SSL Certificate

Once the installation is complete, you can proceed to obtain an SSL certificate for your domain. Replace test.eneaslari.com with your actual domain name:

sudo certbot --nginx -d test.eneaslari.com

This command instructs Certbot to authenticate your domain, obtain an SSL certificate, and configure Nginx to use this certificate. Follow the interactive prompts to complete the process. Ensure that your domain is pointed to the server where you are running this command and that port 80 is open, as Certbot uses it to validate domain ownership.

Step 3: Verify Automatic Renewal Setup

Let’s Encrypt certificates are valid for ninety days. Fortunately, Certbot creates a scheduled task to automatically renew certificates before they expire. Check the status of the Certbot timer to confirm it's active:

sudo systemctl status certbot.timer

This command will show you whether the timer is active and when the next renewal attempt is scheduled. It's important that this service is running to avoid any interruptions due to an expired certificate.

Final Step: Confirmation

Congratulations! You have successfully secured your Node.js application with SSL/TLS using Certbot and Let's Encrypt. Your communications are now encrypted, significantly enhancing the security of your application.

Hosting a NodeJS Web App on Ubuntu Server 22.04

EneasLari — Mon, 29 Apr 2024 20:20:32 +0000

Let's dive into setting up and running a Node.js server on a Linux Ubuntu machine, and guess what? We're not starting from scratch! 🚀 We'll be using the super sleek one-file server I crafted in a previous article. If you missed it, don't worry—you can catch up right here. Get ready to turbocharge your server setup and have some fun along the way! 🎉👨‍💻

Ready to bring your Node.js project to life on your local server? 🌟 Let's roll up our sleeves and jump right in!

First up, let’s snatch the project from GitHub. Go ahead and clone the repository with this slick command:

git clone https://github.com/EneasLari/singlefilenodejs.git

Next step on our adventure: saddle up those dependencies! 🚀 Run this command in your project directory:

npm install

Don’t have MongoDB installed yet? No stress! Follow these easy-peasy instructions right here to get set up.

Now, let's fire up that server with:

npm run dev

And watch the magic happen! 🧙‍♂️

Want to show off your server to the world? 🌍 Let's open up port 5000! Here’s how to make it available using UFW, the Uncomplicated Firewall:

sudo ufw allow 5000/tcp

And voilà! Your local server is now ready to welcome visitors from anywhere, just like a party host opening the gates to an awesome backyard bash! 🎉

Now, pull up your browser and take your freshly served Node.js app for a spin! 🎢 Happy coding!

Here’s how to do it:

Step 1: Check UFW Status
First, check if UFW is enabled on your system:

sudo ufw status verbose

If UFW is not active, enable it with:

sudo ufw enable

This command will start the firewall and ensure it is set to start automatically when your system boots.

Step 2: Allow Port 5000
Specify if the rule applies to TCP or UDP traffic. If your application requires both protocols, you should enable both. Here's how to do it:

sudo ufw allow 5000/tcp
sudo ufw allow 5000/udp

If you only need it for one protocol, you can just run the respective command.

Step 3: Verify the Changes
After adding the rules, it's important to verify that they have been implemented correctly:

sudo ufw status

This command will list all active rules, including the newly added entries for port 5000, confirming that it has been opened successfully.

Additional Notes:

Purpose of Port 5000: Port 5000 is commonly used for web server development (e.g., Flask and other frameworks often use this port by default) as well as some media services. Ensure that opening this port is safe within your network environment and aligns with your security policies.
Logging and Monitoring: For security, consider enabling logging for UFW:

  sudo ufw logging on

This helps in keeping track of attempted connections, aiding in security audits and troubleshooting.

Alright! 🌟 Now you're all set up and ready to roll! Just point your browser to your server's IP and the magic port 5000. Here's an example, but remember, your server IP might be different:

🌐 Check out: http://192.168.72.128:5000/

And just like that, you've got your Node.js server humming along on your local setup! 🎉

Stay tuned! In our next article, we're going to level up and introduce PM2 to keep your server running smooth like butter, even when you close your terminal. Think of it as hiring a little digital assistant to keep the lights on 24/7! 🤖✨

So, pat yourself on the back, grab a cup of your favorite brew, and take a moment to revel in your success! 🔥

How to Set Up a Local Ubuntu Server(22.04) on VMware for Web App Testing

EneasLari — Tue, 23 Apr 2024 19:02:03 +0000

I usually code on my Windows machine because it's cozy and convenient 😊. But for launching my projects, I use a Linux server. I thought about getting a second server for testing new ideas. Then, a great idea struck! 🌟 Why not use a virtual machine on my current setup? It's like having a small test lab without needing extra hardware.

I prefer using VMWare 🖥️ to create virtual machines, and I install Ubuntu on them. You can find VMWare here. Also, make sure to grab an ISO of the latest Ubuntu server version, which is currently 22.04.4. You can download it here. This setup helps me ensure that my digital sandbox is always ready for action! 🚀

System Requirements: (As Official Ubuntu Page Suggests)

Now Lets Create the Virtual machine at VMware

🎉 Kick things off by creating a new Virtual Machine! 🎉

Click that big shiny “Create a New Virtual Machine” button and feel like a boss! 🚀

📀 Now, grab that ISO you snagged from Ubuntu! 📀

Time to pick the ISO file you downloaded earlier. It’s like choosing the perfect topping for your ice cream! 🍦

🖊️ Time to name your new digital baby and pick its home! 🖊️

What’s in a name? Everything! Name your VM and choose where it's going to live on your computer. Like setting up a room for a new pet! 🐾

💾 How much space will your VM need? Pack its digital suitcase! 💾

Slide that bar to give your VM room to stretch its legs. More GBs, more fun! 🎢

🎬 Hit 'Finish' and let the magic happen! 🎬

All set? Smash that Finish button like you’re launching a rocket to Mars! 🚀🌌

Now Lets Install Ubuntu 22.04 LTS Server Edition

🚀 Step 1 - Let's Get This Boot-y Party Started with Ubuntu ISO! 🚀

Plug in that shiny new Ubuntu 22.04 bootable USB drive you prepared. Time to wake up your system with a jolt of Ubuntu energy! ⚡️

When your system starts, you'll be greeted by the Grub menu, like a doorman at a fancy club. By default, it’s all set to take you straight to the "Try or Install Ubuntu Server" option—like the VIP entrance! 🌟

Just sit back and let it whisk you away into the live system, no clicks needed. It’s like your computer is on autopilot! 🛫

🌍 Step 2 - Pick Your Linguistic Adventure for the Ubuntu Installer! 🌍

After a short techno intermission (just a few seconds!), you'll dive into the language selection window. It's like choosing the language for your epic adventure in the Ubuntu world! 🗺️

I go with "English" because it's classic and straightforward, like ordering vanilla at an ice cream shop—but hey, vanilla goes with everything! 🍦

Press ENTER and stride confidently into the next phase. It’s like hitting the "Next" button on your journey to tech greatness! ⭐️

Step 3 - Keyboard Configuration
Choose your preferred keyboard layout. I go with English US.

🛠️ Step 4 - Select Your Ubuntu Installation Flavor! 🛠️

Time to lay the foundation! You’ll see two savory options pop up:

Ubuntu Server: The classic choice, packed with all the essentials for a robust server. It’s like the full meal deal!
Ubuntu Server (minimized): Stripped down for speed, perfect for systems where human logins are as rare as a unicorn sighting! 🦄

I stick with the hearty standard: Ubuntu Server. Just hit enter and keep cruising on your setup journey! 🚀

🌐 Step 5 - Hook Up Those Network Connections! 🌐

Now, let's get your server chatting! It’s time to configure at least one network interface to make sure your server can mingle with other systems. 🤝

Got a DHCP server on your network? Great! By default, your server is set to automatically snag an IP address from the DHCP server—like getting a free pass to the internet party! 🎫

Just leave it as is to continue seamlessly. Your server is about to get connected without lifting a finger! 🎉

🔗 Step 6 - Configure Proxy 🔗

Need a proxy to access the internet? Enter the details now. If not, just leave it blank and hit ENTER to continue. 🚀

📡 Step 7 - Choose Your Ubuntu Archive Mirror 📡

The installer automatically selects the nearest archive mirror for your server. If you prefer a different one, just enter your chosen mirror's details. Otherwise, you're all set to go with the default!

Step 8 - Update Installer (Optional)

You might get a prompt about a new Ubuntu installer update. Fancy the latest features? Choose "Update to the new installer" and hit ENTER. It’ll download and refresh your setup process.

Prefer to keep things classic? Select "Continue without updating".

I'm going for the update to check out the new installer TUI! 🔄

Step 9 - Disk Partitioning

Time to decide on disk space! Let the installer automatically partition your drive or customize it manually. Choose what suits your setup best!

If you want to automatically partition the disk, simply choose "Use an entire disk" option.(I will choose this because I have a virtual machine)

Step 10 - Set Hostname and User Details

Now, name your Ubuntu server (hostname) and set up your username and password. These details will be your keys to logging in later!

Step 11 - Enable Ubuntu Pro

If you have an Ubuntu Pro account, select "Enable Ubuntu Pro" to upgrade your server. This ensures security updates until 2032.

Step 12 - Configure SSH

In step, you can setup SSH. Check the "Install OpenSSH Server" check-box and choose "Done" and hit ENTER

Step 13 - Select Featured Server Snaps

Next up, choose from popular snap applications to install on your server. Use the SPACEBAR to select or deselect your preferred apps, then hit ENTER to continue.

Installation Begins

Your Ubuntu server installation is now underway! It's downloading and installing numerous packages, so grab a coffee and hang tight—it'll be worth the wait! ☕🕒

Step 14 - Reboot Ubuntu Server

After the installation wraps up, choose "Reboot Now" and press ENTER to restart your Ubuntu server and bring all the changes to life!

Congratulations! 🎉 Ubuntu 22.04 LTS server is successfully installed! You're all set to start using your new server. Great job!

Log in to Ubuntu Server

Time to dive in! Log in to your newly installed Ubuntu server using the username and password you set up during the installation. You’re ready to start exploring your new server environment! 🚀

Update Ubuntu

Right after installation, it's crucial to get the latest updates. For Ubuntu, fire up your terminal and run these commands to ensure everything is up-to-date:

To fetch the list of available updates:

   sudo apt update

To upgrade all your packages to the latest versions:

   sudo apt full-upgrade

This will keep your server secure and running smoothly.

During the installing updates task, you will be prompted to restart some services. Choose OK to do so.

Clean Up and Reboot

After updating, it's good practice to clean up any unnecessary files or packages. Here's how you can tidy up your Ubuntu server:

Remove packages that are no longer required:

   sudo apt autoremove

Clean up the local repository of retrieved package files:

   sudo apt autoclean

Once that's done, give your system a fresh start with a reboot:

sudo reboot

This ensures your server is lean, clean, and up to date!

To utilize the Linux server now ready on VMware, you can directly access it, but for those who prefer a visual directory structure for file editing, Visual Studio Code is a great option. You can connect to the server via SSH through Visual Studio Code. It's important to note that the virtual machine must remain running for the duration of your connection session with Visual Studio Code. Here's how to set this up for a more efficient workflow.

Let's connect to our VPS with visual studio Code

Step 1 — Install the Remote-SSH Plugin

Search Remote-SSH on extensions Marketplace and install it

Step 2 — Configuring the Remote-SSH Plugin and Connecting To Your Server

Now that you have the plugin installed you can configure it to connect to a server. To do so, you’ll need the following pieces of information:

The server’s IP or hostname.

The server’s IP or hostname.
The username you’ll connect with.
The private key you’ll use to authenticate your user.

You’ll use this information to create an SSH configuration file that Visual Studio Code can use to SSH to the server to sync files and execute code on your behalf. You will create this configuration using Visual Studio Code.

Now that you have the Remote-SSH plugin installed, you’ll see a small green box in the bottom left-hand corner of the Visual Studio Code interface.

Click the button, and a dialog box appears in the top center. Select Remote-SSH: Open Configuration File… from the list:

The next prompt will ask you which configuration file you want to open. If you’re on Windows, you’ll see two locations: one in your personal user directory, and one in the installation location for SSH. You should use the file in your user directory when configuring the server.

Select the file and your editor will open the config file. Add the following code to the file to define the connection to your server, replacing the highlighted sections with the information for your server:

Host my_remote_server
    HostName your_server_ip_or_hostname
    User sammy
    IdentityFile /location/of/your/private/key

Visual Studio Code is now configured and ready to connect to your server. Click on the green Open a remote window button in the bottom left-hand corner and select Remote-SSH: Connect to Host…

Once you’ve done this all the available and configured servers will appear in the dropdown menu. Select the server that you want to connect to from this list.

If this is the first time you have connected to this server from your machine, you’ll likely be prompted with the SSH Fingerprint verification dialog, like the one in the following image:

This is to ensure that you are really connecting to the server you think you are. You can verify this by logging in to your server manually and running ssh-keygen -l -f /etc/ssh/ssh_host_key.pub to view the fingerprint of the server. If this fingerprint is the same as the one being presented to you in Visual Studio Code, then you are indeed connecting to the server you think you are so you can click Continue.

Visual Studio Code defaults to opening a new window when a new connection is made. A new window will appear with the welcome screen. You’ll know that your connection was successful if you see SSH: your_ip_address_or_hostname in the green box in the bottom left-hand corner. This means that Visual Studio Code is connected and communicating with your remote server.

Next let's clean and update the server

Run the following commands

apt clean all && sudo apt update && sudo apt dist-upgrade

rm -rf /var/www/html

Nginx

Nginx, pronounced like “engine-ex”, is an open-source web server that, since its initial success as a web server, is now also used as a reverse proxy, HTTP cache, and load balancer.

Installing Nginx

apt install nginx

UFW

Install ufw

apt install ufw
ufw enable

Give nginx full control of firewall

ufw enable

Now you have a full configured ubuntu server. You can run Node.js, dotNet core, static websites , database servers and many other things into your machine

Tell me if you want to to make a new post on how to run some of them in your server.

Thanks for your time.
Leave a question or comment below.

Daily Habit Persistence for Programmers: Techniques for Consistent Coding Practice

EneasLari — Mon, 11 Dec 2023 12:52:41 +0000

A habit tracker is an efficient tool for monitoring consistency in habits, valuable for programmers looking to enhance their coding discipline. It involves marking a calendar each day a specific habit, like coding, is practiced, creating a visual streak of consistency. This method, used historically by figures like Benjamin Franklin for personal virtues and Jerry Seinfeld for writing jokes, can be adapted by programmers for daily coding tasks. Franklin's approach involved nightly reflections on progress, while Seinfeld focused on maintaining a continuous streak of joke-writing, valuing consistency over quality.

For programmers, applying this "don't break the chain" philosophy can mean setting daily coding goals, irrespective of the complexity or success of the task, to build a habit of regular coding. This could be as simple as writing a few lines of code, debugging, or learning a new programming concept each day. The habit tracker, by making the habit of coding visible and satisfying, can be a powerful tool for personal and professional growth, aiding in developing a robust portfolio and enhancing coding skills through consistent practice.

Research supports the effectiveness of habit tracking in various goals, such as weight loss and quitting smoking, where tracking progress leads to better outcomes. For instance, a study showed that people who maintained a daily food log lost twice as much weight compared to those who didn’t. Similarly, for programmers, tracking their daily coding activities, whether it's writing new code, fixing bugs, or learning new technologies, can spark a desire to maintain and improve their habits.

Additionally, habit tracking promotes honesty and self-awareness in evaluating one's work. Programmers often have a distorted view of their productivity or coding skills. By tracking their daily coding habits, they gain a clear and objective view of their actual performance. This visibility can be a powerful motivator to stay consistent and honest about one’s coding practices and progress, helping to overcome any self-deception about the amount of work done or skills mastered.

Let’s break down the benefits of habit tracking.

Obvious: Habit tracking offers significant benefits, especially for programmers looking to enhance their coding routines. The first key benefit is its visibility. When a programmer records their coding activities, it acts as a trigger for subsequent actions. This method creates a series of visual cues, like a streak of marked days on a calendar, indicating days spent coding or working on a project. Seeing this visual representation of their coding streak can motivate programmers to continue their practice.
Attractive: The progression visible through habit tracking is a strong motivator. For programmers, seeing a series of completed tasks, such as days spent coding or problems solved, signals forward movement and boosts motivation. This is especially helpful during challenging periods, providing a visual reminder of past successes and encouraging continuation. The sight of an unmarked day can serve as a prompt to engage in coding to maintain the streak, reinforcing the habit of daily programming.
Satisfying: The act of tracking itself becomes rewarding. For a programmer, marking off a day of coding, completing a project phase, or solving a challenging bug provides a sense of achievement. Watching the growth of accomplishments, like an expanding codebase or a series of successful deployments, is intrinsically gratifying. Habit tracking shifts focus from the end goal (like developing a complex software) to the process (consistent coding), fostering a mindset of regular improvement and persistence.

In summary, habit tracking for programmers is beneficial as it (1) provides a clear visual cue to continue coding practices, (2) motivates through visible progress and the desire not to break the streak, and (3) offers satisfaction in recording each coding session. This process helps in framing a programmer's identity around consistent practice and improvement.

To make tracking more manageable, automation is key. Tools like integrated development environments (IDEs) can automatically track coding progress, while manual tracking should focus on key programming habits. Prompt recording of activities post-completion can seamlessly integrate into a programmer's routine, making the habit of tracking as natural as coding itself.

How to Identify and Correct the Reasons Behind Your Bad Habits

EneasLari — Mon, 20 Nov 2023 07:40:13 +0000

Today, we're tackling a crucial topic: understanding and changing your bad habits. Our inspiration comes from "Atomic Habits" by James Clear, a book that greatly influenced my view on habit formation. We'll discuss practical methods to identify why we stick to negative habits and how to effectively replace them with better ones.

Understanding the Deep Motives Behind Our Habits and Cravings

Every action we take is driven by a basic desire and a deeper need. For example, we eat not only because food tastes good, but also because it's necessary for survival. Our cravings often reflect deeper needs like feeling safe, accepted, or important.

Our habits, like using social media or playing video games, fulfill these deeper needs. These habits are modern ways to satisfy age-old human needs, but they're not always the best methods. We stick to habits we've learned, even if better options exist.

Habits form through associations our brain makes with things around us. For instance, we learn not to touch a hot stove because we associate it with getting burned.

Our habits are based on our experiences and what we've learned over time. We use past experiences to predict how to react in situations. Our actions depend on these predictions, and different people may react differently to the same thing based on their past experiences.

Feelings, like being cold or hot, influence our actions. When we feel something is missing, we crave a change. For example, feeling cold makes us wear more clothes. Desire is the wish to feel differently from how we currently feel, driving actions like eating too much or using social media.

Our feelings help us decide what to do, as they tell us what to pursue or avoid. Emotions help us label things as good or bad.

In summary, our cravings and habits are ways to meet deep needs. When a habit satisfies a need, we repeat it. Understanding this can help us choose better habits that make us feel good.

How to Rewire Your Mind to Find Pleasure in Challenging Habits

To make challenging habits more appealing, try associating them with positive experiences and shift your mindset.

Change Your Language: Replace "have to" with "get to" in your daily tasks. This simple switch can transform tasks from burdens to opportunities.
Focus on Positive Aspects: Highlight the benefits of your habits instead of their drawbacks. This helps in reprogramming your mind to see the habit as more attractive.
Associate Habits with Enjoyable Activities: Link your habits with something you enjoy. This association can become a cue for motivation. For example, play a certain song to get into a specific mood.
Mindset Shifts for Different Situations:
- Exercise: See it as skill-building and strengthening rather than a chore.
- Finance: View saving money as increasing future freedom, not as sacrifice.
- Meditation: Treat distractions as opportunities for practice.
- Performance Anxiety: Reframe nervousness as excitement and readiness.
Create Motivation Rituals: Develop routines that prepare you mentally and emotionally for a habit. These can range from stretching before a sport to a simple breathing and smiling routine before doing something you love.
Use Cues for Emotional State Changes: Establish a routine that signifies a positive emotional state, like happiness. Use this routine whenever you need to shift your mood.
Reframe Your Perception of Habits: View each habit as an opportunity, not a chore. This reframing can make the habit more appealing.

By applying these strategies, you can transform difficult habits into attractive ones by reshaping how you view and interact with them.

Thank you for joining me on this journey to understand and amend our bad habits. Your willingness to explore and address these challenges is the first step towards lasting change. I'm eager to hear about your progress and insights, so please feel free to share your experiences in the comments or reach out directly. Until next time, embrace each day as a new opportunity for growth and self-improvement. Farewell for now, and good luck on your continuous journey towards a better and more fulfilling life!"

The Pomodoro Technique - How to use it effectively as a programmer

EneasLari — Tue, 14 Nov 2023 15:38:15 +0000

What is Pomodoro Technique?

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks. Each interval is known as a "pomodoro", from the Italian word for 'tomato', inspired by the tomato-shaped kitchen timer Cirillo used as a university student. This technique encourages individuals to work with the time they have—rather than against it. By integrating frequent short breaks, it aims to ensure consistent productivity and prevent mental fatigue.

Preparation:

Set up your programming environment before starting the timer. This includes opening necessary files, setting up your IDE, and having a clear task list or backlog of programming tasks ready.
Choose a task or a set of related tasks that you can work on during a single Pomodoro session.

Pomodoro Sessions (25 minutes):

Start a Pomodoro timer for 25 minutes.
Focus solely on programming tasks during this time. Avoid distractions like social media, emails, or casual browsing.
If a distraction or a new task comes up, jot it down on a piece of paper and continue with your current task.

Short Break (5 minutes):

After 25 minutes, take a 5-minute break. This is crucial for mental relaxation.
During the break, stand up, stretch, grab a drink, or do something non-work related to reset your mind.

Long Break (after 4 Pomodoros):

After completing four Pomodoro sessions, take a longer break, around 15 to 30 minutes.
Use this time to completely step away from your work. This could involve a short walk, a light snack, or a relaxing activity.

Reflection:

At the end of the day, spend a few minutes reflecting on what you've accomplished and what can be improved in your process.

Task Management:

Adjust tasks based on their complexity. Some tasks may require more than one Pomodoro. Break down larger tasks into smaller, manageable chunks.

Dealing with Complex Problems:

For complex programming problems, use one Pomodoro to plan your approach and subsequent sessions to execute it.

Consider adopting the Pomodoro Technique if you:

If minor distractions frequently disrupt your workday.
If you tend to work beyond the point of optimal productivity.
If you engage in open-ended tasks, like studying for exams or researching for blog posts, that can consume unlimited time.
If you're overly optimistic about your daily productivity capacity.
If you enjoy setting goals in a fun, game-like way.

The Effectiveness of the Pomodoro Technique

The Pomodoro Technique, often perceived as whimsical due to its use of a tomato (Pomodoro in Italian) as a symbol for time intervals, stands out for its remarkable efficacy in enhancing productivity. Here's an exploration of what makes this method uniquely adept at improving work efficiency:

Facilitating a Simple Start

Procrastination, contrary to popular belief, is less about laziness and more about avoiding negative emotions associated with daunting tasks. Facing a large, uncertain project can be overwhelming, leading many to seek temporary mood boosts through distractions like social media or streaming services.

However, research suggests that breaking down these overwhelming tasks into tiny, non-intimidating steps is an effective way to combat procrastination. For instance, rather than attempting to write a novel in one go, starting with just five minutes of writing, or even editing a single paragraph, can be less daunting. This approach of taking small steps for a short duration makes it easier to tackle a larger project.

This is where the Pomodoro Technique shines. It encourages breaking down large tasks or projects into 25-minute segments. This focus on short-term goals keeps you centered on the immediate task rather than being overwhelmed by the entire project. The key is not to worry about the final outcome but to progress one Pomodoro at a time.

Counteracting Distractions

In our information-saturated world, distractions are a constant challenge. Interruptions, especially during a state of flow, can significantly hinder the regaining of focus. Surprisingly, studies have shown that more than half of all workday distractions are self-imposed, often justified as necessary or minor.

Yet, these seemingly small interruptions accumulate, affecting not just the time lost to the distraction but also the time needed to refocus. For example, a quick glance at Facebook can lead to a 20-minute effort to refocus on the original task.

The Pomodoro Technique addresses this by helping you resist self-interruptions and retraining your brain to maintain focus. Each Pomodoro is dedicated to a single task, with breaks serving as opportunities to reset and refocus your attention on the task at hand. This structured approach significantly minimizes the impact of both external and internal distractions, leading to more productive work sessions.

The Pomodoro Technique helps combat the planning fallacy, where we underestimate the time needed for future tasks. By working in short, timed sessions, time transforms from an abstract concept to a tangible unit, called a "pomodoro." Each pomodoro is a focused effort on a task, changing how we perceive time. Instead of seeing time as something lost, it becomes a positive measure of accomplished tasks.

This method alters our perception of time, making it a precise productivity measure, leading to more realistic time estimates. Using the Pomodoro technique, you gain a clear understanding of your time and efforts, improving your ability to plan and assess tasks. Over time, this allows for more accurate task estimation and the development of consistent work habits.

Turning Productivity into a Game

The Pomodoro Technique offers a chance for continuous improvement with each session. As Cirillo suggests, gaining speed in your tasks comes from enhanced concentration and awareness, achieved one pomodoro at a time.

This method is effective because it emphasizes regularity over flawlessness. Every pomodoro is a new opportunity to assess your objectives, sharpen your focus, and minimize interruptions. It's a flexible system that you can tailor to your needs.

To keep yourself motivated, try gradually increasing your daily pomodoro count. Set challenges, like completing a major task within a specific number of pomodoros, or aim for a certain number of pomodoros each day to maintain a streak. Viewing time management through the lens of 'tomatoes' rather than hours adds an element of enjoyment to the process.

Alternatives to the Pomodoro Technique

The Pomodoro Technique, which involves focused work sessions interspersed with short breaks, is popular among programmers, but there are several alternative methods that can also be effective. Here are some alternatives to consider:

Flow Time Technique: Inspired by the concept of 'flow' in psychology, this method involves working in natural cycles of concentration and rest. Programmers work until they feel a decrease in focus, then take a short break. This technique is more flexible than the Pomodoro and aligns with the natural attention span.
Time Blocking: This involves allocating specific blocks of time to different tasks or types of work. For instance, a programmer might block out a morning for deep work (like coding) and afternoons for meetings and emails. This helps in managing the day more effectively.
The 52-17 Method: Similar to Pomodoro but with longer intervals. You work for 52 minutes and then take a 17-minute break. This longer period can be more suitable for tasks that require deep concentration, like programming.
Eisenhower Matrix: Not a time management technique per se, but a prioritization tool. Tasks are divided into four categories: urgent and important, important but not urgent, urgent but not important, and neither urgent nor important. This helps in focusing on what really matters.
GTD (Getting Things Done): A holistic approach to productivity that involves capturing all the tasks you need to accomplish in a trusted system, then organizing and prioritizing these tasks. This can help programmers manage complex projects and multitasking more efficiently.
The 90-Minute Focus Session: Based on the idea that the brain naturally goes through a rest-activity cycle every 90 minutes. Programmers work for 90 minutes followed by a significant break. This can be especially useful for long, uninterrupted coding sessions.
Ultradian Rhythms Management: Similar to the 90-minute focus session, this method is based on the body's natural rhythms. It suggests working in tandem with these rhythms (usually 90-120 minutes of work followed by a break) to maximize productivity and maintain energy levels.
The Two-Minute Rule: A part of the GTD methodology, where if a task can be done in two minutes or less, do it immediately. This is useful for small coding tweaks or quick email responses, preventing small tasks from piling up.
Must, Should, Want Method: A prioritization technique where tasks are categorized into what you must do, should do, and want to do. This helps in balancing urgent tasks with long-term projects and personal development.
Custom Hybrid Methods: Many programmers create their own hybrid productivity methods, combining elements from different techniques to best suit their workflow, project needs, and personal preferences.

Each of these techniques has its advantages and can be adapted to the unique workflow of individual programmers. Experimenting with different methods can help in finding the one that best enhances productivity and work satisfaction.