DEV Community: Yasser Ameur el idrissi

⚡A powerful HTTP router and URL matcher for building Deno web servers with dragon 🐲.

Yasser Ameur el idrissi — Thu, 14 Jan 2021 20:42:59 +0000

Dragon is a simple, fast and low HTTP router and URL matcher for building Deno servers. If you need performance and good productivity, you will love it.

Dragon is exchangeable with other web application frameworks for the backend the same way as React.js is exchangeable with Vue.js and Angular.js when it comes to frontend applications.

That being said, let’s now move further with this article and find out the various features of this framework. Below I have picked out a few of the most important features of Dragon:

Lightweight and modular design allows for a flexible framework.
Focus on high performance.
Middleware support, incoming HTTP request can be handled by a chain of middlewares and the final action.
It helps in simplifying the configuration and customization steps for the application.

These were a few of the major advantages of using Dragon in web application development. Let's start by using Dragon in your Deno application.

First things first let's install Deno. I am on a Ubuntu OS so I am using Shell. Simply open your terminal and type:

curl -fsSL https://deno.land/x/install/install.sh | sh

Next step is specifying Deno’s path to bash.

nano ~/.bashrc
export DENO_INSTALL="/home/$USER/.deno"
export PATH="$DENO_INSTALL/bin:$PATH"

Once you have it installed, close the terminal, open a new one, and type:

deno --version

It should output something like this:

deno 1.6.3 (release, x86_64-unknown-linux-gnu)
v8 8.8.294
typescript 4.1.3

💬 If you are using a different operating system, just head over to deno.land installation. They have a lot of ways you can easily install it on your machine.

Awesome!

Let's move ahead

Create a new folder and call it dragon_demo (but you can call it anything you want)
Once you create a folder simply cd into your new project. Create a file called server.ts.

In your src/server.ts TypeScript file, use the following code to import Dragon, to create an instance of an Dragon application:

import { Application, RequestMethod, HttpRequest, HttpResponse } from "https://deno.land/x/dragon@v1.1.0/lib/mod.ts";
const app = new Application();

app.listenAndServe({ port: 8080 });

console.log("🐉 Serveur listining");

Let's run this file. Open your terminal and in your project root folder type:

$ deno run --allow-net server.ts

💬 Deno is secure by default. Therefore, unless you specifically enable it, a deno module has no file, network, or environment access for example.

You should get something like this:

🐉 Serveur listining

When you run deno run ---allow-net <file_name> in your terminal, Deno will look at all your imports and install them locally in your machine if they are not there.

The first time you run this it will go to this URL https://deno.land/x/dragon@v1.1.0/lib/mod.ts and install the dragon package.

In the next line we do this:

const app = new Application();

This creates a new instance of our application with various options, and it will be the basis of everything as you progress further in this tutorial.

An instance of application has some optional properties as well:

hostname: A unique name for a computer or network node in a network. This defaults to 0.0.0.0.
port: Numbers used by protocols for operation of network applications.
certFile: A concatenation of all Certificate Authority (CA).

🖇 Learn more about application options

Then we write:

app.listenAndServe({ port: 8080 });

Here the port number and tell Deno to listen to the port, which is 8080.

Let's register two routes mapping URL path to handler.

💬 We believe development must be an enjoyable and creative experience to be truly fulfilling (HttpRequest, HttpResponse) as parameters.

const r = app.routes();
  r.Path("/hello")
  .withMethods(RequestMethod.GET)
  .handleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
    ResponseWriter.withBody("Hello Dragon").end();
  });

We create a new router instance by doing const r = app.routes(); and then we create a new route called hello which is of type RequestMethod.GET. If an incoming request URL matches one of the paths, the corresponding handler is called passing.

💬 By default Dragon all methods for this route(s) like PUT, DELETE, PATCH

And now we are done. ✅ Let's run this and see what we have:

$ deno run --allow-net server.ts

Now open your favorite browser and go to http://localhost:8080/hello. You will see something like this:

Hello Dragon

Awesome

Honestly the hardest part is done. Conceptually we are 50% there.

Now we only have two things remaining:

Add a not found route so that when the user tries to access an unknown route.
Add a logger middleware that consoles the response time.

Using the notFoundHandler options you may define a route that will be executed when no other route matches the incoming request.

const fallback = async function(Request: HttpRequest, ResponseWriter: HttpResponse) {
  ResponseWriter.html`🤦 Page Not Found`.end();
  return MiddlewareState.Cancel;
}

const r = app.routes({
  notFoundHandler: fallback
});

fallback is a Middleware literally means anything you put in the middle of one layer of the software and another. As you can see fallback has access to the HttpRequest and HttpResponse. Middleware can either terminate the HTTP request or pass it on to another middleware function using MiddlewareState.Next or MiddlewareState.Cancel

Let's see if this works.

Restart the server:

$ deno run --allow-net server.ts

Open up a new tab Set the request to GET and in the URL bar type http://localhost:8080/something-unknown.
You should get something like this:

🤦 Page Not Found

Logging Response time in console, create a new file called logger.ts and enter the following code:

import { HttpRequest, HttpResponse, MiddlewareState } from "https://deno.land/x/dragon@v1.1.0/lib/mod.ts";

export const Logger = async function(Request: HttpRequest, ResponseWriter: HttpResponse) {
  //
  console.log(`Handle at: ${Date.now()}`);
  return MiddlewareState.Next;
}

In your server.ts file add this code:

Now let's import and register the middleware.

import { Application, RequestMethod, HttpRequest, HttpResponse } from "https://deno.land/x/dragon@v1.1.0/lib/mod.ts";
import { Logger } from "./logger.ts"; 

const app = new Application();

const r = app.routes({ maxRoutes:2 });

r.Path("/hello")
 .withMethods(RequestMethod.GET)
 .handleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.withBody("Hello Dragon").end();
  }).middleware(Logger);

app.listenAndServe({ port: 8080 });

console.log("🐉 Serveur listining");

I hope that you found this article useful and that it was able to help you learn something today.

If you are interested in joining the dragon team to improve the framework, You are welcome.

A Star 🌟 on our github repository could be a good and very feedback for us.

A powerful HTTP router and URL matcher for building Deno web servers with dragon🐉.

Yasser Ameur el idrissi — Fri, 08 Jan 2021 22:59:49 +0000

What I built

I built a simple, fast and low HTTP router and URL matcher for building Deno servers.

Category Submission:

framework, middleware, http-matcher, deno, server

App Link

https://github.com/xanny-projects/dragon

Screenshots

import { Application, RequestMethod, HttpRequest, HttpResponse } from "https://deno.land/x/dragon@v1.0.6/lib/mod.ts";

const app = new Application();

const r = app.routes({ maxRoutes:2 });

r.Path("/hello")
 .withMethods(RequestMethod.GET)
 .handleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.withBody("Hello Dragon").send();
  });

r.Path("/demo")
 .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
    ResponseWriter.withBody("Hello Dragon Demo").send();
  });

app.listenAndServe({ port: 8080 });

Description

Dragon is a simple, fast and low HTTP router and URL matcher for building Deno servers. If you need performance and good productivity, you will love it.

Features

Developer friendly, very expressive and help the developer in their daily use, without sacrificing performance and security.
Lightweight and modular design allows for a flexible framework.
Focus on high performance.
Middleware support, incoming HTTP request can be handled by a chain of middlewares and the final action.
Excellent and fluent documentation.

Link to Source Code

https://github.com/xanny-projects/dragon

Permissive License

Apache-2.0 License

How I built it

(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
I have used DigitalOcean for the first time, I don't have much idea of other features that DigitalOcean provides but it was pretty easy to deploy the app and I really liked it.

I built a Fast and low HTTP router and URL matcher for building Deno servers 🦕.

Yasser Ameur el idrissi — Tue, 22 Dec 2020 09:20:14 +0000

Xanny finally reached version 1.0 in Dec 2020. According to its official repository, Xanny is a simple, fast and low HTTP router and URL marcher for building Deno servers.
You can assume xanny as a layer built on the top of the Deno that helps manage a server and routes. It provides a robust set of features to develop web and mobile applications.

Let's see some of the core features of Xanny framework:

Developer friendly, very expressive and help the developer in their daily use, without sacrificing performance and security.
Lightweight and modular design allows for a flexible framework.
Focus on high performance.
Middleware support, incoming HTTP request can be handled by a chain of middlewares and the final action.
Excellent and fluent documentation.

Install Xanny

Assuming you’ve already installed Deno, create a directory and .ts file to hold your code, and make that your working directory.

$ mkdir xanny-app
$ cd xanny-app
$ touch xanny_example.ts

So to use version 1.0.0 of xanny, you would want to import

https://deno.land/x/xanny@v1.0.0/lib/mod.ts

Let's start registering a couple of URL paths and handlers:

import { Application, RequestMethod, HttpRequest, HttpResponse } from "https://deno.land/x/xanny@v1.0.0/lib/mod.ts";

const app = new Application();

const r = app.NewRoute({ maxRoutes:2 });

r.WithMethods(RequestMethod.GET)
    .Path("/")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny").Return();
    })
    .Path("/demo")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny Demo").Return();
    });

app.ListenAndServe({ port: 8080 });

Here we register two routes mapping URL path to handler. if an incoming request URL matches one of the paths, the corresponding handler is called passingWe believe development must be an enjoyable and creative experience to be truly fulfilling (HttpRequest, HttpResponse) as parameters.

As you can see Xanny provides a very simple and expressive method of defining routes and behavior without complicated routing.

To see the results you need to start a web server on your development machine. You can do this by running the following command in the xanny-app directory:

deno run --allow-net xanny_example.ts

To see your application in action, open a browser window and navigate to http://localhost:8080. You should see the Xanny
Hello Xanny.

We encourage you to contribute to Xanny! Please check out the guidelines about how to proceed.

Whether you’re helping us fix bugs, improve the docs, or spread the word, we’d love to have you as part of the Xanny community! 💪💜 See CONTRIBUTING.md for more information on what we’re looking for and how to get started.
👉 Github Repository

THE BEGINNER’S GUIDE: Fast , low HTTP router and URL matcher for building Deno servers 🦕

Yasser Ameur el idrissi — Mon, 21 Dec 2020 10:09:33 +0000

Let's see some of the core features of Xanny framework:

Developer friendly, very expressive and help the developer in their daily use, without sacrificing performance and security.
Lightweight and modular design allows for a flexible framework.
Focus on high performance.
Middleware support, incoming HTTP request can be handled by a chain of middlewares and the final action.
Excellent and fluent documentation.

Install Xanny

Assuming you’ve already installed Deno, create a directory and .ts file to hold your code, and make that your working directory.

$ mkdir xanny-app
$ cd xanny-app
$ touch xanny_example.ts

So to use version 1.0.0 of xanny, you would want to import

https://deno.land/x/xanny@v1.0.0/lib/mod.ts

Let's start registering a couple of URL paths and handlers:

import { Application, RequestMethod, HttpRequest, HttpResponse } from "https://deno.land/x/xanny@v1.0.0/lib/mod.ts";

const app = new Application();

const r = app.NewRoute({ maxRoutes:2 });

r.WithMethods(RequestMethod.GET)
    .Path("/")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny").Return();
    })
    .Path("/demo")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny Demo").Return();
    });

app.ListenAndServe({ port: 8080 });

As you can see Xanny provides a very simple and expressive method of defining routes and behavior without complicated routing.

To see the results you need to start a web server on your development machine. You can do this by running the following command in the xanny-app directory:

deno run --allow-net xanny_example.ts

To see your application in action, open a browser window and navigate to http://localhost:8080. You should see the Xanny
Hello Xanny.

We encourage you to contribute to Xanny! Please check out the guidelines about how to proceed.

How to Validate Forms Data in React Using Reactrix

Yasser Ameur el idrissi — Sun, 20 Sep 2020 22:09:05 +0000

Hello! One of the most common tasks in software development is input validation. Any app has different forms that submit some data, and we want to check numerous conditions: that fields are not empty and that they have a proper format (like emails), length, and so on. Yes, we can do it manually, but this is not the best path. It is better to use a specific validation library. For React apps, the best choice is Reactrix. In this post, we will see how to install it to your Reat apps, how to use it, and observe the most important built-in validators.

Thanks to React's reactivity model, it's really easy to roll your own form validations. This can be done with a simple method call on the form submit.
Thankfully, there are great validation library for React. In this article, we'll be looking at how Reactrix can be used to simplify:

Validation
Multi-step form validation
Child component validation
Error messages

We will be using create-react-app for making a React application. Let’s just create a new React app using:

$ npm install -g create-react-app
$ create-react-app form-validation-react

Run the app

$ npm install -g create-react-app
$ create-react-app form-validation-react

This will open our newly created app on http://localhost:3000/

Let have a simple example. You’re building a signup form. You want to check that user provides a correct input, like:

Email has a valid format.
All fields are filled.
etc

You can do this manually, but it is not the best route to follow. First, is that you will find yourself in a forest of nested if-else constructs, that you most probably could not understand after a week or two. Next, even small additions will bring a lot of changes. This is always safer to rely on an external validation library. For React applications, there are several choices, but in this article we use Reactrix.

You can install Reactrix using your package manager CLI :

npm install reactrix --save

Then, you need to import Reactrix in your src/Login.js components. So Let's define some validations in React components

import React, { useState } from 'react';
import { useValidate } from 'reactrix';

function Login(props) {
  const [data, setData] = useState({});
  const [msg, setValidator] = useValidate();

  const handleChange = (event) => {
    setData({
      ...data,
      [event.target.name]: event.target.value
    );
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    setValidator(data, {
      email: 'required|email',
      password: 'required|string'
    }); 

  }

  return (
    <form>  
        <div className="container">   
          <label>Email : </label>   
          <input type="email" placeholder="Enter Email" name="email" onChange={handleChange} />  
          <label>Password : </label>   
          <input type="password" placeholder="Enter Password" name="password" onChange={handleChange} />  
          <button type="submit" onClick={handleSubmit}>Login</button>     
          Forgot <a href="#"> password? </a>   
        </div>
    </form>
  );

}

Reactrix has built-in localization support for validation messages. The default language for Reactrix is en in order to set the locale you pass the locale key/code to the localize method:

const [msg, setValidator] = useValidate('fr');

You can learn more about Reactrix rules in the Reatrix Repository

👋 Happy Coding.

Data Structures Easy to Advanced Using JavaScript -Ep1

Yasser Ameur el idrissi — Thu, 17 Sep 2020 09:57:26 +0000

This is a series of tutorials. We are going to:

Dive into data structures.
Compare between data structures.
Look at language support for different data structures.

What is Data Structures

Data Structures (DS) tutorial provides basic and advanced concepts of Data Structure. Our Data Structure tutorial is designed for beginners and professionals.

Data Structure is a way to store and organize data so that it can be used efficiently.

Our Data Structure tutorial includes all topics of Data Structure such as Array, Pointer, Structure, Linked List, Stack, Queue, Graph, Searching, Sorting, Programs, etc.

Need of Data Structures

As applications are getting complexed and amount of data is increasing day by day, there may arrise the following problems:

Processor speed: To handle very large amout of data, high speed processing is required, but as the data is growing day by day to the billions of files per entity, processor may fail to deal with that much amount of data.
Data Search: Consider an inventory size of 106 items in a store, If our application needs to search for a particular item, it needs to traverse 106 items every time, results in slowing down the search process.
Multiple requests: If thousands of users are searching the data simultaneously on a web server, then there are the chances that a very large server can be failed during that process.

in order to solve the above problems, data structures are used. Data is organized to form a data structure in such a way that all items are not required to be searched and required data can be searched instantly.

Advantages of Data Structures

Reusability : Data structures are reusable, i.e. once we have implemented a particular data structure, we can use it at any other place. Implementation of data structures can be compiled into libraries which can be used by different clients.

Abstraction: The client program uses the data structure through interface only, without getting into the implementation details.

Efficiency: Efficiency of a program depends upon the choice of data structures. For example: suppose, we have some data and we need to perform the search for a perticular record. In that case, if we organize our data in an array, we will have to search sequentially element by element. hence, using array may not be very efficient here. There are better data structures which can make the search process efficient like ordered array, binary search tree or hash tables.

In the next episode you will how to code various data structures together with simple to follow step-by-step instructions. Every data structure presented will be accompanied by some working source code (in JavaScript) to solidify your understanding.

⭐️ Course Contents ⭐️
⌨️ Abstract data types
⌨️ Introduction to Big-O
⌨️ Dynamic and Static Arrays
⌨️ Dynamic Array Code
⌨️ Linked Lists Introduction
⌨️ Doubly Linked List Code
⌨️ Stack Introduction
⌨️ Stack Implementation
⌨️ Stack Code
⌨️ Queue Introduction
⌨️ Queue Implementation
⌨️ Queue Code
⌨️ Priority Queue Introduction
⌨️ Priority Queue Min Heaps and Max Heaps
⌨️ Priority Queue Inserting Elements
⌨️ Priority Queue Removing Elements
⌨️ Priority Queue Code
⌨️ Union Find Introduction
⌨️ Union Find Kruskal's Algorithm
⌨️ Union Find - Union and Find Operations
⌨️ Union Find Path Compression
⌨️ Union Find Code
⌨️ Binary Search Tree Introduction
⌨️ Binary Search Tree Insertion
⌨️ Binary Search Tree Removal
⌨️ Binary Search Tree Traversals
⌨️ Binary Search Tree Code
⌨️ Hash table hash function
⌨️ Hash table separate chaining
⌨️ Hash table separate chaining source code
⌨️ Hash table open addressing
⌨️ Hash table linear probing
⌨️ Hash table quadratic probing
⌨️ Hash table double hashing
⌨️ Hash table open addressing removing
⌨️ Hash table open addressing code
⌨️ Fenwick Tree range queries
⌨️ Fenwick Tree point updates
⌨️ Fenwick Tree construction
⌨️ Fenwick tree source code
⌨️ Suffix Array introduction
⌨️ Longest Common Prefix (LCP) array
⌨️ Suffix array finding unique substrings
⌨️ Longest common substring problem suffix array
⌨️ Longest common substring problem suffix array

part 2

⌨️ Longest Repeated Substring suffix array
⌨️ Balanced binary search tree rotations
⌨️ AVL tree insertion
⌨️ AVL tree removals
⌨️ AVL tree source code
⌨️ Indexed Priority Queue | Data Structure
⌨️ Indexed Priority Queue | Data Structure | Source Code

Feel free to follow me on GitHub.

Why Should We Use Aspect-Oriented Programming ?

Yasser Ameur el idrissi — Thu, 13 Aug 2020 16:07:24 +0000

In computing, aspect-oriented programming (AOP) is a programming paradigm that aims to increase modularity by allowing the separation of cross-cutting concerns. It does so by adding additional behavior to existing code (an advice) without modifying the code itself, instead separately specifying which code is modified via a pointcut specification, such as "log all function calls when the function's name begins with set. This allows behaviors that are not central to the business logic (such as logging) to be added to a program without cluttering the code, core to the functionality. AOP forms a basis for aspect-oriented software development.

Okay it might look scary when you read the definition. No worries I got you covered in this article. Let’s deep dive into the some of issues that you would face when writing the code in a method/function.

Let’s look at the following example pseudo-code :

public notify(toPerson: Person, data: string): void {
  if(toPerson.isBlockList()) {
    throw new UserBlockedException();
  }
  send(toPerson,data);
}

It is simple method whose core functionality is send notifation message. But it lacks certain considerations so lets add logging for diagnostics to the above notify method. The code might look like this

public notify(toPerson: Person, data: string): void {
  Logger.info(`Entered sendMessage ${toPerson.name}`);
  if(toPerson.isBlockList()) {
    Logger.warn(`${toPerson.name} is blocked by recepient"`);
    throw new UserBlockedException();
   }
   send(toPerson,data);
   Logger.info('Exiting sendMessage');
}

You see that there are bits of code for logging that have become tangled with the core business functionality. These cross-cutting concerns are almost same for most of the methods. Security, logging, API analytics (ex: to measure how much time each method took) etc are some of the examples for cross-cutting concerns.

Voila!, AOP solves the issue by encapsulating the cross-cutting concerns in a modular element called aspect. An Aspect is just like any other modular implementation (like a class) in Object-oriented programming(OOP).

Common terminology in AOP :

An Aspect is module of code that encapsulates the cross-cutting concerns.
Join point The point in the program that has to be subjected to an aspect. Join point can be method level, constructor level, field level.
Advice Specifies the action that should be executed on the join point and also specifies when should the action be executed, like should it be applied before entering the method, after returning from the method, after an exception from method , both before and after the method etc. An Aspect has group of advices.

Conclusion

Aspect-oriented Programming is an extension of Object-oriented Programming. AOP complements Object-oriented programming by increasing modularity. Now have a look at the textbook definition that I have mentioned earlier, I hope that it would not be scary instead be more meaningful. I would suggest you to practice and use AOP wherever possible. This is one of paths for being better programmer.

🍪 A highly scalable, professional boilerplate for building fast, robust and adaptable mern web apps 🚀

Yasser Ameur el idrissi — Thu, 09 Jul 2020 09:55:30 +0000

In programming, the term boilerplate code refers to blocks of code used over and over again

Let’s assume your development stack consists of several libraries, such as React, Babel, Express, Jest, Webpack, etc. When you start a new project, you initialize all these libraries and configure them to work with each other.

With every new project that you start, you will be repeating yourself. You could also introduce inconsistencies in how these libraries are set up in each project. This can cause confusion when you switch between projects.

This is where boilerplates come in. A boilerplate is a template that you can clone and reuse for every project.

CookieScript Boilerplate uses familiar tools and implements best practices around them to provide you a SOLID development experience. This project does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.

Here are some of the awesome CookieScript features you'll enjoy👋

Quick scaffolding
CookieScript offers a built-in tool for the command line is known as Geek which allows performing the majority of those tedious and repetitive programming tasks that many JavaScript developers avoid performing manually.

Next generation JavaScript
Use template strings, object destructuring, arrow functions, JSX syntax and more.

No Lock-In
Under the hood, we use webpack, Babel, ESLint, and other amazing projects to power your app.

SEO friendly
There are a few problems for search engine rankings when it comes to a vanilla React app. We follow best practices to make your web app attractive to Google.

Authentication
Authentication is the most important factor in a web application, and developers need to spend a lot of time writing the authentication code. CookieScript contains an inbuilt authentication system, you only need to configure models, views, and controllers to make the application work.

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the community! 💜💪 See CONTRIBUTING.md for more information on what we're looking for and how to get started.

GitHub : https://github.com/getspooky/CookieScript

🐹 Create, develop and manage your projects through an accompanying graphical user interface.🎉

Yasser Ameur el idrissi — Sat, 30 May 2020 11:01:21 +0000

This awesome tool allows developers to graphically create a new project, live monitor app performance, add templates to project, and more. This is a pretty big deal, as getting familiar with this tool can make spinning up and maintaining any type of application.

Advantages and use cases

Manage your local projects
Configure your application without messing up the config files
Install templates

Installation

You can install it using the installers below :

Distributions available for Linux, macOS, Windows.

git clone https://github.com/Routine-App/Routine.git

Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.

Run npm run routine in order to start Routine project.

Now you can go to localhost:8080 and see your app!

Supported Templates

Requirements

Routine has a few requirements you should be aware of before installing:

Feel Free to contribute on GitHub : https://github.com/Routine-App/Routine

Thanks for reading! you can support the Routine project directly by r giving it a star on github
GitHub: https://github.com/Routine-App/Routine

Build simple Express Js application in 1 minutes with create-express-app

Yasser Ameur el idrissi — Wed, 22 Apr 2020 12:07:41 +0000

Express.js is one of the most popular back-end frameworks nowadays, which lots of people find useful to learn. After mastering the theory, it comes the time to start the practice, and then it may seem a little bit difficult, how to start. But creating your first Express.js application doesn’t have to be so complicated.
Let’s start...

Install create-express-app

In the beginning, we have to install create-express-app tool. which allows installing ready to use Expres.js application, with all needed dependencies. To install the tool, we have to use the following command in the command line:

npm install -g create-expressjs-app

After the process finished successfully, you have it installed. Let’s create our app!

Create the application

Now, it’s super easy to create our first application using the create-express-app tool. We can do it with a single command in our command line. First, navigate to the folder where you want to have your application through the command line, and then run the following command, where expressapp is the name of our application:

create-expressjs-app init expressapp

When you create a new app, the CLI will use npm to install dependencies. If you have npm installed, but would prefer to use yarn , you can append --use yarn or -u yarn to the creation command. For example:

create-expressjs-app init expressapp --use yarn

You will be prompted to pick a template. Supported template are :

cra-template-es5
cra-template-es6
cra-template-typescript

Each template comes with a basic Jest + ESLint setup.

You can feel free to set a different name for your application. If the process finished successful, you should have your folder with the app ready! Let’s start the application now!

Start the application

Let’s start our expressapp with the following commands:

npm run start

The first command is used to enter to the folder of our application, and the second one starts our app. By default, the application is open at localhost:4200

I hope you will find this tutorial helpful and use it as a base for your first
If you would like to contribute to create-express-app please feel free to check out the Contributing guidelines about how to proceed.
GitHub: https://github.com/getspooky/create-express-app
Website: https://getspooky.github.io/create-express-app/

Have a nice coding!

Creating & Running Expressjs Projects With create-express-app

Yasser Ameur el idrissi — Tue, 21 Apr 2020 22:32:30 +0000

Create Express App is a command-line interface tool that helps you to initialize, develop and maintain your Expressjs applications. It offers a modern build setup with no configuration. At the same time, it still offers the flexibility to tweak the config of each tool.
Starting new Express projects used to be a huge hassle — there were dozens of dependencies, configuration files, and other up front requirements before you could even start writing a single line of code.
Install it on your machine
You’ll need to have Node >= 8.10 on your local development machine Installation is done using the npm install command:

npm install -g create-expressjs-app

It’s really simple to create a new app — simply run create-expressjs-app followed by the desired name of your application, and it will scaffold a new app for you. Lets try it out:

create-expressjs-app init my-app

The folder my-app was created by create-express-app and houses all of our new application's code. The project layout should look like this:

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
|   ├── logo64.png
|   ├── logo128.png
│   └── logo256.png
└── src
    ├── App.js
    └── App.test.js

Building & running an application
npm start
Runs the app in development mode. Open http://localhost:3000 to view it in the browser.
npm build
Convert TypeScript or ECMAScript 2015+ code into a backwards compatible version of JavaScript
npm test
Runs the test watcher in an interactive mode.
We encourage you to contribute to create-expressjs-app!
GitHub
Happy Coding !

Jibli is a humanitarian initiative that aims to provide free delivery platform due to the coronavirus pandemic 😷😷😷

Yasser Ameur el idrissi — Tue, 31 Mar 2020 09:03:07 +0000

We encourage you to contribute to Jibli
GitHub: https://github.com/getspooky/Jibli