DEV Community: Baha chammakhi

Getting Started with NodeJS and express

Baha chammakhi — Mon, 15 Feb 2021 19:18:04 +0000

Welcome

As we know in nodejs we can build everything in only one file which is index.js but that's not great for future development so here I am gonna represent an easy structure and explain everything for you to start organizing your project architecture.

If its the first time using nodejs, please install nodejs before following me

First, we will start by creating a new folder, Init nodejs, and opening our node project with vscode like the screenshot below.

when you open vscode you will find only one file which is package.json
First, we need to install express which is a nodejs framework that makes a lot of things easier for us
so let us open vscode terminal or any other one and install the dependencies we need now!

npm install express

let's create our first file which is app.js

touch app.js

add this code

const express = require("express");

const app = express();

app.use(express.json());
app.use("/", (req, res) => res.send("Hello world!"));

module.exports = app;

Here we are creating our express app, first, we imported express initialized express in a const named app and used express.json to handle JSON parsing, sent a Hello world text when requesting the "/" route and finally we exported it!

Now create our server.js

touch server.js

add this code

const app = require("./app");
const port = 8000;

app.listen(port, () => {

console.log(`App running on ${port}...`);

});

So as you can see we imported our app module and created our port which the application will work on and we started our app.
let's start our server.js file!

node server.js

and that's the result our app is running on port 8000

Now let's visit http://localhost:8000/ you will see Hello world !

We just build our Hello world with nodeJS! Now let's make something more interesting by building a simple crud application to create, read, update, and delete Products. So in this case we need a place to store data! we gonna use a simple variable to do that but in the next chapter we will use a database

Let's add the following code in app.js file to create , and retrieve products data.

app.get("/products", (req, res) => {
  res.json(products);
});

app.post("/products", (req, res) => {
  const body = req.body;
  products.push(body);
  res.json(body);
});

As you can see we just returned the products array in JSON format when we make a get request to /products endpoint the second function let us push a new product to the product array and return the data we added Now let's do the update and delete part :

app.delete("/products/:id", (req, res) => {
  const id = req.params.id;
  const filtredProducts = products.filter((value, index) => index != id);
  products = filtredProducts;
  res.json(filtredProducts);
});
app.patch("/products/:id", (req, res) => {
  const id = req.params.id;
  const body = req.body;
  products[id] = body;
  res.json(products);
});

In these lines of code, we just made two routes the first to delete a product and the second to update one.
firstly we took the id and we filtered the array to take the products that don't match our id and updated them with the filtered ones.
Secondly, we updated the product that got the same index as our id and updated the data with the one in the body.

Our final App.js code :

const express = require("express");

let products = [];
const app = express();

app.use(express.json());
app.get("/products", (req, res) => {
  res.json(products);
});

app.post("/products", (req, res) => {
  const body = req.body;
  products.push(body);
  res.json(body);
});
app.delete("/products/:id", (req, res) => {
  const id = req.params.id;
  const filtredProducts = products.filter((value, index) => index != id);
  products = filtredProducts;
  res.json(filtredProducts);
});
app.patch("/products/:id", (req, res) => {
  const id = req.params.id;
  const body = req.body;
  products[id] = body;
  res.json(products);
});
app.use("/", (req, res) => res.send("Hello world!"));

module.exports = app;

To test our api we gonna use a tool named Postman

Sending post request to add product**

Sending get a request to retrieve products

Sending delete request to delete a product

Sending patch request to update a product

This was a brief introduction to Express and nodejs in the next chapters we will do more interesting things like Using MongoDB, creating our structure, and splitting our code.

-Github code : https://github.com/bahachammakhi/Getting-started-with-nodejs

Dockerizing a React App with Nginx, using multi-stage builds

Baha chammakhi — Wed, 28 Oct 2020 19:14:25 +0000

Docker is a containerization tool used to speed up the development and deployment processes, It's the most popular solution for containerization.
Containers allow us to run and develop an application in the same environment, regardless of what machine you're on.
- -
Docker-compose is a tool for defining and running multi-container Docker applications.
- -
Nginx is a web server we gonna use it to serve static content, it can be used as a reverse proxy, load balancer.
- -
React is an open-source, front end, JavaScript library for building user interfaces or user interface components.
- -
This tutorial demonstrates how to Dockerize a React app with Nginx using multi-stage builds. We'll specifically focus on configuring a production-ready image using multistage builds.

For those who only want to read code you can find the GitHub link below:

bahachammakhi/docker-react-nginx-blog

Creating A React Project:

We will use Create react app to generate our react project.

Open your terminal in a specific location and run this command.

npx create-react-app react-docker

Enter into your project directory:

cd react-docker

- -

Docker files:

Create Dockerfile and docker-compose.yml

mkdir nginx
touch Dockerfile docker-compose.yml nginx/nginx.conf

Open Dockerfile

# build environment
FROM node:13.12.0-alpine as build
WORKDIR /app
COPY . .
RUN yarn
RUN yarn build
# production environment
FROM nginx:stable-alpine
COPY - from=build /app/build /usr/share/nginx/html
COPY - from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

What's happening here?

We're telling Docker to grab a copy of Node, specify its Linux distribution as Alpine and name it to build. Why Alpine? Alpine Linux is much smaller than most distribution base images (~5MB), and thus leads to much slimmer images in general.
Setting our working directory to app
Copying project to our directory
Running yarn to install packages
Running build script to generate build files
Telling docker to grap nginx-alpine image
Copying build files
Copying nginx configuration files to replace the default configuration
This line is just for documentation that our application will work on port 80
Running nginx

- -

Open nginx.conf

server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}

We are just mentioning the position of our application static files to let Nginx consume them whenever someone sends a request to port 80.

Open docker-compose.yml

version: "2"
services:
nginx-react:
container_name: ngixreactapp
build:
context: .
dockerfile: Dockerfile
ports:
- 80:80
environment:
NODE_ENV: production

We are giving our app a name, mentioning the dockerfile to use, mapping port 80 to the application port 80, adding some environment variables.

Run our container

docker-compose up

Run container in detached mode

docker-compose -d up

If you are using linux you need to use sudo on every docker command you use!
now open http://localhost/ and you will see this:

- -

Wanna use S3 but no AWS account provided for now?

Baha chammakhi — Sat, 27 Jun 2020 19:03:13 +0000

Introduction:

Started building a backend, of course, you will need somewhere to store those files (images/videos…).

In this case, you have two options :

use Linux filesystem
Use third party object storage server

We gonna talk about the second option here :

Let us consider the service you gonna use is the most popular one AWS S3, in this case, you need an AWS account to test the features you gonna build! , but your client still didn't make one!
in this case, luckily we got something named minio.

What is minio :

Minio is a popular open-source object storage server compatible with the Amazon S3 cloud storage service.
Compatible means we can use AWS S3 client to talk to minio means we can test our application and continue to work, perfect!

In this tutorial, you will:

Install the Minio server on your Ubuntu 18.04 server and configure it as a systemd service.

#Step1: Installing Minio

Log to your server

ssh baha@server_ip

Update package database

sudo apt update

Download minio binary file

wget https://dl.min.io/server/minio/release/linux-amd64/minio

The download is finished you will find a file named minio on your working directory, let's give it execute permission

sudo chmod +x minio

Move it to /usr/local/bin

sudo mv minio /usr/local/bin

Create a directory where minio will store files

sudo mkdir /usr/local/share/minio

Create Minio configuration file in /etc

mkdir /etc/minio

Let's modify the default configuration

sudo nano /etc/default/minio

Add these environment variables

                          /etc/default/minio
MINIO_ACCESS_KEY="minio"
MINIO_VOLUMES="/usr/local/share/minio/"
MINIO_OPTS="-C /etc/minio --address your_server_ip:9000"
MINIO_SECRET_KEY="miniostorage"

MINIO_ACCESS_KEY: This sets the access key you will use to access the Minio browser user interface.
MINIO_SECRET_KEY: This sets the private key you will use to complete your login credentials into the Minio interface. This tutorial has set the value to miniostorage, but we advise choosing a different, more complicated password to secure your server.
MINIO_VOLUMES: This identifies the storage directory that you created for your buckets.
MINIO_OPTS: This changes where and how the server serves data. The -C flag points Minio to the configuration directory it should use, while the --address flag tells Minio the IP address and port to bind to. If the IP address is not specified, Minio will bind to every address configured on the server, including localhost and any Docker-related IP addresses, so directly specifying the IP address here is recommended. The default port 9000 can be changed if you would like.
Let's save and close the file, we just installed and configured minio
Step2: Installing the Minio Systemd Startup Script
Download the official Minio service descriptor file

curl -O https://raw.githubusercontent.com/minio/minio-service/master/linux-systemd/minio.service

After download, you will find a file named minio.service in your working directory, now lets move it to etc/systemd/system.

sudo mv minio.service /etc/systemd/system

Restart all systemd units

sudo systemctl daemon-reload

Enable minio to start on boot

sudo systemctl enable minion

Step3-Start minio server:

Start minio server

sudo systemctl start minio

Verify if it's working!

sudo systemctl status minio

Now minio is working on your server on the port:9000 you can use the web interface to create buckets and use them!
I hope I helped in solving a problem.

How to build a simple CD pipeline for your nodejs project

Baha chammakhi — Thu, 25 Jun 2020 18:13:44 +0000

What we need?

Whats is CD?

Continuous deployment is the process of automatically deploying an application, the goal of this practice is to minimize the time pushing a new line of code and using it live on production.

Setting up Pipeline

Gitlab runner:

As we gonna use Gitlab to setup our pipeline we need a runner.

Runner is an environment to run your jobs and run tests, deploy your code.

In this case, either you use a shared Runner or you step up one yourself we gonna use a shared one but if you wanna set up it check the documentation here : Gitlab Runner.

Gitlab-CI File :

Create .gitlab-ci.yml file on the root of your project.
So what we gonna write there we gonna follow these steps :

Updating Linux package manager
Installing Git
Setting up SSH key
Connect to our server using ssh
Pull our project from git
Install dependencies
Build it
Restart server using pm2

  before_script:
 - apt-get update -qq
 - apt-get install -qq git
 # Setup SSH deploy keys
 - 'which  ssh-agent  ||  (  apt-get  install  -qq  openssh-client  )'
 - eval $(ssh-agent -s)
 - ssh-add <(echo "$SSH_PRIVATE_KEY")
 - mkdir -p ~/.ssh
 - '[[  -f  /.dockerenv  ]]  &&  echo  -e  "Host  *\n\tStrictHostKeyChecking  no\n\n"  >  ~/.ssh/config'

deploy_staging:
 tags:
 - docker
 type: deploy
 environment:
 name: testing
 url: "$VPS_IP"
 script:
 - ssh root@"$VPS_IP" "cd /root/app/allomakkah && git fetch origin master && git reset --hard FETCH_HEAD && git clean -df && npm i && npm run prod-build"
 - ssh root@"$VPS_IP" "pm2 restart hiddy"
 only:
 - master

Now let's deploy our application it will automatically run this pipeline whenever we push to the master branch because of that ligne :

only:
- master

Before you start coding !

Baha chammakhi — Tue, 23 Jun 2020 20:16:36 +0000

I’ve been lately working on a mobile application backend I am gonna talk on the next posts the problems I faced, things I learned.
👇👇👇👇
In this post, I'm gonna talk about one of the problems I faced is mainly using Redis as a database for those who don't know Redis.👨🏻‍💻
Its a memory database used mainly on caching.👨🏻‍💻
As we said its a caching database so we cant use it as the main database for our social or chat app.👨🏻‍💻
So I was obliged to redesign the database again using MongoDB creating models.
Making choices was the hardest part.
So what I got from this experience.
👇
Before you start coding think,
write down the main functionalities you gonna build, design them, analyze, and read more about your choices so you don't get blocked after.

Spaghetti code

Baha chammakhi — Tue, 23 Jun 2020 08:44:23 +0000

I’ve been lately working on a mobile application backend I am gonna talk on the next posts the problems I faced, things I learned.
👨🏻‍💻👨🏻‍💻

In this post, I am gonna talk mainly about code quality the main task was to add some features to the project but suddenly I found my self blocked because of the poor spaghetti code written by the devs before me, the solution was refactoring and repeating a big part of the application.
Things I learned :

Code quality is a priority in creating products👨🏻‍💻
make your code readable and easy to understand by refactoring.
Follow pattern designs it will make your code better .
A bad code quality feels like he'll for a developer so please don't ship a bad code.🥵