DEV Community: tareksalem

How I built my own managed hosting platform

tareksalem — Sat, 28 Dec 2024 12:53:01 +0000

Why We Built ZaCloud: The Journey to Reliable, Affordable, and Flexible Hosting

Over my 7+ years as a software engineer specializing in backend development and DevOps, I've worked at companies of varying sizes, from small startups to large corporates with over 2,000 employees. Across these experiences, particularly in software houses, I've consistently encountered hosting challenges. Each project had unique requirements, but managing VPS hosting was a recurring struggle, especially for small companies with limited budgets.

I started my career with the rise of cloud computing and AI, during the digital transformation era in 2017. My first job involved deploying an e-commerce and delivery app on VPS hosting due to financial constraints. This decision led to countless issues: database outages from insufficient storage, managing app and database logs, ensuring uptime, monitoring, and configuring CI/CD pipelines. While VPS hosting was affordable, the manual effort and operational overhead were overwhelming.

Later, at another company, we turned to Google Cloud Run, drawn by its serverless autoscaling capabilities. While it worked well for certain scenarios, we quickly realized the high costs and limitations of long-running processes. The challenge was clear: balancing cost-efficiency, performance, and flexibility for various project needs.

VPS remains the foundation of many modern cloud hosting solutions, including Kubernetes clusters. Despite the advancements in cloud platforms, there are still valid reasons to use VPS hosting: cost efficiency for early-stage projects, data privacy, and control over your infrastructure. Recognizing this need, I founded ZaCloud, a managed cloud hosting platform, evolving it from a simple VPS management solution to a platform designed for seamless, secure, and scalable hosting.

Our mission is to simplify hosting while empowering developers to deploy their software effortlessly, with the flexibility to scale as needed. ZaCloud embodies this vision—offering reliable and affordable solutions tailored to the diverse needs of developers and businesses.

What is different in Zacloud

ZaCloud aims to enhance the user experience for non-technical and technical users to deploy websites and applications with one click. Using one click you can choose the framework, programming language, and database you want to deploy and everything is 100% managed.
ZaCloud gives you realtime monitoring and logs for each website and application to keep you on track of what's happening on every app running on the server.
ZaCloud automates the backup for every app in a very easy way to manage, you don't need to worry about anything related to the backup, and when we say backup, it's an offsite backup which keeps your data safe and secure.
Zacloud gives you an easy way to scale up and down your server, and clone the server or app from one place to another which helps you move between the staging environment to the production environment easily
Uploading source code is easy, you can upload it using Dropbox, GIT integration, CI/CD pipeline connection or even you can connect ZaCloud with an outside artifact registry to pull the image from there.
You even don't need to worry about docker or containerization or SSL certificates or anything, everything is auto-managed on the platform.
Managed databases: It is always a hassle how to manage your databases and guarantee it's up and running all the time you might buy different solutions from different providers that depending if you are using NoSQL or SQL database, with ZaCloud, you don't need to worry about that, we support most of the known databases and all are managed.
Finally: Cost, ZaCloud offers you many features to give you everything you need without charging you too much money that makes your pocket empty. Our managed VPS servers start from 7$ only!

ZaCloud integrates with different cloud providers such as Google Cloud, Linode, Vultr, and AWS to give you the freedom to buy the server you want from the provider you like.

Conclusion

I am happy to announce that today and tell you about what I experience last year that led me to build ZaCloud, I think we have great potential to give outstanding user experience to our users in the managed VPS hosting field, and soon we will support too many features that will blow your minds, I hope you try the platform today and give me your feedback, use the following coupon to try it for free 100-FREE-OFFER-ONE-MONTH

Typescript FP Dependency Injection Is Easy!

tareksalem — Fri, 28 Jul 2023 08:09:20 +0000

Doing Dependency injection using a framework or library is something easy to do, there some frameworks supports dependency injection out of the box either for frontend or backend, for example Nestjs supports dependency injection for backend development, and angular supports it with the same pattern for frontend development, and there are many libraries help you to do dependency injection.
But with all these packages and libraries they support a one pattern for dependency injection which is using classes, I think there is a clear reason behind that, dependency injection was driven from OOP programming languages like Java or C# and came to typescript/javascript with a similar syntax, and we as a js/ts developers didn't notice that Javascript doesn't support only one paradigm, it supports many paradigms, it supports OOP and Functional Programming!

The Story started when I joined a company was using FP like paradigm for building all backend functionalities using functions, but the code had a very clear problem, "The Code doesn't do dependency injection"
That's why I said it uses FP like because it doesn't follow all functional programming principles, the developers where just writing functions and use their dependencies directly inside the functions.
You may ask yourself what is the problem with this pattern? lemme list some problems we faced with this pattern

hard to test because to test one function you need to mock all the dependencies it needs, and we were using jest so we had a lot of jest.mock("../filepath") which make things hard to do different mocks for the same dependency
the code has side effects because all the functions are impure functions
hard to change the code base because if the function depends on another function and we want to replace this function with another one, we need to update all code parts that uses it, which means alot of refactoring just to change one function signature, that's why we need to use Inversion of control principle and dependency injection pattern so we will be able to depend on interfaces and types instead of concrete implementation, so anytime we want to replace the concrete implementation with another function we can change that function only!

Dependency Injection in Javascript/typescript

Doing dependency injection in javascript/typescript can be implemented easily if you are using classes with the help of some libraries like:

inversify
nestjs
typedi

and other libraries, but when it comes to functional programming, there is no many libraries doing that for functions, some people thought the dependency injection is applicable only in OOP, I wanna say that's wrong, it's applicable also in functional programming, there are many ways you can do that, I suggest to you read this article on Medium%20those%20dependencies%20as%20arguments.)
It has very nice information, but for now I will give you some ways you can do the dependency injection in pure javascript without any other dependencies

One of the ways you can do that is using Higher order function, but before giving an example, lets first define what is higher order function?

In a nutshell the higher order function is a function that accepts functions as parameters and returns another function.

In nodejs all of us know the concept of callbacks, basically the function that accepts a callback is considered a higher order function

fs.readFile('input.txt', function (err, data) {
   if (err) return console.error(err);
   console.log(data.toString());
});

as you see, the file system readFile method is a higher order function because it takes a callback as an argument and execute it.

In the same way, the Array functions like map, reduce, forEach and others are higher order functions, they accept a function to be passed as a parameter and execute them.

The other type of higher order function is the function that doesn't accept a function as an argument but it returns a function, you can think about it like a closure, which means a function scoped inside another function, and this is what we need to do dependency injection in our functions.

The concept is very easy, in OOP we have a class like this

class SomeClass {
  constructor() {}

  getUser(userId: string) {
    this.httpService.get('pathHere')
  }
}

we have getUser function, this function depends on something called httpService and the way to pass this service to the class is to inject it inside the constructor, so we can do something like this:

class SomeClass {
  constructor(httpService: HttpService) {
    this.httpService = httpService;
  }

  getUser(userId: string) {
    this.httpService.get('pathHere')
  }
}

In that way you can thing about the higher order function as a constructor in OOP, it knows how to return the inner function and knows what dependencies it needs so basically you can do something like this:

function getUser(httpService: HttpService) {
  return async (userId: string) => {
    const result = await httpService.get('pathHere')
  }
}

Now you are doing higher order function, and you also do dependency injection, so anytime you want to consume getUser function you can pass the dependency it needs and it returns a function you can execute it, so for example you consume it like this:

async function main() {
  const httpService = new HttpService();
  const user = await getUser(httpService)("1234")
}

We created an instance from the httpService and passing it to getUser higher order function and as you know, it returns another function so we pass the userId to that function.This is pretty awesome, because now you can test getUser function in an isolated way without knowing anything about httpService, so you could have unit testing like this:

describe('getUser Test Suite', () => {
   const mockedHttpService = {
     get: jest.fn()
   }
   const getUserFunc = getUser(mockedHttpService)
  it("testing getUser", async () => {
     mockedHttpService.get.mockReturnValue({ data: { userId: "1234" } })
     const user = getUserFunc("1234")
  });
});

You can pass anything in place of the httpService, and you can control how it acts without knowing anything about the concrete implementation of it, and you don't need to use jest.mock('modulePath') to mock specific module!

Is that enough to do dependency injection in real projects?

In real projects this pattern is good but it has one downside, which is passing the dependencies from one function to another. For example suppose getUser function is called from another function, now you need to inject the needed dependencies to that function and inject them in the outer function until you reach the project entrypoint, you will have something like this:

A function that fetches the user from an http service based on the username

// getUser.ts
function getUser(httpService: HttpService) {
  return async (username: string) => {
    const result = await httpService.get('pathHere')
  }
}

That function is called inside another function that says the user exist or not

// checkUserExists.ts
function checkUserExists(httpService: HttpService) {
  return async (username: string) => {
    const user = await getUser(httpService)(username)
    return user ? true : false;
  }
}

and that function is used inside createNewUser function that checks the user exist or not before creating it

// createNewUser.ts
function createNewUser(httpService: HttpService) {
  return async ({username}: {username: string}) => {
    const userExists = await checkUserExists(httpService)(username) 
    (username);
    if (userExists) {
      throw new Error("Duplicate user")
    }
   // create the user here
  }
}

function main() {
  const httpService = await new HttpService();
  await createUser(httpService)({ username: 'John' })
}

You may observed you need to pass the dependencies from the outer level to the inner level, this is may work in small scale, but it will be very hard to manage the flow of dependencies in large scale. also you need to know if the httpService is instantiated before or not, should be instantiated as singleton or transit

What to do to manage the dependencies?

There are two ways to do that:

compile time
runtime

The compile time dependency injection is used to manage the dependencies and pass all the needed dependencies before the program run, this is commonly used in compiled languages like golang.

The runtime dependency injection is used to do the injection of the dependencies at runtime, so when the application is instantiated then the dependencies will be started to be resolved and cached somewhere and injected in the functions/classes that depends on it. This pattern requires an important something called DI container you can consider it as a place where you put all the created dependencies inside it and start pick from it to resolve the functions/classes that use it.

InjectX

InjectX is built for dependency injection in functional programming, it's designed for that purpose, it uses the higher order functions paradigm to inject the needed dependencies automatically at runtime.

InjectX has three main components:

di container: a pool has all the resolved dependencies
InjectIn: a function that used to tell InjectX to inject the needed dependencies inside the higher order function
Bind: a function used to bind a dependency to the container.

Install InjectX

npm i injectx

You can also see the full documentation from here

Let's take the same example we had above. You will have a higher order function like this:

// getUser.ts
function GetUser(httpService: HttpService) {
  return async (username: string) => {
    const result = await httpService.get('pathHere')
  }
}

as you can see I just changed getUser to GetUser because each module I will export two functions

// getUser.ts
export function GetUser({httpService}: {httpService: HttpService}) {
  return async (username: string) => {
    const result = await httpService.get('pathHere')
  }
}
export const getUser = InjectIn(GetUser)

Let's explain what we are doing here, I export two functions here, the first one is the higher order function which expects some dependencies to be injected in and this function takes the dependencies as an object. The second exported function which is getUser is the resolved function. InjectIn basically takes the higher order function and passes the needed dependencies to it and returns the inner function of that higher order function with resolving all the needed dependencies, so you can use getUser function anywhere without the need to pass the needed dependencies

so you can have something like this

import { getUser } from './getUser'
async function main() {
  const user = await getUser("username")
}

As you can see, no need to pass httpService dependency to the function directly because it's injected using InjectIn function. Now all you need before calling getUser is to bind the HttpService to the container, and to do that you can use this:

import { GetContainer } from 'injectx';
const httpService = new HttpService();
GetContainer("default").Bind(httpService);

We talked about the container before, it's a place where you put the dependencies inside it and start picking what you need from it right? InjectX allows you to create multiple containers, why multiple containers and not only one container?
Suppose you have multiple modules like the following:

orders module
catalog module
auth module

and you want to separate between the dependencies of each module so your dependencies will be organized, then you can create multiple containers, each container is related to one module and you put that module dependencies inside the related container.
To do that you use GetContainer function which is a function exported from injectX, it asks injectX to get a container with specific name, if the container does not exist, then it will create a new one with the specified name
Then you can access another method called Bind which means you are telling inectX I want to append a dependency to that container so it will be available to the higher order functions.

If you are interested to know more about dependency injection in functional programming you can comment bellow and wait for the next part.

Thank you for reading

A Transparent Sfotware Piece

tareksalem — Sat, 27 May 2023 19:41:20 +0000

Transparency is an expression used in different aspects and refers to different meanings based on the context in which it is used, but besides all these meanings, it has one property that never changes, which is clarity and purity.

You may find transparency terms mentioned in software houses while dealing with clients; in many cases, it means that the software your company is building and its functionalities should be clear, obvious, trustable, and testable. The term doesn’t stop at this point; it also means that the company should be clear about deadlines, project milestones, and the quality of delivery. Although this is a very interesting topic, this is not what I mean by transparency from a software engineer's standpoint; the meaning of “transparency” in software goes beyond that!

Transparency In Functional Programming

It’s a good thing to take a look at what transparency means in functional programming because its concept is very close to what I mean.

Among all functional programming principles, there are two important concepts in functional programming:

purity I will talk about purity here in a short way, but you can search for it for more information. Purity means that each function is written in functional programming so that every time you give that function the same input, it should return the same output; it doesn’t have something in the middle that can change the result or return an undetermined result “side effect”. Purity is also meant to make the function self-contained without being affected by or affecting the outside world.
transparency Transparency is usually shipped with purity; if the code is pure, which means we are able to expect its output, then we can replace that code with its result without affecting the behaviour of the programme. For example, suppose we have a function that calculates the total price based on the given taxes.

func calculateTotalPrice(basePrice float64, taxRate float64) float64 {
    totalPrice := basePrice + (basePrice * taxRate)
    return totalPrice
}

totalPrice := calculateTotalPrice(50, 0.2)

So basically, if we wanted to replace the call of this function with the result, this would not affect the programme execution as follows:

totalPrice := 50 + (50 * 0.2)

The Transparency Principle in Software Engineering

Transparency is not meant for functional programming only, it’s a very good principle that should be followed in the whole software cycle. Transparency is not a specific design pattern you can follow; it’s a principle and term that consists of multiple patterns and paradigms that help you build transparent software.

Transparency starts with defining variables

Defining variables is considered the basis of any software project. You need to define variables that represent the data type you will work with, and these variables should be transparent at different levels

Transparent Data Type:
It’s very important to define the data type for each variable and not change that data type to make your programme transparent. This may seem normal in static-typed languages like Java, C#, Rust, and others, but in dynamic languages like Javascript, this is very important because the language itself allows these weird behaviours, which will lead later to untransparent code.
Transparent Data Structure:
data structure Transparency means you have a well-defined structure that shapes programme data. It doesn’t matter if it’s a database, an internal variable, or data being transferred over the network to other services; you should always have a transparent structure for data so that anyone can understand what these data refer to. Unstructured data may let you feel like you are free and can store whatever you want, but this will lead you to a big miss after a while if there is not at least a general structure for the data.
Namings:
The best way to give a description for something is to make that thing self-descriptive; this could be achieved by choosing the most valid and proper names for the business that the software serves. A very good thing could be included here, which is DDD’s “ubiquitous language” which leverages using a common language between business experts and developers, and that language should be represented in the code as well.

Transparent Code Structure

The code structure is another part of the software development process where you can achieve transparency. The meaning of transparent code structure is to make the project structure more clear, more obvious, more direct, and better describe the business.
A lot of patterns and principles exist in that area, one of them is building the project based on Clean Architecture that focuses on having entities that describe the business capabilities and rules, it’s commonly used along with DDD to build a solid architecture that identifies the business and puts the business rules in a more clear way that lets anyone joins the project to be able to understand what that project actually does.

Vertical slice architecture is another way for structuring the code to be aligned with Agile, so it allows you to build the project around the stories/use cases. For example, if you have an account microservice and there are some use cases as the following:

register
login so instead of putting the structure as layered architecture like controllers, services, and repositories/data access objects, you can divide the structure into use cases and inside each use case, you can encapsulate all the needed things to get that use case done. This allows anyone to navigate the code and understands the project by use cases also it will be easier to update the code because in each feature you have all the functions/classes/methods encapsulated there and there is a guarantee that the change you are doing will not affect other places because each use case is encapsulated. It leverages the single responsibility principle because now each use case actually is doing one and only one thing. Also, it reduces the dependency hell problem because now you will not have services depend on other services which leads to circular dependency problems that exist in traditional 3-tier architecture. Vertical slice architecture is commonly used with DDD to encapsulate business rules and constraints and surround them with business use cases/stories.

Domain-Driven Design Core Domain

tareksalem — Wed, 17 May 2023 02:46:57 +0000

Building real projects based on software is not as easy as putting some lines of code together and deploying them to a cloud. This might work for a specific period of time, especially for the first part of a project's lifetime. However, once you start adding more functionalities to the codebase, you will fast realize that the process is bigger than that.
As a software engineer, when you get hired or have a new project to work on, one of the most important questions you should ask yourself: what does the business actually do? This question is very important; because based on its answer, you will start writing the codebase that shapes the business functionality.
Unfortunately, finding a clear answer to this question has proved tricky in many cases. For me, I don't remember that I have worked on a project with a clear answer to this question! In this case, it is important to set with people who are responsible for the business to understand what this business actually does, and assess the needs of the company.
In Domain Driven Design (the book) by Eric Evans, he calls these people "domain experts". Domain experts means "a group of people who are very experienced in the field of the business that you are going to implement the software for". These people have the needed knowledge that should help you to transform business needs into a software with the same expectations.
While you are doing this, you should keep asking yourself the main question of what this business actually does and the purpose behind it.
Actually, these questions are very important to form an important concept that will help you: this concept is called "Core Domain".
Core domain means the end value a business provides to its customers that helps them do a specific thing or get a specific benefit. Core domain helps you achieve the competitive advantage needed for customers to leave your competitors and come to you.
For Example, if I came to you and told you: "I have a Pizza restaurant, and I want you to build software that helps me deliver my delicious Pizza to my customers and enable them to order online."
From a software engineering point of view, you will find this system has only one functionality, which is delivering the product to the customer. The type of the product is less significant at this point; the focus lies at an entity called Product, an entity called Order, and an entity called Customer.
This is pretty straightforward. So far, no extra advantage over the competitors has been provided. The reason is because there is simply no personalized experience for your customers. For example, a basic Pizza includes toppings, extras, and other unique Pizza ingredients (not used for other products!). Moreover, most products have dimensions, weight, and width that describe the product, while Pizza has sizes.
All these elements are unique to the product you sell; which should help you to focus on delivering an outstanding experience to your customers. This includes building a nice algorithm that helps find the nearest Pizza branch and the shortest path to get it delivered fast. This implies utilizing a delivery vehicle with a heated compartment, to ensure that your customers receive their Pizza piping hot every time!
Among these considerations, you need to focus on what a core domain is, and how the answer can help you build the proper software.

E-commerce is not a core domain

E-commerce is everywhere, yet it is applied in different ways. However, if you asked someone who works in an applied field of E-commerce "what is your business core domain?", the expected answer would be: E-commerce! Yet, this is not the right answer in all cases! But how?
Let's take Envato marketplace as an example. Envato is a known marketplace for selling already-made websites (e.g.: WordPress websites, code kits, and other software modules). If someone asked you "is Envato an E-commerce platform?" you would say: Absolutely yes! and this is right: it's an e-commerce. However, if the question was: is their core domain the E-commerce business? the answer might be different!
To understand their core domain, we first need to analyze their business and understand the most important feature they provide.
They provide, sell and buy software pieces.
This specific type of E-commerce is their core domain. They don't sell or buy anything. In fact, they only sell specific things, which are software pieces. This specific feature will help us understand what their core domain is.
You might ask yourself what they need to do to be unique in this field? For instance, do they need a multi-vendor platform to enable their customers to buy and sell?
If the answer is "no", due to the fact that multi-vendor websites are everywhere and anyone can publish a multi-vendor website to the internet and enable customers to buy and sell! The question goes:
Do they need an out-of-the-box support system for faster customer service? This might help, however, this support system could also be bought from another provider!
What they actually need is a unique software, built and customized for them to carry the following:
A licensing system that helps them manage the sold code usage.
A code scanning/reviewing tool that helps them identify the code quality for every code piece being sold on the platform and make sure it's authentic.

If you think deeply about their business you might come up with other keys that make them unique and starting from this point you will filter these keys to specify which exactly their core domain.

How to know if E-commerce is not the core domain?

As previously said, E-commerce is everywhere, and most websites today have an e-commerce aspect in one way or another. Some websites have subscription plans to access their services, others have digital products, and other websites sell their own physical products which means their core domain is the product they are manufacturing. This means that E-commerce might be a part of any business, but not necessarily the backbone of that business in most cases. However, there are a few cases where E-commerce is the core domain of the business. One of these cases is a platform like Amazon.

Summary

Identifying the core domain of a business will significantly help you build the most proper software for the problem you are trying to solve. Even if it's not clear to you at the beginning what the core domain is, you still need to think about the business deeply to identify the unique keys. Keep in mind that the core domain could be changed from one time to another based on the business directions and needs!

DTOs In Javascript

tareksalem — Mon, 09 May 2022 20:46:27 +0000

Introduction

Before we talk about the actual implementation, let's first give some introduction about DTO, what does it mean, when to use and the real need for it in javascript/nodejs projects

What is DTO

DTO stands for data transfer object which is meant by defining a container that contains group of values or fields not methods that explains how the data should be passed around the layers. Some people mixes between defining database models and DTO, remember this sentence:
DTO is meant for operations and data transferring however models meant for data persistence.

When To Use DTO?

Alot of developers go to DTOs when starting developing complex applications in typescript/nodejs to represent their data and how they are transferred throw layers of the application, and this actually true and required, but I am coming today to tell you this is also required in javascript/nodejs development to prevent your code be sucks!!

Why DTO in Javascript?

Imagine that you have a high level dynamic language like javascript and developing rest APis using nodejs, you started creating your models, data validations for example using express-validator and defined your routes, middlewares and everything is working fine. along the requirements are changing and you update the code frequently, you had multiple services and multiple APis consuming the same model in different ways and you are duplicating some fields in each service to pass them from controller layer to service layer and then to the layer which responsible on persisting data in database. After a while when you go to the code you will not understand what are data should be passed to the service layer and what are the data should be returned from this service, then here you need DTO.
Imagine also you are connecting to a firebase as a persistence database or document database without a strict schema and you have an endpoint that takes the data as json, doing some validations using express-validator and pass these data to service layer and then this service layer passes these data to persistence layer, your required fields are something as the following:

{username: String, email: String, password: String}

how do you guarantee that the APi consumer can send more fields rather than the defined fields? for example the consumer of the APi can send the following data:

{
  "username": "test",
  "email": "test@gmail.com",
  "password": "specificPass",
  "birthDate": "2022-05-09T20:12:13.318Z"
}

do you see here? I am able to send fields not defined in the validations which will violate our service, and these data will be passed to the persistence layer and saved unspecified data in the database.
Suppose also if you have an APi, and web socket connection that are consuming the same service layer, how will you define your validations for both? you could endup with duplication in defining your exposed data in both!

In all these cases you need DTO. The Idea behind it is very simple, it gives you the ability to describe how do you receive data and expose data in your layers.

Implementation and Example

Initially we will define an expressjs route as the following:

router.post("/user/register", validations, registerController);

and we will have the validations using express-validator as the following:

const validations = [
  body("username").exists().isString().notEmpty(),
  body("email").exists().isEmail(),
  body("password").exists().isString().notEmpty(),
]

Then you have the controller/handler as the following:

const registerController = (req, res) => {
  const result = await userService.registerUser(req.body);
  return res.status(200).json(result);
}

And your simple service layer as the following:

const registerUser = (userData) => {
  userPersistenceLayer.add(userData);
}

Now let's define our basic DTO, but before that let me ensure on two facts:

DTO is meant for data transferring and db model is meant for data persistence.
Think about DTO as a contract that you use to treat with others using this contract specifications.And the contract specifications are the defined fields inside it

class RegisterUserDTO{
  username;
  email;
  password;

  constructor(data) {
    this.username = data.username;
    this.email = data.email;
    this.password = data.password;
  }
}

Then we can go back to the service layer and use our defined DTO

const registerUser = (userData) => {
  userPersistenceLayer.add(new RegisterUserDTO(userData));
}

As you can see with this pattern we are controlling the way we pass data and ensure which fields are being passed to other layers, also we can set some getters and setters in this DTO to serialize/transform some data as needed.

Hope this reached you in a clean and smooth clarification for DTO pattern.

Getting started with Nodejs using Grandjs

tareksalem — Fri, 02 Oct 2020 22:23:13 +0000

In this tutorial you will get started with nodejs using grandjs for building scalable, solid server side applications in nodejs, typescript

What do you need before?

you just need basic knowledge in javascript, node js and express js

Tutorial

https://www.youtube.com/watch?v=FeGMDB4I5tI&list=PL6nDsSa1XozaV_8zsr9EYukTvSbGlfed1

Send Emails in node js using nodemailer, grandjs, and JSX components

tareksalem — Thu, 09 Jul 2020 19:10:18 +0000

Building server-side applications became easier after the revolution of single-page apps which clear the hassle from your backend code and your backend is no longer render views, and the UI is being rendered from the frontend, which gives your backend the freedom from using template engine and let your backend to focus on your REST APIs only.

This sounds good for most cases but about if you have a blog or eCommerce website and want to send emails to your users contains the latest news, products or even send to them a reminder for something, here the need to a template engine which you need to integrate it with nodemailer to render data inside it and then send this template to your users.
In this case, the first thing you will think about which template engine you can you use to accomplish this task without being a pain in rendering the data inside your template and do all of this frontend stuff, however you may be in the right way but you should be noted that the age of template engines in the backend has gone, and now is the age of JSX!

What is JSX

Simply JSX is a syntax that enables you to write HTML elements inside the javascript file without any need to use normal static HTML files or even use a template engine to render dynamic data inside HTML elements. It was introduced for the first time by reactjs to render HTML elements from javascript for your frontend application to build a single-page app.

Now JSX is not only used in frontend development but it also can be used inside your backend application. One of these frameworks that use JSX inside the backend is Grandjs which is a full backend framework that enables you to write JSX components to do server-side rendering or to use these components to render as mail templates!

About Grandjs

Grandjs is a full backend framework that enables you to build solid server-side applications based on nodejs, js, and typescript, and one of these powerful features is using JSX components to render HTML elements either for SSR or for sending email templates to your clients!
You can find the full documentation from here

What we will do?

In this article, I will just show you how to render an email template using nodemailer, JSX, and grandjs.

Note
You can use grandjs with any other server framework you use if you want to use it just for sending email templates

Install Dependencies

Just run the following command to install the following dependencies:

nodemailer
grandjs

npm i --save nodemailer grandjs dotenv

Then your project structure can be as the following

index.js
views
Mailer.js
data.json
.env

In index.js you just need to import View class from grandjs to set its configurations as the following:

const {View} = require("grandjs")

// set configuration for views

View.settings.set("views", "./views")

Then create a new component in views directory, this component will be called Newsletter.jsx

Note
the name of the component should be with .jsx extension
In each component you define in a file you should import View class as the following:

const {View} = require("grandjs");

After that we will define our styles as js object as we do in reactjs

const Styles = {
    body: {
        backgroundColor:"#ccc",
        margin:"0px",
        padding:"0px"
    },
    section_one: {
        padding:"30px",
        margin:0
    },
    container: {
        maxWidth: "600px",
        margin:"0 auto",
        backgroundColor:"white",
        fontSize:"0px",
        padding:"0px",
        fontFamily:"'Roboto',sans-serif",

    },
    header: {
        textAlign:"center",
        height:"50px",
        padding:"0px",
        margin:"0px",

    },
    headerline: {
        backgroundColor:"#E6FFF7",
        textAlign:"center",
        fontSize:"20px",
        color: "#333",
        lineHeight: "40px",
        fontWeight:"400px",
        margin:"0px",
    },
    img: {
        display:"inline",
        width:"25%",
        verticalAlign:"middle",
    },
    paragraph: {
        display:"inline-block",
        fontSize:"14px",
        fontWeight:"300",
        color:"#666",
        width:"calc(75% - 40px)",
        padding:"0 20px",
        margin:"0",
        lineHeight:1.4,
        verticalAlign:"middle",

    },
    btn: {
        display:"block",
        backgroundColor:"#29F0C2",
        fontSize:"18px",
        color:"white",
        padding:0,
        margin:"30px auto 0",
        border:0,
        borderRadius:"5px",
        lineHeight:"40px",
        height:"40px",
        width: "200px",
        textAlign:"center"
    }

}

Then you can define your jsx component as a functional component as the following:

const {View} = require("grandjs");

const NewsLetter = () => {
     <div>
      <body style={Styles.body}>
        <div
        style={Styles.container}
        >
          <div
          style={Styles.header}
          >
            <h1>Your daily News is here!</h1>
          </div>
          {data.news.map((item) => {
              return (
                <div>
                <h2
                style={Styles.headerline}
                >
                  {item.title}
                </h2>
                <div class="section_one" style={Styles.section_one}>
                  <img
                    src={item.img}
                    style={Styles.img}
                  />
                  <div
                    class="paragraph"
                    style={Styles.paragraph}
                  >
                    {item.description}
                  </div>
                  <a
                    href={item.link}
                    class="btn"
                    style={Styles.btn}
                  >
                    Read Article
                  </a>
                </div>
              </div>

              )
          })}          
          </div>
      </body>
    </div>

}

So the final file would be as the following:

const { View } = require("grandjs");


const Styles = {
    body: {
        backgroundColor:"#ccc",
        margin:"0px",
        padding:"0px"
    },
    section_one: {
        padding:"30px",
        margin:0
    },
    container: {
        maxWidth: "600px",
        margin:"0 auto",
        backgroundColor:"white",
        fontSize:"0px",
        padding:"0px",
        fontFamily:"'Roboto',sans-serif",

    },
    header: {
        textAlign:"center",
        height:"50px",
        padding:"0px",
        margin:"0px",

    },
    headerline: {
        backgroundColor:"#E6FFF7",
        textAlign:"center",
        fontSize:"20px",
        color: "#333",
        lineHeight: "40px",
        fontWeight:"400px",
        margin:"0px",
    },
    img: {
        display:"inline",
        width:"25%",
        verticalAlign:"middle",
    },
    paragraph: {
        display:"inline-block",
        fontSize:"14px",
        fontWeight:"300",
        color:"#666",
        width:"calc(75% - 40px)",
        padding:"0 20px",
        margin:"0",
        lineHeight:1.4,
        verticalAlign:"middle",

    },
    btn: {
        display:"block",
        backgroundColor:"#29F0C2",
        fontSize:"18px",
        color:"white",
        padding:0,
        margin:"30px auto 0",
        border:0,
        borderRadius:"5px",
        lineHeight:"40px",
        height:"40px",
        width: "200px",
        textAlign:"center"
    }

}
const Newsletter = ({data}) => {
  return (
    <div>
      <body style={Styles.body}>
        <div
        style={Styles.container}
        >
          <div
          style={Styles.header}
          >
            <h1>Your daily News is here!</h1>
          </div>
          {data.news.map((item) => {
              return (
                <div>
                <h2
                style={Styles.headerline}
                >
                  {item.title}
                </h2>
                <div class="section_one" style={Styles.section_one}>
                  <img
                    src={item.img}
                    style={Styles.img}
                  />
                  <div
                    class="paragraph"
                    style={Styles.paragraph}
                  >
                    {item.description}
                  </div>
                  <a
                    href={item.link}
                    class="btn"
                    style={Styles.btn}
                  >
                    Read Article
                  </a>
                </div>
              </div>

              )
          })}          
          </div>
      </body>
    </div>

    );
};

module.exports = Newsletter;

After that, I will create a file called data.json, this file will includes the mails that we want to send to and the news that we want to send as the following:

{
    "users": ["user@email.com"],
    "news": [
        {
            "title": "React Infinite Scroll Tutorial: With and Without a Library",
            "img": "https://res.cloudinary.com/practicaldev/image/fetch/s--a8DByl-W--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--1QH-jSvc--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/ttz2sso79x6cl7chdjml.jpg",
            "description": "Infinite scroll is a modern web & application design concept that loads content continuously as the user scrolling down the page. It changes the function of pagination.",
            "link": "https://dev.to/syakirurahman/react-infinite-scroll-tutorial-with-and-without-a-library-1abg"
        },
        {
            "title": "React App with Tailwind CSS / Emotion / Twin Macro",
            "img": "https://res.cloudinary.com/practicaldev/image/fetch/s--lmHWjUIc--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--atZRMw7r--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/zbydh2m62o81na2n5fq8.png",
            "description": "I'll explain how install and configure Tailwind CSS / Emotion and twin.macro in a Single Project of React to improve the way we use styles in our projects.",
            "link": "https://dev.to/angelcodes/react-app-with-tailwind-css-emotion-twin-macro-3dpe"
        },
        {
            "title": "Currying in JavaScript",
            "img": "https://res.cloudinary.com/practicaldev/image/fetch/s--UvT9Kb3S--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--vw8755uu--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/viplwlivvz3xxahdycac.png",
            "description": "Currying is a process in functional programming in which we can transform a function with multiple arguments into a sequence of nesting functions. It returns a new function that expects the next argument inline.",
            "link": "https://dev.to/suprabhasupi/currying-in-javascript-1k3l"
        }
    ]
}

Then we will create Mailer.js which will be a class responsible for sending emails
Firstly we will import View class from grandjs, View has a built-in method called importJsx that enables you to import JSX component into javascript file as the following:

const { View } = require("grandjs");
const NewsLetter = View.importJsx("./views/Newsletter.jsx");

Then we will require data.json file that contains our data:

const data = require("./data.json");

We will use Google account to send the emails and the mailer configuration will be something like the following:

class Mailer{

    constructor() {
        this.config = {
            secure: true,
            service: "Gmail",
            host: "smtp.gmail.com",
            port: 465,
            auth: {
                user: process.env.MailUsername,
                pass: process.env.MailPassword
            }
        }
    }
}

As you can see, we read user and pass from process.env because we will pass these secret data as environment variables in the .env file and load this file using dotenv package

Then we will create a method inside Mailer class, this method will be called sendNewsLetter as the following:

async sendNewsLetter() {
        try {
            console.log(data.users, this.config)
            const transporter = NodeMailer.createTransport(this.config);
            let template = View.renderToHtml(NewsLetter, {data})
            const mailOptions = {
                from: this.config.auth.user,
                to: data.users,
                subject: "Daily News",
                html: template,
            };
            await transporter.sendMail(mailOptions);
            console.log("mail sent successfully");
        } catch(err) {
            console.log(err);
        }
    }

As you can see above we use another function inside View, this function called renderToHtml which enables you to convert the written JSX component into normal HTML elements as a string, then you will be able to send this HTML string as mail template.

Then we specified the mail options such as from which means from which email that this mail is sent, to, which represents the targeted emails and this can be a string or an array, and the subject and finally the HTML template
The final Mailer file can as the following:

const { View } = require("grandjs");
const NodeMailer = require("nodemailer");
const data = require("./data.json");
const NewsLetter = View.importJsx("./views/Newsletter.jsx");

class Mailer{

    constructor() {
        this.config = {
            secure: true,
            service: "Gmail",
            host: "smtp.gmail.com",
            port: 465,
            auth: {
                user: process.env.MailUsername,
                pass: process.env.MailPassword
            }
        }
    }
    async sendNewsLetter() {
        try {
            console.log(data.users, this.config)
            const transporter = NodeMailer.createTransport(this.config);
            let template = View.renderToHtml(NewsLetter, {data})
            const mailOptions = {
                from: this.config.auth.user,
                to: data.users,
                subject: "Daily News",
                html: template,
            };
            await transporter.sendMail(mailOptions);
            console.log("mail sent successfully");
        } catch(err) {
            console.log(err);
        }
    }
}


module.exports = new Mailer();

Then in index.js we will update it to load our .env file as the following:

require("dotenv").config();
const {View} = require("grandjs")

View.settings.set("views", "./views");

Then import the Mailer.js file as the following:

const Mailer = require("./Mailer");

Then just call sendNewsLetter function to send the mail

require("dotenv").config();
const {View} = require("grandjs")

View.settings.set("views", "./views");

const Mailer = require("./Mailer");

Mailer.sendNewsLetter();

Now you just need to create .env file and define the following variables inside it:

MailUsername=your_sender_email
MailPassword=your_sender_email_password

Now you can run your application by giving the following command:

node index

the mail template is sent now!

Grandjs Version 2 Is Here

tareksalem — Sun, 19 Apr 2020 21:30:37 +0000

It's an awesome feeling to see something you have built one year ago gaining popularity and new people use it every new day!
Grandjs now has about 6k downloads on npm, thanks all ❤️

Grandjs Version 2 is here!! the Promising node js framework that will turn the nodejs frameworks race!

If you didn't hear about grandjs before, you can read the documentation of the project on GitHub from here or read this introduction

What is new in grandjs ?

Grandjs now had fully rewritten in typescript with major updates in the performance and architecture, however, it stills exposes the same API.
Grandjs now is available for javascript or typescript applications
Grandjs don't require any compilation step if you work with it in javascript
Grandjs follows Object inheritance and oop in building routes which will be good to use the same routers for different uses without any problem (don't repeat yourself!)
Grandjs now supports many different express js packages so you can use the same packages you used to use with express
Grandjs is suitable for developing with typescript which enables you to write strong routing architecture!
Grandjs exposes a new way for rendering dynamic HTML Markup using JSX syntax for server-side rendering, so instead of using template engine and search about helpers and methods, you can write jsx functional component and render them with grandjs without transpile or compilation steps, components are rendering on the fly!! Also, this happens without a need to react
Grand now gives you the choice to use native parsers for request body and uploading files or use packages like body-parser and express-fileupload
Also it supports many packages like cookie-parser, session, flash messages, morgan and many other, we are working now to make it compatible with all packages!

Writing JSX in Grandjs Example

firstly install Grandjs by the following command

npm i grandjs

Then create index.js file and import grandjs as the following

const {Server, Router, View} = require("grandjs/lib");

As you can see, we imported Server to create the server, Router to extend and build our router and View which is a class responsible for building, rendering the JSX components

Then create a folder called views or any name you want and add these two components

Home.jsx
Body.jsx In each JSX file, you have to require View class to tell grandjs to recognize that this is a JSX component and parse it correctly.

In Body.jsx I will write the following

const {View} = require("grandjs/lib");
const Body = () => {
   return (
      <div>
        <h1>This is Grandjs JSX Body</h1>
      </div>
   )
}
module.exports = Body

Note
As you can see from the code above, there is some points you have to know

import/require View class in each jsx file to tell grandjs that this is a component will be rendered
The component should be a stateless function component return jsx syntax
The Component should be exported using module.exports which is the commonjs export syntax

In Home.jsx file I will write the following

const {View} = require("grandjs/lib");
const Body = View.importJsx("./Body.jsx");
const Home = (props) => {
   return (
     <html>
       <header>
         <title>Grandjs Home Page</title>
       </header>
       <body>
         <h1>{props.message}</h1>
         <Body/>
       </body>
     </html>
   )
}
module.exports = Home;

As you can see, we are writing normal functional component which can accept properties and data as a parameter, you can also note that we can import components inside another component file, this can be happen using a function in View object, this function called, importJsx.

Then in index.js file, we should set the folder path that our views will be exist inside as the following:

const {Server, Router, View} = require("grandjs/lib");
//set the path of the jsx folder
View.settings.set("views", "./views")

inside index.js file we will build our server and routes as the following:

const {Server, Router, View} = require("grandjs/lib");
//set the path of the jsx folder
View.settings.set("views", "./views")
const Home = View.importJsx("./views/Home.jsx");
class HomeRouter extends Router{
  constructor(options) {
     super(options);
     // push router
     this.getRouters.push(this.getHomePage())
  }
  getHomePage() {
    return {
       url: "/",
       method: "GET",
       handler: (req, res) => {
         // set status and render
         return res.status(200).render(Home, {message: "This message from render method"})
       }
    }
  }
}
// instantiate home router
const homeRouter = new HomeRouter({base: "/"});
// build the router to be ready for consuming
homeRouter.build();

// set the port
Server.setConfig({port: 3000});
// init the server
Server.initServer();

As you can see, it's a normal router, which includes one route on /url whith GET method.
Inside the handler of this router, we use a method called res.render, this method takes two parameters as the following:

Component: This is the first parameter, which is the component you want to render
Data: Object contains the dynamic data you want to pass to the component to be rendered in the HTML

Now Run your application and enjoy!!
Run command:

node index

Navigate to localhost:3000, and see the result!

What is next in grandjs?

We are now working to make the framework compatible with Deno which is the new vision about nodejs and javascript!
Graphql support

Thanks guys for reading this article, and support ❤️

You can find the project on github here

NPM Package here

I will be so happy if you want to contribute us ❤️

Transition from a monolithic application to microservices

tareksalem — Fri, 13 Mar 2020 11:02:16 +0000

Software development is not just about writing coding on IDE and runs that code to get the result, writing code is the last step you can do especially if you are developing a backend application.

Writing web applications is super easy if you are building a traditional web app that gets data from the database and does some processes and then renders HTML content to the browser as a response, this was the traditional and the old way of building web applications. Everything has changed since the javascript frameworks revolution, new frameworks and libraries are introduced for frontend developers such as angular and react, this made your codebase is separated between frontend and backend, your backend now is focusing on the complex logic, database and replacing HTML responses with JSON response.

This is the start for building REST APIs that can be consumed from different types of users and clients such as frontend apps, mobile apps event other backend apps.
Now everything is cool, you are now free from the monolithic app!!
Yes, your code now is distributed on client apps such as browser apps or mobile and your backend but will happen if your backend is consumed heavily and your database became large and it's not possible to exist on a single machine?

Here microservices come to solve your issues but how?

Maybe you thought that your application now is not a monolithic app, but the reality is that it was a step to freedom from the monolithic app, but you still on the same row.

Inside your application, you still have one app that serves all kind of users and requests with one database, however, you can distribute your code on different machines and systems to keep your backend extensible and easy to maintain and develop.

How does this happen?
Imagine that you are building a social media app that includes admin portal to manage the app, mobile app, and web app, also you have different types of users such as admin and user, also have different types of actions and functionalities like Facebook, you have videos, images, posts, followers, followings, pages, ads and more, How you can handle all that in a single codebase, backend, and machine!!

Absolutely it's impossible to develop, maintain, monitor and test all these functionalities in single backend codebase and machine this leads you to microservices architecture.

What is microservices?
The meaning is derived from the term itself, it's a micro which is small units and services which implies a group of different small services, each service does a single function or a group of small functions which let this microservice work independently.

As the previous definition, we can rethink how can we make a reliable social media app like Facebook based on the microservices concept?

We can divide this application into small services to achieve the microservices concept, so we can make a service for chats and messages, service for profiles, service for pages, service for ads, service for AI and content suggestion and finally service for listing your feeds.

This is amazing, now you have different services and each service can work independently on a separate machine, a container with its own resources so the application now can be distributed over several machines and may over datacenters!
But there is a problem here, how can these services share and get the same data to be used in a different way in each service?
For Example, the feeds services need some information about you to know the type of feeds you would like to see, friends information to get their posts and list them to you and some other things the service might need to know, however, this data does not exist in this service so how can we do this task?

After achieving the first step which is distributing the application on multiple systems and machines to build microservices, you now need to distribute your database over multiple machines and systems, which will lead you to the next article 😆
see you later ❤️

Build nested routes in nodejs using grandjs

tareksalem — Fri, 06 Mar 2020 09:39:35 +0000

Hi, it's long time since last article I wrote here about grandjs framework which is a promising nodejs framework for building scalable, maintainable and fast backend web applications, today I came with new amazing feature has been added to grandjs!
Here is the repo of the project on github to fork and contribute us

tareksalem / grandjs

A backend framework for solid web apps based on node.js

# Grandjs A backend framework for solid web apps based on node.js

You want to build a solid web application but you don't want to use express and a lot of packages you need to build a basic website, Grandjs is one framework includes all main functionalities you need to build amazing, solid and secured web application without need for a ton of packages and libraries.

Grandjs is built for solid and extended web apps

Prerequisites

1- you need to install node.js on your system 2- init a new project using npm, so then we will be able to install this framework

Features

fewer packages and more productivity
Framework includes the most needed functionalities to build a perfect web app
depends on Handlebars template Engine which is friendly with many developers
solid routing system built on Javascript object-oriented programming and you can extend it as you need
controlled handling for…

View on GitHub

If you tried Grandjs before, maybe you found that grand js is based on OOP and ES6 class implementation to build your routes, as long as you may asked yourself how do you can include router inside router to make the hierarchy of your routes much easier!

so for example we have a basic router that is working on the following url / also we have an admin that it works on /admin, this admin has a lot of routes, such as categories CRUD operation, products CRUD operation and users CRUD operation. At the first time you think may you will implement this scenario inside one router class contains all routes as the following:

const {Router} = require("grandjs");
class AdminRouter extends Grand.Router{
    constructor(props) {
        super(props);
        this.getRouters = [
            this.listCategories.bind(this)(),
            this.indexCategory.bind(this)(),
           this.listPosts.bind(this)()
           this.indexPost.bind(this)()
           this.showUsers.bind(this)()
           this.indexUser.bind(this)()
        ];
        this.postRouters = [
           this.addPost.bind(this)(), 
           this.addCategory.bind(this)(),
           this.addUser.bind(this)(), 
        ];
        this.putRouters = [];
        this.patchRouters = [];
        this.deleteRouters = [];
    }
    listCategories() {
       return {
          url: "/categories",
          method: "GET",
          handler: (req, res) => {
             return res.status(200).json({data: []})
          }
       }
    }
    listUsers() {
       return {
          url: "/users",
          method: "GET",
          handler: (req, res) => {
             return res.status(200).json({data: []})
          }
       }
    }

    listPosts() {
       return {
          url: "/posts",
          method: "GET",
          handler: (req, res) => {
             return res.status(200).json({data: []})
          }
       }
    }
    indexCategory() {
       return {
          url: "/categories/:id",
          method: "GET",
          handler: (req, res) => {
             return res.status(200).json({data: {}})
          }
       }
    }

    indexPost() {
       return {
          url: "/posts/:id",
          method: "GET",
          handler: (req, res) => {
             return res.status(200).json({data: {}})
          }
       }
    }

    indexUser() {
       return {
          url: "/users/:id",
          method: "GET",
          handler: (req, res) => {
             return res.status(200).json({data: {}})
          }
       }
    }

    addCategory() {
       return {
          url: "/category",
          method: "POST",
          handler: (req, res) => {
             console.log(req.data);
          }
       }
    }
    addPost() {
       return {
          url: "/post",
          method: "POST",
          handler: (req, res) => {
             console.log(req.data);
          }
       }
    }
    addUser() {
       return {
          url: "/user",
          method: "POST",
          handler: (req, res) => {
             console.log(req.data);
          }
       }
    }

}

Imagine that all these routes will be inside the same router class, it will be hard to maintain and adding new routes, which will lead you to build separate routes for each feature, so for category routes, you will build a routing class and another routing for posts and the same for users.
Until now everything is fine, but how to add all these routes under /admin base router !!!?
Here is the solution:
Grandjs offers to you a method called useRouter which is a function you can call inside the class or outside it to add new routes to the main class, so simply you will create your routes files that will be added under /admin path and inside admin router you will use useRouter method to add nested routes inside it

//define category routes
class CategoryRouter extends Grand.Router{
   constructor(props) {
      super(props)
   }
}

class PostRouter extends Grand.Router{
   constructor(props) {
      super(props)
   }
}

class AdminRouter extends Grand.Router{
   constructor(props) {
      super(props)
      //use category router
      this.useRouter(CategoryRouter)
      // use post router
      this.useRouter(PostRouter)
   }
}

as you can see above, it's super easy to implement a group of routes inside another router, you can add infinity nested routers without any problem, also you can define a specific base url for each nested router!!
You may ask now How can I add base url for each nested router!!!!
My friend it's super easy in grandjs, what you need is defining the following property inside the class:

this.base = "/nestedbaseurl"

so once you do that, all the routes inside this class will be added to the base however you instantiate this class or use it inside another one!
So if you think about how to apply that on the above example it will be something like that:

//define category routes
class CategoryRouter extends Grand.Router{
   constructor(props) {
      super(props)
      this.base = "/cat"
   }
}

class PostRouter extends Grand.Router{
   constructor(props) {
      super(props)
      this.base = "post"
   }
}

class AdminRouter extends Grand.Router{
   constructor(props) {
      super(props)
      //use category router
      this.useRouter(CategoryRouter)
      // use post router
      this.useRouter(PostRouter)
      this.base = "/admin"
   }
}

each url implemented in admin router will be working in this url /admin/*, and to access category routes will be on the following url /admin/cate/*
and to access post router routes it will work on /admin/post/*.

As you can see, it'super easy to extend your routes, so using grandjs you can write super-extended, extensible and easy to maintain backend application using nodejs.

you can find more examples, and play with grandjs on replit on the following url:

previous tutorials:

Learn nodejs using grandjs framework crash course

tareksalem ・ Feb 8 ・ 1 min read

#node #webdev #javascript #grandjs

Grandjs New Features

tareksalem ・ Jan 22 ・ 4 min read

#node #javascript #webdev #grandjs

Getting Started with Grandjs

tareksalem ・ Dec 20 '19 ・ 4 min read

#node #javascript #backend #webdev

Learn nodejs using grandjs framework crash course

tareksalem — Sat, 08 Feb 2020 13:51:13 +0000

Hi All,

It's Grandjs again, now you can learn grandjs fundamentals and basics for building amazing, scalable, flexible web applications using nodejs.

Here is the first grandjs course on Youtube, hopefully, enjoy!

Whatch on youtube:
https://youtu.be/Y3bCFqdeq3k

Grandjs New Features

tareksalem — Wed, 22 Jan 2020 01:24:30 +0000

If you like building new things and collaborate on new projects, please don't hesitate to join Grandjs community on GitHub by contributing us and starring the project to gain more popularity.
I talked here several times about a promising nodejs framework is coming to the web development track, this framework is called grandjs, it's super easy, fast to start and implement and extendable.

One of the most important things in Grandjs is permanent development and implementing new features, so I am here today to introduce to you the new features in grandjs.

Grandjs Now implements uploading files

When I started nodejs development it was about for years ago, I remember the first way I wrote a javascript code to build a website that has the ability to upload files, I used multer package at this time, it was amazing and easy to use but when I learned nodejs I realized that am a developer who needs more than flexible package to upload files to system, check these files and save them if I want instead of uploading junk files and then delete the image if it doesn't match the validation as what was happening in multer, then express-fileupload package appeared and it was more suitable for me but I still wanted more flexibility, here is the flexibility that Grandjs came with, it's super easy to upload files, access them and save these files in different ways, let's see the following example:

postAdminPage() {
    return {
        method: "post",
        url: "/admin/uploadInfo",
        handler: (req, res) => {
            console.log(req.files) //output {} contains all uploaded files
        }
    }
}

it's just a property you call from request object, all this stuff and the file is not saved yet on our server which makes your website more secure and clean from junk files, req.files is an object contains the uploaded files every file is a property with the sent field name, it contains many properties allows you see all information about that file easily

{
      name: 'images' // the name of the filed,
      filename: 'download (1).jpeg' // original file name,
      data: <Buffer> // the file content as buffer,
      size: 14473 // size of file,
      extension: '.jpg' // the extension type of file,
      mimetype: 'image/jpeg' // mime type of file,
      stream: [Duplex] // ability to use this file to stream it,
       headers: [Object] // the sent headers with this file,
      byteOffset: 147,
      byteCount: 27975 // bytes count
}

if you can see, you have the name of the field, filename which is the original filename, data which is the buffer of the file to use it to write the file on the server, size property which incarnates the file size, mimetype which is the type of file to check easily on it and extension of the file to make any condition you want on the uploaded file.

One of the most amazing things in this file upload is the ability to use the stream property of the uploaded file to pipe it to any writable stream such as writing it in a file in the system or pipe it to a response or doing anything you want.

Global Middleware in Grandjs

here is the second major feature added in grandjs v 1.3.0. The ability to add global middlewares to the whole application before executing any routes, it helps you to add some settings, make conditions on the requests, enable cors, or injecting dependencies inside the app.

Grandjs.use((req, res, next) => {
    // continue
    return next();
});

Grandjs.use is a function that takes one argument which is a function that has three parameters request, response, next. next here is a function can be executed to allow the application to go to the next middleware or executing the matched router.

Grandjs Validation Library

we created a newly separated package under the name of grandjs, this package is responsible for validation works, it's still under updates and enhancements but one of the amazing features in this package is the ability to create a schema for your incoming data!

maybe you now ask yourself why creating schema however I have mongoose schema !!
yes, you are right, but I think there is a misunderstanding.
When you build a new application based on nodejs, you start choosing the packages that you will use in the app, and one of these packages surely is a validation package which will be used in middlewares to validate the incoming data before working on these data and passing them to the database and that is exactly what grand-validator does.

Grand-validator trying to validate your data in different ways, the published way until that is creating a schema and model for the data and then call validate method to validate the incoming data against the schema, this step returns to you an array of the smart validation objects contain a message, a field name that has the error, the type value should be and the current type of the wrong field.

Example

var userSchema = new Schema({
    name: {
        type: String
    },
    email: {
        type: String
    },
    age: {
        type: Number
    }
})
// validate the schema
userSchema.validate({
    name: "tarek",
    email: "tarek@gmail.com",
    age: 20
})

These were the major features added to Grandjs version 1.3.0, please don't hesitate to support us on github and npm, also don't forget to try it and give us the feedback, thank you.

grandjs on Github: Grandjs
grandjs on NPM: Grandjs

grand-validator on Github: grand-validator
grand-validator on NPM grand-validator