DEV Community: saber-mekki

Automated Deployment of a Next.js Application on Ubuntu server with Git Hooks

saber-mekki — Mon, 24 Jun 2024 13:51:58 +0000

Deploying a Next.js application can be streamlined by automating the process with Git hooks and managing the application lifecycle with PM2. In this article, I'll walk you through setting up your server, transferring your application.

Step 1: Set Up the Server

Install Node.js, npm, pm2, git:

ssh your-username@serverIp
sudo apt update
sudo apt install -y nodejs npm
sudo npm install -g pm2
sudo apt install -y git

Step 2: Transfer Your Next.js Application to the Server

On your local machine:

Add the Remote Repository

git remote add deploy ssh://your-username@serverIp/your-username/home/apps/my-nextjs-app.git

On the server:

Create the Bare Repository

mkdir -p /your-username/home/apps/my-nextjs-app.git
cd /your-username/home/apps/my-nextjs-app.git
git init --bare

Set Up the Post-Receive Hook

cd /your-username/home/apps/my-nextjs-app.git/hooks
nano post-receive

Add the following script to the post-receive hook:

#!/bin/bash
REPO_PATH=/your-username/home/my-nextjs-app.git
APP_PATH=/your-username/home/apps/my-nextjs-app
NODE_ENV=production

GIT_WORK_TREE=$APP_PATH git checkout -f main

cd $APP_PATH

npm install
npm run build

pm2 restart nextjs-app || pm2 start npm --name "nextjs-app" -- start

Make the hook executable:

chmod +x post-receive

Step 3: Deploy Your Application

On your local machine, push your code:

git push deploy main

Conclusion

In conclusion, deploying a Next.js application on Ubuntu can be efficiently managed through manual deployment, CI/CD pipelines, containerization, cloud services, PaaS solutions, static site export, or third-party hosting services, each offering unique benefits based on scalability, ease of use, cost, and complexity

Pure Functions in Next.js

saber-mekki — Fri, 21 Jun 2024 10:46:35 +0000

Introduction

While working with Next.js, a very famous React framework for building server-side rendered and static web applications, one of the very important concepts you are going to meet is a pure function. Pure functions are among those principal topics one has to grasp in functional programming and take a huge part in making your code reliable and serviceable. We shall look into what exactly a pure function is, why it is important, and how to use one effectively within a Next.js application.

What is a Pure Function?

A pure function could be defined as a function that meets the following two basic requirements:

Deterministic: It always returns the same output for a given input.
Side-effect Free: It has no side effects; that is, it does not
modify any state or have an effect on the world outside.

The next example will be a pure function. JavaScript provides a very good example of such a function:

function add(a, b) {
  return a + b;
}

No matter which a and b are passed to this function, it will always yield the same value and has no side effects, nor does it mutate any external state.

Why Use Pure Functions?

Pure functions have the following benefits:

Predictability: Since pure functions always return the same output for any given input, they become more predictable and easier to reason about during debugging. It means that pure functions can be tested in isolation without mocking external dependencies.
Immutability: There are no side effects inside pure functions, resulting in much safer, more reliable code.

Pure Functions in Next.js

Pure functions can be utilized in various areas of your Next.js app, from components and utility functions to data transformations.

Components

React components can also be pure functions. In fact, all functional components are pure functions where props are passed as an argument returning a React element as the result. The following is an example of a pure functional component in Next.js:

import React from 'react';

function SayHello(name) {
  return <h1>Hello, {name}!</h1>;
};

export default SayHello;

This component is pure because it always returns the same output for the same props and has no side effects.

Functions

All utility functions used in your Next.js application should be pure as well

A utility function that capitalizes the first letter of a string:

export function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

This function is pure because it consistently returns the same output for the same input without modifying any external state.

Fetching Data and Side Effects

While pure functions are a cornerstone, not all functions in a Next.js application can or should be pure. This is true, for example, of data fetching functions. By definition, they have side effects – they make requests to external APIs or databases.

In Next.js, data fetching generally occurs through functions like getStaticProps **or **getServerSideProps, which are explicitly designed to run side effects. Such functions are not pure, but they isolate side effects to parts of your application so that the rest is more tractable.

As for a concrete example of data fetching in Next.js, here it is:


export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

Combining Pure and Impure Functions

In practice, a Next.js application will contain pure and impure functions. However, what is important is that you isolate the impure ones and keep the maximum portion of your codebase pure. This will bring semantic epithets and ensure maintainability for your app.

As such, you can isolate concerns into pure functions to format data fetched from an API the following way:

// Impure function 
export async function fetchData() {
  // fetches data from an API
}

// Pure function
export function formatData(data) {
  //formats the fetched data
}

Conclusion

Writing pure functions is one of the cornerstones of functional programming, which can bring a huge potential improvement in the quality of your Next.js applications. With them, you guarantee that your code will become more predictable, hence more testable, and less vulnerable to bugs. Totally writing pure functions is not quite possible, but isolating side effects and keeping most of your codebase pure will make for a more maintainable and robust application.

Git for Beginners

saber-mekki — Sat, 13 Aug 2022 12:39:00 +0000

Birth of Git

Until April 2005 Linus Torvalds was using BitKeeper for version control of the Linux Kernel development. He had a large number of volunteer developers working on the Linux Kernel and their contributions had to be managed. BitKeeper was a nice tool for managing the enormous contribution by the developers. The Linux developers used the tool for free after an agreement between the two parties as BitKeeper was a proprietary source control management system which means you had to pay for the use of the tool. There came a conflict of interest after Andrew Tridgell created an open-source client for accessing the Bitkeeper version control system by reverse-engineering the BitKeeper protocols. This caused the copyright holder to withdrawal the free-to-use policy that they had earlier agreed upon. Many developers of the Linux kernel gave up access to the BitKeeper.

Linux knew he had to act fast to replace the version control system that he knew and loved so he took a working vacation to decide on what to do as the current free-to-use version control systems could not solve his problems at the time. The result of his vacation was the birth of a new version control system named Git.

Strengths of git

Works in multi-platform.
Small and quick.
Distributed development.
Strong support for non-linear development.
Automatic Garbage Collection.

Why Use It?

Git is useful to anyone who writes code or track changes to files, it is the most commonly used version control system.
Git lets multiple developers easily work together on the same project with speed and efficiency.Tracking and history are available, even when off-line.
Git is used for tracking and managing changes in files (In reality, git doesn't save the file but save the history of changes in a file).

Installation

On Linux

Using apt:

sudo apt-get update sudo apt-get install git-all

Using dnf:

sudo dnf install git-all

How use it

After creating the project we will start by :

git init

Create an empty Git repository or reinitialize an existing one, in this stage you will be in "default" branch called "master",it is a naming convention for a branch.

git status

Used to display the state of the repository and staging area(display the change in your project)

Tow floors appear to us after use this command:

Untracked: This file exists locally, but isn’t a part of the Git repository. The file’s change history will not be recorded and it will not be pushed to remote.

Tracked: Git tracks the file’s change history and it will be pushed to remote copies when running git push. At this point, the are two situations:

"Unstaged changes":
Exist in your working directory, but Git hasn’t recorded them into its version history yet.

"Staged changes":
Are a lot like unstaged changes, except that they’ve been marked to be committed the next time you run git commit.

git add

Add file contents to the index. The status of your changes goes from "Untracked and Unstaged" to "Staged".

git commit

Record changes to the repository. before committing you must know the "Conventional Commits", it mean you will try to add a human and machine readable meaning to commit messages see:Conventional Commits

git push

To integrate the branch to the remote repository.

git log --oneline --decorate --all --graph

Show commit logs.

Git Extensions must have in VS Code

GitLens
Git Graph
Git History

Hope you were able to gain something from this article.
If you have any questions do not hesitate to contact me saber mekki