Forem: Anass Boutaline

Building an Automatic Routing System in ReactJS with react-router-dom and TypeScript

Anass Boutaline — Sun, 17 Mar 2024 01:07:02 +0000

In this article, we embark on a journey to construct an automatic routing system within a ReactJS application using react-router-dom and TypeScript. Our quest begins with the familiar starting point of any React project: Create React App. With its simplicity and efficiency, Create React App provides the perfect launching pad for our endeavors. We'll seamlessly integrate TypeScript into our project, leveraging its static typing capabilities to catch errors early in the development process and enhance code maintainability.

The desired results

    RouteContainer.register({
        path: '/',
        element: <Store />,
        title: "Boutique",
        label: "Boutique"
    })

    RouteContainer.registreGroup({
        path: '/products',
        routes: [
            {
                path: '/best-selling',
                element: <BestSelling />,
                title: "Best Product Landing Page",
                label: 'My Product'
            },
            {
                path: '/newest',
                element: <Newest />,
                title: "Best Product Landing Page",
                label: 'My Product'
            },
            {
                path: '/:id',
                element: <SingleProduct />,
                title: "Single Product",
                label: "Single Product"
            },
        ]
    })

This code will generate 4 routes as follow
/=> Home page will render <Store /> component
/products/best-selling => will render <BestSelling /> component
/products/newest => will render <Newest /> component
/products/{id} => will render <SingleProduct />component, and id will be accessible from props.navigation passed nativelly to the component.

Getting started

First, let's create a file (just a regular js file) where we will define our routes in the manner shown in the code snippet above. Let's assume that we already have four components: <Store />, <BestSelling />, <Newest />, and <SingleProduct />.

// File: src/Routes/routes.js

import RouteContainer from '../Routing/RouteContainer' // this is where we will handle the routing logic

// import your components here...



export default function () {

    RouteContainer.register({
        path: '/',
        element: <Store />,
        title: "Boutique",
        label: "Boutique"
    })

    RouteContainer.registreGroup({
        path: '/products',
        routes: [
            {
                path: '/best-selling',
                element: <BestSelling />,
                title: "Best Product Landing Page",
                label: 'My Product'
            },
            {
                path: '/newest',
                element: <Newest />,
                title: "Best Product Landing Page",
                label: 'My Product'
            },
            {
                path: '/:id',
                element: <SingleProduct />,
                title: "Single Product",
                label: "Single Product"
            },
        ]
    })
};

When the RouteContainer.register(RouteProps) function is called, RouteContainer will save the route data into a static array, which will be used later to dispatch routes. Let's first define some types.

//File: src/Routing/RouteContainer.ts

// This is the shape of route config (route data)
type routeConfig = {
    path: string,
    element: React.JSX.Element | React.ReactElement,
    title: string | undefined,
    label?: string 
}

and crafting the first version of the RouteContainer class.

//File: src/Routing/RouteContainer.ts

export default class RouteContainer {

    static rawRoutes: routeConfig[] = []

    static register (routeConfig: routeConfig): void {
       RouteContainer.rawRoutes.push( routeConfig );
    }

So now, the RouteContainer is just using a static array to hold our Route configs or data.

let's see how we are going to use this to render element based on route config.

for that we will create a dispach function inside RouteContainer.

//File: src/Routing/RouteContainer.ts

static dispatch () {
        return RouteContainer.rawRoutes
    }

in this function we are just returning the rawRoutes array, basically this array will be used by useRoutes from react-router-dom to render routes:

// File: App.js

function App() {
  return (
        <BrowserRouter>
          <AppLauncher />
        </BrowserRouter>
  );
}

export default App;

// File AppLauncher.js

import { useRoutes } from "react-router-dom"
import RouteContainer from "./Routing/RouteContainer"
import registerRoutes from "../Routes/routes"

export default function RouteDispatcher () {

    registerRoutes() // register routes in RouteContainer 


    return useRoutes([].concat( RouteContainer.dispatch() /** Dispatch registred route inside RouteRendrer */))



}

We can finally add registerGroup to RouteContainer:

//File: src/Routing/RouteContainer.ts

type routeGroupConfig = {
    routes: Array<routeConfig>,
    path: string
}

...

export default class RouteContainer {

...

static registreGroup ( routeGroupConfig: routeGroupConfig ) {
        routeGroupConfig.routes.forEach(routeConfig => {
            RouteContainer.register( {
                ...routeConfig,
                path: RouteContainer.prepareAndMergePaths( routeGroupConfig.path, routeConfig.path )
            } )
        });
    }


private static prepareAndMergePaths ( path: string, anOther: string  ) {
        return RouteContainer.preparePath( path ) + RouteContainer.preparePath( anOther )
    }

 private static preparePath(str: string) : string{
        if( str.length === 0 ) {
            return ""
        }
        str = str.endsWith('/') ? str.slice(0, -1) : str;
        str = str.startsWith('/') ? str.slice(1, str.length) : str;

        return str + "/"
    }

Yeah, this was easy. but the question is why we are doing this?

I'm doing this to keep my routes organized in a single place, for example, in a routes.js file, making it easy to remove, add, or update routes in my app. However, the best part is when each route needs specific contexts. If you find this helpful, comment, and I will post a new article on how to use this architecture to automatically inject providers and layouts into each route.

Mobilo.design: MERN with SSR from scratch - Project Challenges

Anass Boutaline — Fri, 12 Aug 2022 13:52:24 +0000

Summary

Introduction
Planing
Project Structure
Webpack & Babel configurations
Chalenges and Reactions
Deployments and Integrations
Maintenance

Introduction

Check what I am building: Mobilo.design
Making a smooth, fast web app to list screenshots of the best in class in production app for IOS and Android, some kind of UX/UI Mobile designs inspiration website, the idea is quite simple, get a database to save apps, screenshots, and other metadata, a backend language as a service provider, and a front end for humans(Just kidding).

Planing

Basically, this is the important step I consider while working on a new project, because the stack you choose will go with you all the way long, from building to maintenance, so here's how I choose the MERN stack, first of all, I list my requirements:

Data requirements, why MongoDB?

The first time, I didn't even know what is the data I should be saving for each app or screenshot, I need a flexible database structure (I don't even need a structure), so SQL databases are not a good choice at the time, I go NoSQL and I choose MongoDB, and why MongoDB? because I've never worked with NoSQL databases before, and MongoDB is well known. (Well known === Big Community === Well documented === there is always a solution for your needs).

Backend requirements, Why NodeJS?

Python with beanie, Pydantic & FastAPI, what a winning stack, I've already worked with that before, so I will not struggle a lot, but for SEO purposes, I really need to make use of renderToString from React, and NodeJS with MongoDB, they work better together, So NodeJS.

Frontend requirements, Why React?

I need to React fast (LOL), can't tell why rather I always use React on my projects, even for mobile Apps with React-Native.

Why not Next or Gatsby?

I know, NextJS makes it easy to create SSR web apps, but I really want to do it by myself with Webpack & Babel, should be fun (Not true).

Project Structure

Here's another important decision to make, how you are gonna f**ing structure this project, considere that this decision is hard as changing the structure later will cost you a day or two (maybe more).
finnaly I came over this structure:

+AppFolder
--assets
+-src
---Components
---Routes
+-server
---Models
---Routes
+--Providers
----Repositories

Whats you taughts about my ways to choose stack and my project folder structure, next post will be about how i configured webpack and babel, what are the packages and plugins i used along the way, don't forget to tell me your taughts and follow me so i can keep writing about my other projects,
exit();

dev.to/@butalin:~$Bye

How i prevent SQL Injection in my PHP code

Anass Boutaline — Tue, 15 Jun 2021 21:21:14 +0000

SQL injection is a code injection technique used to attack data-driven applications, in which malicious SQL statements are inserted into an entry field for execution. This is what Wikipedia can say about SQL injection.

My small definition to SQL injection is an old school technique for attackers to inject a query inside a query to perform unauthorized action against database usually SQL based ones.

Today, I'm not going to give such examples of SQL injection, but one example could be enough to understand how can a developer protect his application from SQL injection.

Normally this will not take too long, because there only one answer to do that,
you should use prepared statements.

Prepared statements are send to and parsed by database server separately from any parameters, This way it is impossible for an attacker to inject malicious SQL.

Basically, SQL injection uses your parameters to in inject malicious SQL queries, as example, let's say you are working on a library website, and you have to get each book by it id to show later in your page, so, maybe you're having something like http://localhost/library/book.php?id=1, and then you fetch your book as simple as that:

<?php

$id = $_GET['id'];

$query = "SELECT * FROM books WHERE id = ".$id ;
//in normal case your query became "SELECT * FROM books WHERE id = 1"
// execute your query and get data

So, you parameter id leaves a security hole in your website, an attackers can easily add SQL query to your parameter id just like that:
localhost/book.php?id=1; UPDATE users SET password = 'anass' WHERE idUser = 1
Then your code:

<?php

$id = $_GET['id'];

$query = "SELECT * FROM books WHERE id = ".$id ;
//this case your query became "SELECT * FROM books WHERE id = 1; UPDATE users SET password = 'anass' WHERE idUser = 1"

This will execute two queries at time, result in changing your administrator password in your application, normally parameters are helping as to do so, the idea behind preventing SQL injection is to separate our query from parameters, so we can tell our database engine that we wanting to execute such query using these parameters.
For sure your website is not ready for production, just leave it in localhost and keep reading.

How we can tell database engine, what is the query, and what are parameters,

first,
Let's connect to our MySQL database,
For sure, commanded way is to use PDO, because if you want to switch to any database engine, we won't rewrite every thing,
Then, should prepared statement, and pass the skeleton of our query:

//use our database details to connect
$pdo = new PDO('mysql:dbname=db;host=localhost;charset=utf8', 'root', '1234');

$dbConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

The first line, is to connect to our MySQL database named db and hosted in our locale environment localhost, username is root and password 1234.
The second line is the most important, tells PDO to use real prepared statements rather than emulated by PHP, if it set to true preparing will be done by PHP and this is not our choice.
Finally, the third line set error mode to exceptions, PDO will throw PDOException if there is an error.

Now move on to create our first prepared query,
from the previous example, we need to get a book by it id,

<?php

$query = $pdo->prepare("SELECT * FROM books WHERE id = ?";

Simple enough
Alright

We need now to pass the parameter, by using bindParam method,

$query->bindParam($id);

Then use execute to execute our query:

$resultes = $query->execute();

Hope this clarify how prepared statements work, and encourage you to use it,
If you have any suggestions let me know in comments, and next time i will show you how to make your own secure Query Builder class to use it in any of your projects.