DEV Community: Omar Elwakeel

Fullstack nodejs reactjs with docker compose

Omar Elwakeel — Thu, 17 Nov 2022 11:37:18 +0000

If you have developed an application back to front and want to make automatic deployments, if you are struggling with this part, here I might answer your questions, at least some of them.

To have automatic deployment and secure communication in a seamless way between the backend and the frontend, you can do so with many options and alternatives, one of these is using docker compose, I use it in demos so it can be easily explained.

I made a repository that has all the code explained here so I don't make you bored and just go through the important bits of the code that does the magic, the url to the repository goes here Demo

For the application you can have any kind of frameworks used, but at the end you have a communication between both backend and frontend, this communication if done using RESTful APIs then using http protocol you can transfer data in between, in our case the backend is listening to some endpoints and the frontend is using axios package to send those requests.

Your project directory could be like the following:

Both backend and frontend should contain Dockerfile build and run steps as follows

backend/Dockerfile

FROM node:16.17.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 9000
CMD [ "npm", "start" ]

frontend/Dockerfile

FROM node:16.17.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 3000
CMD [ "npm", "start" ]

docker-compose.yml

version: '3.4'
services:
  backend:
    build: ./backend
    container_name: backend
    environment:
      - PORT=9000
    ports:
      - '9000:9000'
    expose:
      - '9000'
    networks:
      - integration
  frontend:
    build: ./frontend
    container_name: frontend
    environment:
      - REACT_APP_BACKEND_URL=http://localhost:9000
    ports:
      - '3000:3000'
    expose:
      - '3000'
    networks:
      - integration
networks:
  integration:
    driver: bridge

To explain what is going on, the dockerfiles builds an image for your code, like a template that can be run at any time and on any platform, the docker-compose makes use of these dockerfiles as follows:

services: is the services you have, as you can have many, like backend and frontend, each service has the follows

build: path to the dockerfile
container_name: name of the container to be created
environment: environment variables passed into the container
expose: port to be exposed to the outside of the container created
networks: what network to be used, as docker compose to secure connection between containers, can be taught to create a bridge between containers to communicate through.

networks: this is how we tell docker compose to create a network bridge to allow the containers to communicate through

Want to open modals from any place in your code? this article is for you!

Omar Elwakeel — Sat, 05 Nov 2022 12:47:13 +0000

When I was a beginner developer, I struggled with opening and closing modals, the UI itself was no issue, but managing the state of the application modals was a trouble, if you feel or ever felt the same, go through this simple and short tutorial, I will give you a guide on how to make it better.

Requirements

SPA (react, vue, ...) or SSR (next, nuxt, ...)
Application state management tool (redux, ...)
Modal design or a ready one like MUI's modals

For this tutorial, I'm going to use react, redux and MUI's modal

Enough with the intro, let's start some code

I suppose you will have a layout that wraps your code, assume this is the content of it

<div>
 <Navbar />
 {children} // these are the actual page content
 <Footer />
</div>

To have a central modal to be managed from everywhere in the code you should have a central state, in my case it's redux

ModalState {
 isOpened: boolean;
 current: "auth-modal" | "checkout-modal" | "confirm-modal";
 args: any;
}

isOpened is a boolean to check if the modal is currently opened

ModalType is a string that identifies the current modal to be rendered

args is any kind of arguments you want to send to the current modal

Inside the modal state slice

openModalAction: (state, action) => {
 const { current, args } = action.payload;
 return {
  isOpened: true,
  current,
  args
 }
},

closeModalAction: (state, action) => {
 return {
  ...state,
  isOpened: false,
  args: []
  }
 }

openModalAction sets the current modal and sends the required props to that modal through the args parameter

closeModalAction closes the modal opened no matter any

Going back to the layout that is wrapping the whole app you can add one more component

<div>
 <Navbar />
 {children} // these are the actual page content
 <Footer />
 <CentralModalRenderer />
</div>

for the CentralModalRenderer component, it can be like the following

const dispatch = useDispatch();
const { current, isOpened, args } = useSelector((state) => state.modal)

function renderCurrentComponent() {
    switch (current) {
        case "auth-modal":
            return (<AuthModal {...args} />)
                case "checkout-modal":
            return (<CheckoutModal {...args} />)
        default:
            return null
    }
}

const handleClose = () => {
 dispatch(closeModalAction())
}

return (
    isOpened ? (
        <Modal 
                     open={isOpened} 
                     handleClose={handleClose}
                 >
            {renderCurrentComponent()}
                 <Modal/>
        ) : null
    )

Modal is MUI's modal, that requires two props, boolean to for the modal to be opened or not, and on close handler

isOpened whenever true will open the modal state

renderCurrentComponent is a function to check which is the current value in the modal state and renders the modal component created that matches

Notice that the args are always sent to the component, so how to open it, easy

<button
onClick={() => dispatch(openModal({current:"auth-modal", args:{message:"Are you sure you want to leave?"}}))}
>
open modal
</button>

I hope this was enough to start your own central modal, the same idea can be used to implement a central notification system, or a central management state for UI, all over your code and components

EC2 Launch template step by step

Omar Elwakeel — Thu, 23 Jun 2022 15:58:46 +0000

Developing on your local machine is not a hassle for any one any more, deploying you code on a machine is no longer a problem also, but automating the process might be intimidating for some.

In this article, I will go through the configuration needed to create an EC2 launch template to automate assigning a new server instance, pull the code, make the proper configuration and even start the application.

Requirements

AWS Account
Github or Bitbucket repository that contains your application (i used nodejs in mine)

First of all, head to the EC2 Dashboard, and click on the launch template on the side navbar

Create a launch template

give the template a name
Define the OS, in my case (Ubuntu server 22.04 t2.micro) because it's free eligible
Select the security group, most importantly it has an allow rule for both (http port 80, and ssh port 22)
Network settings
Configure storage
Under the Advanced details there is an important field called user data, this part is quite important.

User data can hold the scripts for the instance to run once it's initialized, like installing some packages, pulling the code, build and start it.

Add thee following code, I will add a comment before each line describing what it does. Lines that start will ## is comments


## 1. This line is important for AWS EC2 to understand the context of this file
#!/bin/bash -ex

## 2. Log all incidents in a user-data.log file
exec > >(tee /var/log/user-data.log|logger -t user-data -s 2>/dev/console) 2>&1

## 3. Install nodejs
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
bash nodesource_setup.sh
apt-get -y install nodejs
apt-get -y install build-essential

## 4. Install nginx for network routing
apt-get update
apt-get -y install nginx
ufw allow 'Nginx Full'

## 5. Remove nginx default configuration
cd /etc/nginx/sites-available
unlink default

## 6. Add your custom nginx configuration
tee -a myapp.com <<EOF
server {
 listen 80 default_server;
 listen [::]:80 default_server;
 server_name myapp.com;

 location / {
   proxy_pass http://127.0.0.1:3000;
   proxy_http_version 1.1;
   proxy_set_header Upgrade \$http_upgrade;
   proxy_set_header Connection 'upgrade';
   proxy_set_header Host \$host;
 }
}
EOF

## 7. Remove nginx other configuration file
cd /etc/nginx/sites-enabled
unlink default


## 8. Link both configurations and restart nginx
ln -s /etc/nginx/sites-available/myapp.com /etc/nginx/sites-enabled/myapp.com
systemctl restart nginx

cd /home/ubuntu

## 8. Install pm2 for forever running an application
npm install pm2 -g

mkdir app
cd app

## 8. Clone your repository and you may use the password in the url to skip password check step
git clone https://<username>:<password>@bitbucket.org/<project-name>/<repo-name>.git

cd repo-name

## 9. Add .env file and the necessary environment variables
tee -a .env <<EOF
NODE_ENV=development

PORT=3000
EOF

npm install

npm run build

## 10. Use pm2 to start the application
pm2 start npm --name "repo-name" -- run start

Now your server is initialized, configured, the code is pulled to the latest changes and even up and running

To check go EC2 Dashboard and launch and instance, but this time from a launch template

You should count from 2 to 5 minutes and viola you have your own new instance, use the public IP or the public dns -provided in the instance info- in the browser. Now you should see the response from your application.

Microservices with express.js and rabbitmq

Omar Elwakeel — Fri, 29 Apr 2022 13:07:25 +0000

This article is to simplify and do a step by step tutorial to make a microservices app

In this tutorial, I'm going to use

Node.js as runtime environment.
Typescript instead of Javascript for better development experience.
Express.js for the backend.
Rabbitmq as a message broker.

To find the final code, you can find it on Github

Before typing code, why Microservices?

Let's say we have to services, In a Monolithic Architecture you would have only one repository and all your services interact through the same instance, if any service caused the instance to crash, the whole application will crash.

While in a Microservices Architecture each will work a whole unit and on interacting with other services, it uses message brokers like Rabbitmq to send a message to other services.

Now consider a warehouse service (consumer) that really depends on an order service (publisher), where whenever an order is submitted the warehouse is notified and starts the shipping process, in this architecture, if the order service caused a crash, the warehouse won't be affected and will keep working, even if the warehouse service was out when an order is submitted, the message broker will keep the message and on the startup of the warehouse service, it will assert that in knows about this message.

How to implement it?

First, the folder structure, consider making a directory called online-ordering-microservices, with two folders inside [order, warehouse]

The .gitingore file to ignore the node_modules inside each service

Second, setup rabbitmq as a message broker

Run docker container run --name rabbitmq --detach -p 5672:5672 rabbitmq

This will run a container from the image rabbitmq, on a detached mode and expose the port 5672 which is the default port for rabbitmq and give this container a name rabbitmq

Third, setup each service.

Run npm install express @types/express amqplib @types/amqplib to install the necessary dependencies.

order/index.ts


import amqplib, { Channel, Connection } from 'amqplib'
import express, { Request, Response } from 'express'

const app = express()

// parse the request body
app.use(express.json())

// port where the service will run
const PORT = 9005

// rabbitmq to be global variables
let channel: Channel, connection: Connection

connect()

// connect to rabbitmq
async function connect() {
  try {
      // rabbitmq default port is 5672
    const amqpServer = 'amqp://localhost:5672'
    connection = await amqplib.connect(amqpServer)
    channel = await connection.createChannel()

    // make sure that the order channel is created, if not this statement will create it
    await channel.assertQueue('order')
  } catch (error) {
    console.log(error)
  }
}

app.post('/orders', (req: Request, res: Response) => {
  const data = req.body

  // send a message to all the services connected to 'order' queue, add the date to differentiate between them
  channel.sendToQueue(
    'order',
    Buffer.from(
      JSON.stringify({
        ...data,
        date: new Date(),
      }),
    ),
  )

  res.send('Order submitted')
})

app.get('*', (req: Request, res: Response) => {
  res.status(404).send('Not found')
})

app.listen(PORT, () => {
  console.log(`Server running on ${PORT}`)
})

warehouse/index.ts


import amqplib, { Channel, Connection } from 'amqplib'
import express, { Request, Response } from 'express'

const app = express()

// parse the request body
app.use(express.json())

// port where the service will run
const PORT = 9005

// rabbitmq to be global variables
let channel: Channel, connection: Connection

connect()

async function connect() {
  try {
    const amqpServer = 'amqp://localhost:5672'
    connection = await amqplib.connect(amqpServer)
    channel = await connection.createChannel()

    // consume all the orders that are not acknowledged
    await channel.consume('order', (data) => {
      console.log(`Received ${Buffer.from(data!.content)}`)
      channel.ack(data!);
    })
  } catch (error) {
    console.log(error)
  }
}

app.get('*', (req: Request, res: Response) => {
  res.status(404).send('Not found')
})

app.listen(PORT, () => {
  console.log(`Server running on ${PORT}`)
})

Now, if you run both apps and made a post request to http://localhost:9005/orders, you will get a message in the warehouse service, more importantly, if you made a request while the warehouse service is not running and started the warehouse service, it will receive that message, and actually will keep receiving it untill it acknowledges it.

I hope you liked this tutorial, and see you in another ones.

CI/CD pipeline, easy steps.

Omar Elwakeel — Wed, 16 Mar 2022 16:35:07 +0000

This article to demonstrate how to build your own CI/CD pipeline.

The next steps and procedures can be used on other code repo management systems and other deployment platforms, So Bitbucket and Heroku are just examples.

First of all you should have the following or similar:

A code repo that is attached to Bitbucket or any similar code management system
A platform to deploy code on, in my case I'm going to use Heroku

First to access your Heroku App you should have an API Key like any other platform, In case of AWS you have to have Access keys, You have to put this or these keys in the repository settings.

Second if you have variables that are related to the environment itself like the Heroku app name, you can state them in the deployment section.

In your code base you should have a file with the following name bitbucket-pipelines.yml, the name of the file will differ based on the code repo managamenet system you are using, however this file should contain code similar to this

image: node:10.15.3 
pipelines:
  default:
    - step:
         script:
          - echo $BITBUCKET_BRANCH
  branches:
    dev:
       - step:
           name: Create artifact
           script: 
             - git archive --format=tar.gz $BITBUCKET_BRANCH -o application.tar.gz 
           artifacts: 
             - application.tar.gz
       - step:
           name: Deploy to heroku
           deployment: dev
           caches:
             - node
           script:
             - pipe: atlassian/heroku-deploy:1.1.4
               variables:
                 HEROKU_API_KEY: $HEROKU_API_KEY
                 HEROKU_APP_NAME: <App-Name>
                 ZIP_FILE: 'application.tar.gz'
                 WAIT: 'true'
    stage:
       - step:
           name: Create artifact
           script: 
             - git archive --format=tar.gz $BITBUCKET_BRANCH -o application.tar.gz 
           artifacts: 
             - application.tar.gz
       - step:
           name: Deploy to heroku
           deployment: dev
           caches:
             - node
           script:
             - pipe: atlassian/heroku-deploy:1.1.4
               variables:
                 HEROKU_API_KEY: $HEROKU_API_KEY
                 HEROKU_APP_NAME: <App-Name>
                 ZIP_FILE: 'application.tar.gz'
                 WAIT: 'true'

All line of codes pre-fixed with $ are variables that will be determined in runtime.
BITBUCKET_BRANCH is the current branch that had the currect change.
The image is the image of the container responsible for deploying the code and doing the following steps, in here will be node version 10.15.3
default pipeline is a pipeline that will execute no matter what branch is active.
branches will define the code and steps to take place based on the active branch
App-Name this will be your application name that will depend on the environment your are building on, testing, dev, staging, production.

Whenever your trigger this pipeline by pushing the code to branch or trigger it manually, this will happen.

And viola your code is deployed automatically, This can be better and more efficient if you have a testing phase before building the code, then you will add the script responsible for running the test cases before the build script, and the build script will only run if the test step is successful.

How to create your website landing logo with framer-motion

Omar Elwakeel — Sat, 26 Feb 2022 17:24:20 +0000

Are you building your own website, or working on a project where you want to make a robust landing page?

This article is for this purpose, where we will go through very minimal and easy steps to do a logo that will show, animate and fade with a cinematic way.

In this tutorial we will work with react and with the support of framer-motion package, everything will go smooth and easy.

In your App.js component

import Form from "./components/Form";
import Header from "./components/Header";

function App() {
    return (
        <div className="h-screen flex justify-center items-center">
            <Header />
            <Form />
        </div>
    );
}

export default App;

the form component is not important, because it could be anything, one of the possible things is the rest of your app.

In Header.js component

import { useEffect, useState } from "react";
import Logo from "./Logo";

export default function Header() {
    const [isVisible, setIsVisible] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setIsVisible(false)
        }, 4000);
    }, [])

    return (
        <div>
            {isVisible && <Logo />}
        </div>
    )
}

the settimeout will assure that the logo will only appear once, which is on the first load of the page.

In Logo.js component

import { AnimatePresence, motion } from "framer-motion";

const svgVariants = {
    initial: {
        rotate: -360
    },
    animate: {
        rotate: 0,
        transition: {
            duration: 1
        }
    },
    exit: {
        rotate: -180
    }
}

const pathOneVariants = {
    initial: {
        opacity: 0,
        pathLength: 0
    },
    animate: {
        opacity: 1,
        pathLength: 1,
        transition: {
            duration: 2,
            ease: 'easeInOut'
        }
    }
}

const pathTwoVariants = {
    initial: {
        opacity: 1,
        pathLength: 1
    },
    animate: {
        opacity: 0,
        pathLength: 0,
        transition: {
            duration: 2,
            delay: 2,
            ease: 'easeInOut'
        }
    }
}



export default function Logo() {
    return (
        <AnimatePresence>
            <motion.div className="fixed top-0 left-0 w-full h-full bg-slate-300 flex justify-center items-center">
                <motion.svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 192.755 192.756"
                    className="rounded-3xl"
                    variants={svgVariants}
                    initial="initial"
                    animate="animate"
                    exit="exit"
                >
                    <motion.g fill-rule="evenodd" clip-rule="evenodd">
                        <motion.path fill="#fff" d="M0 0h192.755v192.756H0V0z"
                            variants={pathOneVariants}
                        />
                        <motion.path d="M127.986 70.51v7.505l-63.217 28.846v-7.743l54.357-24.873L64.769 49.4v-7.744l63.217 28.854zM64.769 122.25v-7.495l63.217-28.852v7.74L73.654 118.5l54.332 24.859v7.741l-63.217-28.85z"
                            variants={pathTwoVariants}
                        />
                    </motion.g>
                </motion.svg>
            </motion.div>
        </AnimatePresence>
    )
}

Here i just used a free svg I found online, framer-motion package with the variants that specify the animation on enter and on exit as well as the transition between both.

Refresh your page, and on every refresh you will find the landing logo, Viola!

I hope you found this article beneficial, and I advice you to look more in the docs of the great framer-motion.

How to make a self-controlled button in react

Omar Elwakeel — Thu, 20 Jan 2022 10:18:08 +0000

Controlling how the buttons in your app can be sometimes redundant and you find yourself writing the same code to do the same stuff many times, what if you can have your own component that can decide for itself, how to render and how to behave.

In this tutorial I will show you how to have a generic button that can take care of itself according to the variables around it, like the current authenticated user and upon it decides how will it look and whether it will be enabled or disabled.

For this tutorial and for the sake of having a good insight on how helpful its, I'm going to build a slightly complicated app, I will use redux for the local state management, you will know why shortly.

If you want to follow along, please be my guest. But if you want to see the code you can go to the github repo.

let's create an app with create-react-app and name it as you like, after that we need to install some packages like react-redux @reduxjs/toolkit and optionally you can install @mui/material @mui/styles @emotion/react @emotion/styled

Inside the src directory we can have 2 folders one for the components and the other for the redux store

inside src/store/authSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const login = createAsyncThunk(
    'app/auth/login',
    async (credentials) => {
        return credentials;
    }
);

export const logout = createAsyncThunk(
    'app/auth/logout',
    async () => {
        return null;
    }
);

const authSlice = createSlice({
    name: 'app/auth',
    initialState: null,
    extraReducers:{
        [login.fulfilled] : (state, action) => action.payload,
        [logout.fulfilled] : (state, action) => action.payload
    }
});

export default authSlice.reducer;

inside src/store/index.js

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import auth from './authSlice';

const reducer = combineReducers({
    auth
})

const store = configureStore({
    reducer,
    middleware: getDefaultMiddleware =>
        getDefaultMiddleware({
            immutableCheck: false,
            serializableCheck: false
        }),
    devTools: process.env.NODE_ENV === 'development'
});

export default store;

these couple of files to configure the store for local state management, specifically the auth and current user signed in. we will wrap the application with the redux provider component and pass the store as props.

inside src/App.js

import { useState } from "react";
import { Provider } from 'react-redux';

import store from './store/index'

import Toolbar from "./components/Toolbar";
import AuthButton from "./components/AuthButton";

function App() {
  const [auth, setAuth] = useState('');

  return (
    <Provider store={store}>
      <div className="App">
        <Toolbar setAuth={setAuth}/>
        <AuthButton auth={auth}/>
      </div>
    </Provider>
  );
}

export default App;

for the Toolbar and the AuthButton components

inside src/components/Toolbar.js

import { Button, TextField } from "@mui/material";
import { makeStyles } from "@mui/styles";
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { login, logout } from "../store/authSlice";

const useStyles = makeStyles(() => ({
    container:{
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    }
}))

const employees = [
    {username:'marie', role:'ceo'}, 
    {username:'jack', role:'manager'}, 
    {username:'laila', role:'employee'}, 
    {username:'sam', role:'guest'}
]

export default function Toolbar({ setAuth }){
    const classes = useStyles();
    const dispatch = useDispatch();

    const [username, setUsername] = useState('')

    const handleLogin = () => {
        const credentials = employees.find(employee => employee.username === username)

        if(!credentials) return;

        dispatch(login(credentials))
    }

    const handleLogout = () => {
        dispatch(logout())
    }

    return (
        <div className={classes.container}>
            <TextField 
                onChange={(e) => setUsername(e.target.value)}
            />
            <Button onClick={(e) => handleLogin()}>Login</Button>
            <Button onClick={(e) => handleLogout()}>Logout</Button>
        </div>
    )
}

Now whenever we logout or login the button will be notified with the current authenticated user, and will fetch the role of the user and update itself, whether the color, disabled, etc.

inside src/components/AuthButton.js

import React from "react";
import { makeStyles } from "@mui/styles";
import { blue, green, orange, red } from "@mui/material/colors";
import { useSelector } from "react-redux";

const useStyles = makeStyles(() => {
    return {
        btn: {
            backgroundColor:({auth}) => {
                if(auth){
                    switch (auth) {
                        case "ceo":
                            return green[700]
                        case "manager":
                            return orange[700]
                        case "employee":
                            return blue[700]
                        default:
                            return red[700]
                    }
                }

                return red[700]
            },
            width:'20em',
            height:'5em',
            borderRadius:'5px',
            color:'white'
        }
    }
})

export default function AuthButton({ unauthorizedRoles }){
    const auth = useSelector(({auth}) => auth);
    const classes = useStyles({auth: auth?.role || ''});

    const isDisabled = unauthorizedRoles.includes(auth?.role)

    const renderMessage = () => {
        if(auth){
            if(!isDisabled){
                return `Hi, ${auth?.username} Want to do something cool`
            }
            else{
                return `Hi, ${auth?.username}, Sorry but you are not authorized for the cool stuff`
            }
        }

        return 'Why dont you login'
    }

    return (
        <button 
            variant="contained" 
            disabled={isDisabled} 
            className={classes.btn}
            >
            {renderMessage()}
        </button>    
    )
}

AuthButton.defaultProps = {
    unauthorizedRoles : ["guest"]
}

once you login or logout, the button will adjust itself accordingly.

How to make a robust form validation in react with material ui fields.

Omar Elwakeel — Sat, 01 Jan 2022 13:41:45 +0000

Form validation is one of the main task that a developer mainly or a web developer specificaly faces from time to time.

There are many ways to validate a form, and many modules to make use of it to help us to validate the form data.

But, what I want to do, Is validating our form on our own to know what goes on under the hood packages like react-hook-form and other modules that do the same job.

You can clone the code from the repo

To start we need a react app, which we will have by using npx create-react-app <your app name>, besides that we need to npm install material-ui/core, after doing both those steps we are then ready to code.

First we need to have a structure of the form, where I'm going to use material-ui helper components to build it



function App() {
 <Some code is going to be written here in the next steps for validation>

return (
  <Container className={classes.container} >
      <form noValidate onSubmit={handleSubmit} >
          <Typography 
            variant="h6">
              Please enter your data
          </Typography>

          <TextField 
            placeholder="Enter your name"
            label="Name"
            name="name"
            variant="outlined"
            fullWidth
            required
            className={classes.field}
            value={formValues.name.value}
            onChange={handleChange}
            error={formValues.name.error}
            helperText={formValues.name.error && formValues.name.errorMessage}
          />

          <TextField 
            placeholder="Enter your age"
            label="Age"
            name="age"
            variant="outlined"
            fullWidth
            required
            type="number"
            className={classes.field}
            value={formValues.age.value}
            onChange={handleChange}
            error={formValues.age.error}
            helperText={formValues.age.error && formValues.age.errorMessage}
            />

          <TextField 
            placeholder="Describe the best tech stack you worked with and you like most?"
            label="Likes"
            name="likes"
            variant="outlined"
            fullWidth
            required
            className={classes.field}
            value={formValues.likes.value}
            multiline
            rows={4}
            onChange={handleChange}
            error={formValues.likes.error}
            helperText={formValues.likes.error && formValues.likes.errorMessage}
          />

          <FormControl className={classes.field} >
            <FormLabel>Job title</FormLabel>
            <RadioGroup name="jobTitle" value={formValues.jobTitle.value} onChange={handleChange} >
              <FormControlLabel value="full-stack" control={<Radio />} label="Full stack" />
              <FormControlLabel value="backend" control={<Radio />} label="Backend" />
              <FormControlLabel value="frontend" control={<Radio />} label="Frontend" />
            </RadioGroup>
          </FormControl>

          <Button
            type="submit"
            variant="outlined"
            color="secondary"
            endIcon={<KeyboardArrowRight />}
          >
              Submit
          </Button>
      </form>
    </Container>
)

}

So, what are we missing so far? 3 things actualy like so:

Where are the classes, this is a thing that is not in out interest right now, and you can clone the code from the repo and see more about makeStyles hook
handleChange function
handleSubmit function

For 2 & 3 we are going to discuss deeply right now, first before handling any change we need to have the form state saved.

so inside our App component



const [formValues, setFormValues] = useState({
    name:{
      value:'',
      error:false,
      errorMessage:'You must enter a name'
    },
    age:{
      value:21,
      error:false,
      errorMessage:'You must enter an age'
    },
    likes:{
      value:'',
      error:false,
      errorMessage:'You must enter your liked tech stacks'
    },
    jobTitle:{
      value:'full-stack',
      error:false,
      errorMessage:'You must choose your job title'
    }
  })

where for every field we need to have a key that matches the name property of the field and we can store the default value in it or the value that is going to be stored on input field change, also whether there is an error and maybe the error message we need to use.

Then the user will start typing and we need to handle that change like so



const handleChange = (e) => {
    const {name, value} = e.target;
    setFormValues({
      ...formValues,
      [name]:{
        ...formValues[name],
        value
      }
    })
  }

where we match the object inside form values by the field name, and that's why it was quite important for them to match.

After the user finishes, the user of the form will try to submit it, and here comes the handleSubmit function into the game.



const handleSubmit = (e) => {
    e.preventDefault();

    const formFields = Object.keys(formValues);
    let newFormValues = {...formValues}

    for (let index = 0; index < formFields.length; index++) {
      const currentField = formFields[index];
      const currentValue = formValues[currentField].value;

      if(currentValue === ''){
        newFormValues = {
          ...newFormValues,
          [currentField]:{
            ...newFormValues[currentField],
            error:true
          }
        }
      }

    }

    setFormValues(newFormValues)
  }

We get all the form fields values and check if any of them is empty, if so we destruct the old state and just replace the current one that is empty with error set to true so the TextField component show an error message.

Custom pagination decorator in Nestjs, Pagination has never been easier!!

Omar Elwakeel — Tue, 23 Nov 2021 20:23:51 +0000

This tutorial will teach you a good way to make pagination making good use of Nestjs decorators. If you have never read about Nestjs framework, I think it's time, once you read the documentation, you would love to use it, Here you can find the official page.

Let's not take too much in the introduction and get along with the code!!

inside terminal



nest new pagination-app

this will create a new fresh nestjs app for you, it will ask you for your favorite package module (npm, yarn, ...etc) choose whatever you prefer.

inside pagination.ts (src/types/)



export interface Pagination {
    skip?:number;
    limit?:number;
    sort?:{ field:string, by:"ASC" | "DESC" }[];
    search?:{ field:string, value:string }[];
}

Here we create the pagination interface we expect from the client, these are the most important query parameters that can be sent for pagination.

inside get-pagination.ts (src/decorators/)



import { createParamDecorator, ExecutionContext } from "@nestjs/common";
import { Request } from "express";
import { Pagination } from "../types/pagination";

export const GetPagination = createParamDecorator((data, ctx:ExecutionContext) : Pagination => {
    const req : Request = ctx.switchToHttp().getRequest();

    const paginationParams : Pagination = {
        skip:0,
        limit:10,
        sort:[],
        search:[]
    };

    paginationParams.skip = req.query.skip ? parseInt(req.query.skip.toString()) : 0;
    paginationParams.limit = req.query.limit ? parseInt(req.query.limit.toString()) : 10;

    // create array of sort
    if(req.query.sort){
        const sortArray = req.query.sort.toString().split(',')
        paginationParams.sort = sortArray.map(sortItem => {
            const sortBy = sortItem[0]
            switch (sortBy) {
                case "-":
                    return{
                        field:sortItem.slice(1),
                        by:'ASC'
                    }
                case "+":
                    return{
                        field:sortItem.slice(1),
                        by:'ASC'
                    }
                default:
                    return{
                        field:sortItem.trim(),
                        by:'DESC'
                    }
            }
        })
    }

    // create array of search
    if(req.query.search){
        const searchArray = req.query.search.toString().split(',')
        paginationParams.search = searchArray.map(searchItem => {
            const field = searchItem.split(":")[0]
            const value = searchItem.split(":")[1]
            return {
                field,
                value
            }
        })
    }

    return paginationParams;
})

Here we get the request from the current context, it's very the same as express request object with the same properties it had.
*paginationParams is will contain the default values for the pagination.
*we set the pagination skip and limit based on the query, the ternary operator to check if the limit and skip query parameters can be parsed into numbers.
*for sort, there is many ways to have the field to sort by along with sort order, for me I use *+ for "DESC"** and - for "ASC"
for search, we can separate between the field and the value with a *:**

inside app-controller.ts (src/)



...
@Get('/cats')
  getCats(@GetPagination() pagination : Pagination): string {
    return this.appService.getCats(pagination);
  }
...

inside app-service.ts (src/)



...
getCats(pagination:Pagination){
    return pagination;
  }
...

instead of just returning it, you can have this service connected to the database and query the db according to the values you have, but for simplicity we will just log it to the console.

let's try it, run the app with npm run start:dev

let's hit this url > http://localhost:3000/cats?skip=2&limit=1&search=name:my,age:12&sort=+age

I hope you liked this tutorial, I really advice you to use Nestjs framework, and moreover go read it's documentation!

Have a nice day :)

Microservices, express-react app (Part 2) End it with the backend!

Omar Elwakeel — Sat, 20 Nov 2021 15:34:26 +0000

This is the second article of a series of posts discussing Micro-services, how to use Docker, Kubernetes and make your own CI/CD Workflow to deploy your app with cool automation.

Part 1

You can clone the app from here, or as I strongly recommend, go along step by step

We previously discussed the required folder structure for the posts service, to have a complete backend we will need some authentication also, we need the user model who will be the owner of the post. I don't want this article to go long, So I will cut corners on the parts that I have covered previously.

inside user.ts (posts-app/auth/models)

import mongoose from "mongoose";

interface UserAttributes {
    username:string;
    password:string;
}

interface UserDocument extends mongoose.Document{
    username:string;
    password:string;   
}

interface UserModel extends mongoose.Model<UserDocument>{
    build(attributes:UserAttributes):UserDocument;
}

const userSchema = new mongoose.Schema({
    username:{
        type:String,
        required:true,
        unique:true
    },
    password:{
        type:String,
        required:true
    }
}, {
    toJSON:{
        transform(doc, ret){
          ret.id = ret._id;
          delete ret._id;
          delete ret.password;
          delete ret.__v;
       }
    }
})


userSchema.statics.build = (attributes:UserAttributes) => {
    return new User(attributes);
}

const User = mongoose.model<UserDocument, UserModel>('User', userSchema)

export default User;

inside signup.ts (posts-app/auth/routes)

import express, { Request, Response } from 'express';
import { body } from 'express-validator';
import jwt from 'jsonwebtoken';
import { validateRequest } from '../middlewares/validate-request';
import { BadRequestError } from "../errors/bad-request-error";

import { User } from '../models/user';

const router = express.Router();

router.post(
  '/api/users/signup',
  [
    body('username').isString().withMessage('Username must be valid'),
    body('password')
      .trim()
      .isLength({ min: 4, max: 20 })
      .withMessage('Password must be between 4 and 20 characters'),
  ],
  validateRequest,
  async (req: Request, res: Response) => {
    const { username, password } = req.body;

    const existingUser = await User.findOne({ username });

    if (existingUser) {
      throw new BadRequestError('Username in use');
    }

    const user = User.build({ username, password });
    await user.save();

    // Generate JWT
    const userJwt = jwt.sign(
      {
        id: user.id,
        username: user.username,
      },
      process.env.JWT_KEY!
    );

    // Store it on session object
    req.session = {
      jwt: userJwt,
    };

    res.status(201).send(user);
  }
);

export { router as signupRouter };

inside signin.ts (posts-app/auth/routes)

import express, { Request, Response } from 'express';
import { body } from 'express-validator';
import jwt from 'jsonwebtoken';
import { validateRequest } from '../middlewares/validate-request';
import { BadRequestError } from "../errors/bad-request-error";

import { Password } from '../services/password';
import { User } from '../models/user';

const router = express.Router();

router.post(
  '/api/users/signin',
  [
    body('email').isEmail().withMessage('Email must be valid'),
    body('password')
      .trim()
      .notEmpty()
      .withMessage('You must supply a password'),
  ],
  validateRequest,
  async (req: Request, res: Response) => {
    const { email, password } = req.body;

    const existingUser = await User.findOne({ email });
    if (!existingUser) {
      throw new BadRequestError('Invalid credentials');
    }

    const passwordsMatch = await Password.compare(
      existingUser.password,
      password
    );
    if (!passwordsMatch) {
      throw new BadRequestError('Invalid Credentials');
    }

    // Generate JWT
    const userJwt = jwt.sign(
      {
        id: existingUser.id,
        username: existingUser.username,
      },
      process.env.JWT_KEY!
    );

    // Store it on session object
    req.session = {
      jwt: userJwt,
    };

    res.status(200).send(existingUser);
  }
);

export { router as signinRouter };

inside currentuser.ts (posts-app/auth/routes)

import express from 'express';
import { currentUser } from '../middlewares/current-user';

const router = express.Router();

router.get('/api/users/currentuser', currentUser, (req, res) => {
  res.send({ currentUser: req.currentUser || null });
});

export { router as currentUserRouter };

Now with some docker as promised, in each service (auth and posts) we create a Dockerfile

inside Dockerfile (posts-app/(posts AND auth))

FROM node:alpine

WORKDIR /app
COPY package.json .
RUN npm install --only=prod
COPY . .

CMD ["npm", "start"]

*first line we say that we need to build an image for the current service but we don't want to start from scratch, so we start it from a node js image, where alpine is the tag of that image.
*then we specify the working directory in the newly created pod to be /app.
*in the third step we only copy package.json into that directory.
*we run npm install to install the required dependencies.
*we copy everything into the working directory.
*we run the script in the package.json responsible for running the app.

we create a folder in the root directory called infra inside we create another folder called k8s which is short for Kubernetes, Kubernetes will be the master mind for the services to work all together. Inside k8s we create 5 files with extension .yaml, all as follows:

inside auth-depl.yaml (posts-app/infra/k8s)

apiVersion: apps/v1
kind: Deployment
metadata:
  name: socialapp-auth-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: socialapp-auth
  template:
    metadata:
      labels:
        app: socialapp-auth
    spec:
      containers:
        - name: socialapp-auth
          image: omar48/socialapp-auth
          env:
            - name: MONGO_URI
              value: 'mongodb://socialapp-auth-mongo-srv:27017/socialapp-auth'
            - name: JWT_KEY
              valueFrom:
                secretKeyRef:
                  name: jwt-secret
                  key: JWT_KEY
---
apiVersion: v1
kind: Service
metadata:
  name: socialapp-auth-srv
spec:
  selector:
    app: socialapp-auth
  ports:
    - name: socialapp-auth
      protocol: TCP
      port: 3000
      targetPort: 3000

*we specify the purpose of this configuration which will be a deployment, its name and the environment variables required as mentioned the above snippet of code.
*The deployment needs a network service for the requests incoming, we make it in the same file, separated by the three hyphens in the middle of the file. The type is service, we specify the name and the port numbers it will listen to.

inside auth-mongo-depl.yaml (posts-app/infra/k8s)

apiVersion: apps/v1
kind: Deployment
metadata:
  name: socialapp-auth-mongo-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: socialapp-auth-mongo
  template:
    metadata:
      labels:
        app: socialapp-auth-mongo
    spec:
      containers:
        - name: socialapp-auth-mongo
          image: mongo
---
apiVersion: v1
kind: Service
metadata:
  name: socialapp-auth-mongo-srv
spec:
  selector:
    app: socialapp-auth-mongo
  ports:
    - name: db
      protocol: TCP
      port: 27017
      targetPort: 27017

*Microservices separates services, and puts them to work each on its own, considering the database as well. so we make a deployment for the db also for each service, we also specify the port in the service, the default for mongo is 27017

inside posts-depl.yaml (posts-app/infra/k8s)

apiVersion: apps/v1
kind: Deployment
metadata:
  name: socialapp-posts-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: socialapp-posts
  template:
    metadata:
      labels:
        app: socialapp-posts
    spec:
      containers:
        - name: socialapp-posts
          image: omar48/socialapp-posts
          env:
            - name: NATS_CLIENT_ID
              valueFrom:
                fieldRef:
                  fieldPath: metadata.name
            - name: NATS_URL
              value: 'http://nats-srv:4222'
            - name: NATS_CLUSTER_ID
              value: ticketing
            - name: MONGO_URI
              value: 'mongodb://socialapp-posts-mongo-srv:27017/socialapp-posts'
            - name: JWT_KEY
              valueFrom:
                secretKeyRef:
                  name: jwt-secret
                  key: JWT_KEY
---
apiVersion: v1
kind: Service
metadata:
  name: socialapp-posts-srv
spec:
  selector:
    app: socialapp-posts
  ports:
    - name: socialapp-posts
      protocol: TCP
      port: 3000
      targetPort: 3000

inside posts-mongo-depl.yaml (posts-app/infra/k8s)

apiVersion: apps/v1
kind: Deployment
metadata:
  name: socialapp-posts-mongo-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: socialapp-posts-mongo
  template:
    metadata:
      labels:
        app: socialapp-posts-mongo
    spec:
      containers:
        - name: socialapp-posts-mongo
          image: mongo
---
apiVersion: v1
kind: Service
metadata:
  name: socialapp-posts-mongo-srv
spec:
  selector:
    app: socialapp-posts-mongo
  ports:
    - name: db
      protocol: TCP
      port: 27017
      targetPort: 27017

For these services to communicate together we need to communication master mind to know about them, who is the master mind? Nginx so the fifth configuration file will be for ingress-nginx

inside ingress-srv.yaml (posts-app/infra/k8s)

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: 'true'
spec:
  rules:
    - host: posts.dev
      http:
        paths:
          - path: /api/posts/?(.*)
            pathType: Prefix
            backend:
              service:
                name: socialapp-posts-srv
                port: 
                  number: 3000
          - path: /api/users/?(.*)
            pathType: Prefix
            backend:
              service:
                name: socialapp-auth-srv
                port: 
                  number: 3000

We are almost done, the last thing to do is the config file that will listen to any change that will take place inside our app.

inside skaffold.yaml (posts-app)

apiVersion: skaffold/v2alpha3
kind: Config
deploy:
  kubectl:
    manifests:
      - ./infra/k8s/*
build:
  local:
    push: false
  artifacts:
    - image: omar48/socialapp-auth
      context: auth
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/*.ts'
            dest: .
    - image: omar48/socialapp-posts
      context: posts
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/*.ts'
            dest: .

Now we can give it a try, inside the root directory run skaffold dev

I hope it's working with you, in the next article, I will build the client app that will make use of this backend logic, then will use a service called NATS streaming service to communicate between services.

Microservices, express-react app (Part 1) Let the journey begin!

Omar Elwakeel — Sat, 13 Nov 2021 12:34:34 +0000

Micro-services, I promise! but step by step, stay with me and I promise you won't regret it!!

This is the start of a series of posts discussing Micro-services, how to use Docker, Kubernetes and make your own CI/CD Workflow to deploy your app with cool automation. So the title is confusing, I know!!

Part 2

You can clone the app from here, or as I strongly recommend, go along step by step

But why not take it easy and see all the cool things we can discuss along the way, so I decided to take this big article and divide it into small articles for two reasons

First to discuss all the small code features in a more focused way, and the second reason is to give you a chance to build the app with me and go along this articles smoothly.

So this part will only discuss how to build a simple typescript express app, handle errors and use appropriate middlewares.

If you are ready, please seat belts and let's type some code!!

First make a directory with the app name, we are going to make a posts app so folder with name posts. This directory will have all our services at the end. Here's how we want to end.

let's setup our app structure

inside the root directory terminal (posts-app)

git init

to initialize a git repository, after a while we will connect to our github account

inside the terminal (posts-app/posts)

npm init --y

to initialize npm and generate our package.json file

inside posts service (posts-app/posts)

npm install express @types/express express-validator typescript ts-node-dev  mongoose

these are the required dependencies for now, what for ?

express and @types/express for the app server instance
express-validator for validation of request body
typescript ts-node-dev to use typescript in code and compile on development
mongoose for connection to db as we are going to use mongodb

inside the terminal (posts-app/posts)

tsc --init

this will generate the tsconfig file which is responsible for the typescript configuration, you have to do it!

lets create some files and folders, here how we want to end

inside .env (posts-app/posts)

PORT=3000
MONGO_URI=mongodb://localhost:27017/posts-app

Some variables we will need, port to listen to and a mongo url to use on db connection

inside app.ts (posts-app/posts)

import express, { Request, Response } from "express";
import { json } from "body-parser"
import { errorHandler } from "./middlewares/error-handler";
import { newPostRouter } from "./routes/new";

const app = express();

app.use(json())

app.use(newPostRouter)

app.all('*', (req:Request, res:Response) => {
    return res.status(404).send([{message:'Not found'}])
})

app.use(errorHandler)

export default app;

*we create an app instance from express
*use json body parser for json objects in request body to be parsed
*we use a router which we will know about shortly
*app.all uses a wild card to say that if the request is not handled by any of the previous handlers then return a 404 response
*we use an error handler so any error that is thrown inside the app is handled by this handler, also we will see shortly
*export this instance to be used in index.ts, the start of our app

inside index.ts (posts-app/posts)

import express, { Request, Response } from "express";
import app from './app'
import mongoose from "mongoose";

import dotenv from 'dotenv'
dotenv.config();

const start = async () => {

    if(!process.env.MONGO_URI){
        throw new Error('MONGO_URI must be defined')
    }

    try {
        await mongoose.connect(process.env.MONGO_URI)
        console.log('Mongo db is connected');
    } catch (error) {
        console.error(error);
    }

    const port = process.env.PORT || 3000

    app.listen(port, () => {
        console.log('Posts service started....');
    });

}

start();

*we use dotenv to config our variables in .env
*we connect to db using mongoose
*we use imported app instance to listen to the required port
*we do all that in a start function in a modest fashion way

inside post.ts (posts-app/posts/models)

import mongoose from "mongoose";

interface PostAttributes {
    title:string;
    content:string;
    owner:string;
}

interface PostDocument extends mongoose.Document{
    title:string;
    content:string;
    owner:string;   
}

interface PostModel extends mongoose.Model<PostDocument>{
    build(attributes:PostAttributes):PostDocument;
}

const postSchema = new mongoose.Schema({
    title:{
        type:String,
        required:true
    },
    content:{
        type:String,
        required:true
    },
    owner:{
        type:String,
        required:true
    },
}, {
    timestamps:true,
    toJSON:{
        transform(doc, ret){
            ret.id = ret._id
        }
    }
})


postSchema.statics.build = (attributes:PostAttributes) => {
    return new Post(attributes);
}

const Post = mongoose.model<PostDocument, PostModel>('Post', postSchema)

export default Post;

*we define the attributes used to define a post document in db
*we define a build function to return a new post
*we adjust some configs before export the Post model

inside error-handler.ts (posts-app/posts/middlewares)

import express, { NextFunction, Request, Response } from "express";
import { CustomError } from "../errors/custom-error";

export const errorHandler = (
    error:Error,
    req:Request,
    res:Response,
    next:NextFunction
    ) => {
        if(error instanceof CustomError){
            return res.status(error.statusCode).send({errors:error.generateErrors()})
        }

        console.error(error);
        res.status(400).send({
            errors:[{message:"Something went wrong"}]
        })
    }

*we define a function that will be responsible for handling errors, how express will know, by convention it will search for a function that has 4 input parameters, their order is very important, the error instance comes first!!
*we check if the error is one of the instances we will create soon or not and return the response

inside validate-request.ts (posts-app/posts/middlewares)

import { NextFunction, Request, Response } from "express";
import { validationResult } from "express-validator";
import { RequestValidationError } from "../errors/request-validation-error";

export const validateRequest = (
    req:Request,
    res:Response,
    next:NextFunction
    )=>{
        const errors = validationResult(req);

        if(!errors.isEmpty()){
            throw new RequestValidationError(errors.array())
        }

        next();
    }

*we define a function that will be responsible for validating the body of the incoming request, if not valid it will throw an error that will then handled by the error handler we just created, if now it will call the next function that will pass the request to the next handler.

inside custom-error.ts (posts-app/posts/errors)

export abstract class CustomError extends Error{
    abstract statusCode:number;

    constructor(message:string){
        super(message)
        Object.setPrototypeOf(this, CustomError.prototype);
    }

    abstract generateErrors():{message:string, field?:string}[];
}

*we define a custom error class to be extended by all the error classes we are going to use, why do so? To have a stable error response body and make it easy to catch and handle errors inside our app.

inside request-validation-error.ts (posts-app/posts/errors)

import { ValidationError } from "express-validator";
import { CustomError } from './custom-error'

export class RequestValidationError extends CustomError{
    statusCode = 400;
    constructor(public errors:ValidationError[]){
        super('Invalid request parameters');
        Object.setPrototypeOf(this, RequestValidationError.prototype);
    }

    generateErrors(){
        return this.errors.map(error => {
            return { message:error.msg, field:error.value }
        })
    }
}

*we define an error class taking control of the validation of request body, extending the custom error class

inside new.ts (posts-app/posts/routes)

import express, { Request, Response } from "express";
import { body } from "express-validator";
import { validateRequest } from "../middlewares/validate-request";
import Post from "../models/post";

const router = express.Router();

router.post(
    '/api/posts', 
    [
        body('title').not().isEmpty().withMessage('Title must be provided').isString().withMessage('Title must be text'),
        body('content').not().isEmpty().withMessage('Content must be provided').isString().withMessage('Content must be text'),
        body('owner').not().isEmpty().withMessage('Owner of the post must be provided').isString().withMessage('Owner must be text'),
    ],
    validateRequest,
    async (req:Request, res:Response) => {

    const {title, content, owner} = req.body;        

    const post = Post.build({
        title,
        content,
        owner
    });

    await post.save();

    res.status(201).send(post)
})

export {router as newPostRouter};

*we add a router instance to listen to a specific path on our app, in our case '/api/posts' and the method is POST
*validate request using the middleware we just created, but for the middleware to work we need to let it know what to validate, so before validateRequest function we add an array of the parameters we want to validate with the set of rules
*if not valid, again an error will be thrown and handled, if not the request will continue and reach the body of the function, where we create a post and return it to the user

inside the package.json (posts-app/posts)

...
 "scripts": {
    "start": "ts-node-dev src/index",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

add the start script to use it in starting the app

Viola, that's it! Let's try it? Maybe POSTMAN is a good idea

inside the terminal (posts-app/posts)

npm run start

Go to postman and make two requests, one is valid and one is invalid and check the response, if all goes well you should get such responses

I hope you reached this part! This is only the start, Please in the comments, I'd like to know how you think of the article length, is it too long?? and for the way of explaining is it good or I need to adjust??

Your opinion will have an effect on the next part, I'll make sure of that!! I hope you liked this article and I hope we meet again in another article, remember keep the seat belt, the journey to the knowledge starts anytime :)

Docker, easy start with nodejs-express app

Omar Elwakeel — Wed, 13 Oct 2021 18:36:06 +0000

Docker, what is it? how is it beneficial? how to easily use it?

This is going to be a series of posts, this will be the first of them to explain some easy steps to start using docker containers and deploy apps with it, in this very step we are going to use nodejs with express framework to host a hello world app.

So what is docker?

Docker is lovely developer tool that makes it easy to install and run software without worrying about setup and dependencies.

How is it beneficial?

This is because it makes containers, imagine a multi layer cake where you take a verticle slice of it, so you take from each layer a portion but you don't care about the rest of the slices. Here is an illustration for it.

Which makes it easy for microservices, one example that we will be seeing soon is deploying multiple services with different environemnts or maybe different versions of the very same dependency, like different nodejs versions.

How to use it?

This is my favorite part, where it's enough with the talking and we start to write some code!!

Pre-requirements:

Installed NodeJs, any version and that's what is cool with docker!!
Installed npm, which usually comes with Nodejs.
Installed Docker for windows,linux,...etc
Registered Dockerhub account, it's for free ;)

First lets setup our server we start by initializing the folder structure

npm init -y

So you get a package.json file with initial setup.

now for express

npm add express

add the script to the scripts part in package.json
package.json

....
  "scripts": {
    "start": "node index.js",
  },
....

create index.js file in the root directory

index.js

const express = require('express')

const app = express()

app.get('/', (req,res) => {
  res.send('Hello World!!')
})

server.listen(3000, () => {
  console.log(`Listening on port 3000`);
})

in the terminal type, npm run start

go to the browser and hit localhost:3000 and here it's there, 'Hello world!!'

So Where is docker??? Here it comes in the next steps ;)

in the root directory create a file with no extension with the name Dockerfile with the following content

Dockerfile

FROM node:alpine

WORKDIR /app
COPY package.json .
RUN npm install
COPY . .

CMD ["npm", "start"]

So What is going on???

FROM node:alpine -> is you saying to docker you want to start from an initial image that exists publicly on dockerhub, because once you go with docker you have no nodejs runtime that you have on your machine so you need this dependency.
WORKDIR /app -> this is the work directory inside the container you are making.
COPY package.json .-> here you are copying the package.json file to the work directory, please take notice the '.' context which means to copy in the context directory.
RUN npm install -> to install the required packages, in our case it's expressjs
COPY . . -> here we copy everything else to the work directory, which is the source code.
CMD ["npm", "start"] -> our start script that much match the one in the package.json

Right now you should be having a question, why did we copy twice, why not only one time at the end??

To answer this, I need you to wait for a second an start make use of this docker image. At this moment you have an image but you cant really use it, we need to do two things:

Build it
Push it to dockerhub

After that we can run it.

So in you terminal run the following code

docker build -t <your docker id>/<name of the image(eg. hello-world)> .

again notice the . context

now you should be seeing something like this

now you have this image locally, to view all your images

docker image ls

now we need to make this image have its way to your hub, So in you terminal run the following code

docker push <your docker id>/<name of the image(eg. hello-world)>

Now to answer the question about copying twice in the Dockerfile configuration, this was because each command makes a layer, so we:
1.Copy the package.json file which has all the dependencies in the project
2.Install them using npm install
3.We copy the rest of the files which is the code
So whenever we make a change in the source code, only the layer that copies the code is affected and we dont install the packages again, in other words the rest of the layers are cahced.

after that you can got to your docker hub after signing in and you will find it there

Atlast, let's run this image, but notice something while running docker you can adjust the port it's listening on, so this app should be listening to port 3000, but we can adjust the port where it should take requests from, think of it as an outside port

So in you terminal run the following code

docker run -p 3005:3000 <your docker id>/<name of the image(eg. hello-world)>

Voila!!!

go and hit localhost:3005/

and you should be seeing the following

I hope you liked this post, I'm intending the post some other related posts (actually other parts of this series where we take it a bit harder and a bit more advanced), I'm a starter myself, so if you noticed anything that you recommend against, I'm happy to hear from you, Thanks again!!