DEV Community: Muhammad Hanif

Making Tailwind more fun(ctional) by using pipeable api in tailwind-fun

Muhammad Hanif — Sat, 17 Jun 2023 04:37:13 +0000

If you haven't read about tailwind-fun you can read it here

In short, tailwind fun is a library that give you the ability to writting and composing tailwind classname declaratively/expressively.

now, the initial reason why I built tailwind-fun was because am into FP and I like to be able to write tailwind more declaratively. which mean I don't want to create a components based class abstraction unless if I am intentionally building a design system of course.

and am thinking, when working with FP lib like fp-ts or ts-belt or etc. I will have a pipe function. then am thinking to why not just create pipeable api since I think it is more cleaner than chainable api.

so now, tailwind-fun expose TWSClass methods as an pipeable api.

for example here how the example in previous article if translated using pipeable api

import { TWS, addVariants, addWhen, removeWhen  } from 'tailwind-fun';

const pipe = <T>(value: T, ...fns: Function[]) =>
  fns.reduce((prev, next) => next(prev), value);


const overlayClass = (
  isSelected: boolean,
  isToday: boolean,
  isSameMonth: boolean
) =>
  pipe(
    TWS('absolute h-[36px] w-[36px] top-[-5.5px] left-[-7.5px] rounded-full'),
    addWhen(isSelected, 'bg-selectedBLue'),
    addWhen(isToday, 'border-selectedBlue border'),
    removeWhen(isSameMonth, 'border-selectedBlue'),
    addVariants('group-hover', 'bg-white z-10')
  );

const Overlay = () => <div className={overlayClass(isSelected,isToday,isSameMonth).className}></div>

Composing into component based abstraction

Even though am not recommending it before, but if you want to compose class name to component based abstraction, it is become more cleaner now too. for example here how you compose a button class

import { TWS, addVariants, addWhen, removeWhen  } from 'tailwind-fun';

const pipe = <T>(value: T, ...fns: Function[]) =>
  fns.reduce((prev, next) => next(prev), value);

const buttonClass = ({ primary, secondary, fluid, widthPx }: any) =>
  pipe(
    TWS('block p-5'),
    addWhen(primary, 'bg-primary text-primary'),
    addWhen(secondary, 'bg-secondary'),
    addWhen(fluid, 'w-100'),
    addWhen(Number.isInteger(widthPx), `w-[${widthPx}px]`)
  );

console.log(buttonClass({ primary: true, fluid: true }).className); //block p-5 bg-primary text-primary w-100
console.log(buttonClass({ secondary: true, fluid: true }).className); // block p-5 bg-secondary w-100;
console.log(buttonClass({ primary: true, widthPx: 50 }).className); // block p-5 bg-primary text-primary w-[50px];

Extending a.k.a Its all just function

since all the pipeable api exposed function is just a function you can actually extend it. its also how I compose the api internally.
for example, addWHen is using add at its base, and addHoverWhen is using addWhen at its base.
you get the idea. you can see it here

Thank you for reading through the article :D

Simplify Your Tailwind CSS Workflow with tailwind-fun

Muhammad Hanif — Mon, 05 Jun 2023 04:58:02 +0000

If you're a frontend developer working with Tailwind CSS, you know how powerful and versatile it is. However, managing class names in your codebase can quickly become overwhelming, especially when dealing with conditional rendering or dynamically changing styles. That's where the tailwind-fun library comes to the rescue. In this blog post, we'll explore how tailwind-fun can simplify your Tailwind CSS workflow and make your code more readable and maintainable.

What is tailwind-fun?

tailwind-fun is a lightweight JavaScript library designed to streamline the management of Tailwind CSS class names. It provides a fluent API that allows you to easily add, remove, and modify class names based on various conditions and variants. Whether you're handling conditional rendering, hover effects, or applying different styles based on user interactions, tailwind-fun has got you covered.

Simplified and Declarative Class Name Handling

One of the standout features of TWSClass is its declarative approach to class name handling. Let's take a look at an example:

import { TWS } from 'twsclass';

const Component = ({ isHighlighted, isDisabled) => <div className= {TWS('btn')
  .add('text-red-500')
  .addWhen(isHighlighted, 'bg-yellow-200')
  .removeWhen(isDisabled, 'cursor-not-allowed')}> text</div>

or some more complex example

import { TWS } from "tailwind-fun";

type DateRowProps = { dates: readonly Date[] };

const overlayClass = (
  isSelected: boolean,
  isToday: boolean,
  isSameMonth: boolean
) =>
  TWS("absolute h-[36px] w-[36px] top-[-5.5px] left-[-7.5px] rounded-full")
    .addWhen(isSelected, "bg-selectedBlue")
    .addWhen(isToday, "border-selectedBlue border")
    .addVariants("group-hover", "bg-white z-10");

export const DateRow = consumeDateReducer<DateRowProps>(
  ({ dates, selectedMonth, dispatch, isSelected }) => (
    <div className="flex gap-5 mb-3 ">
      {dates.map((date) => (
        <button
          onClick={() => dispatch({ type: "UpdateDate", date })}
          className={
            TWS("flex-1 grow text-center relative group").addWhen(
              !isSameMonth(selectedMonth, date),
              "opacity-50"
            ).className
          }
        >
          <div
            className={
              overlayClass(
                isSelected(date),
                isToday(date),
                isSameMonth(selectedMonth, date)
              ).className
            }
          ></div>
          <span className={TWS("relative group-hover:text-dark").className}>
            {getDate(date)}
          </span>
        </button>
      ))}
    </div>
  )
);

Handling Hover Effects and Variants

tailwind-fun also provides built-in support for handling hover effects and other Tailwind CSS variants. Let's consider an example where we want to apply a hover effect to a button:

const twsClass = TWS('btn')
  .addHover('bg-blue-500')
  .addVariants('hover:text-white', 'text-blue-500');

const classNames = twsClass.className;

In this case, we use the addHover method to add a hover class name, which applies the bg-blue-500 style when hovering over the button. Additionally, we use the addVariants method to apply the hover:text-white variant, which changes the text color to white on hover.

With tailwind-fun, handling hover effects and other variants becomes straightforward and intuitive. You can easily manage complex class name combinations without sacrificing readability or maintainability.

Composing style using tailwind-fun

you can also compose style for your components like this using tailwind-fun

const button = TWS("flex p-5");
const buttonPrimary = button.addClass("bg-pimrary");
const buttonSecondary = button.addClass("bg-secondary");

// and use in element
<button className={button.className} />
<button className={buttonPrimary.className} />
<button className={buttonSecondary.className} />

but I wouldn't recommend it, because I think the point of using tailwind is to not having to abstract class into component based style. it even better to write tailwind classes into the html directly and to use tailwind-fun sparingly and only if you needed to add logic to your classes. tailwind-fun purpose is more like of https://www.npmjs.com/package/classnames rather than any other css library

think of tailwind-fun as a classnames but on steroid, since it more expressive and declarative.

Update (Tailwind-fun 0.2.0)

in the version 0.2.0 tailwind fun adding a pipeable api, you can read about it here. it make you able to write using tailwind-fun like below

import { TWS, addVariants, addWhen, removeWhen  } from 'tailwind-fun';

const pipe = <T>(value: T, ...fns: Function[]) =>
  fns.reduce((prev, next) => next(prev), value);

const buttonClass = ({ primary, secondary, fluid, widthPx }: any) =>
  pipe(
    TWS('block p-5'),
    addWhen(primary, 'bg-primary text-primary'),
    addWhen(secondary, 'bg-secondary'),
    addWhen(fluid, 'w-100'),
    addWhen(Number.isInteger(widthPx), `w-[${widthPx}px]`)
  );

console.log(buttonClass({ primary: true, fluid: true }).className); //block p-5 bg-primary text-primary w-100
console.log(buttonClass({ secondary: true, fluid: true }).className); // block p-5 bg-secondary w-100;
console.log(buttonClass({ primary: true, widthPx: 50 }).className); // block p-5 bg-primary text-primary w-[50px];

Conclusion

The tailwind-fun library provides a powerful yet lightweight solution for managing Tailwind CSS class names in a simplified and declarative manner. By using the fluent API and built-in methods, you can handle conditional rendering, hover effects, and other class name modifications with ease. Say goodbye to convoluted class name manipulation and embrace a cleaner, more maintainable codebase.

To start using tailwind-fun in your projects, simply install the library via npm or include it directly in your codebase. Visit the official documentation https://github.com/hanipcode/tailwind-fun for detailed usage instructions and explore the full range of capabilities.

Upgrade your Tailwind CSS workflow with tailwind-fun

Creating a Simple Express JWT Authentication Middleware with Express-Kun (No need of setuping Passport!)

Muhammad Hanif — Fri, 21 Feb 2020 22:19:42 +0000

Authentication is a really common middleware in backend. in this article I will show you how to create a simple authentication without need of setting up passport.

first let's init the express app

yarn add express

then creating a simple index.js

const express = require('express');
const app = express();

app.use(express.json());
app.use(express.urlencoded());


app.listen(8000, () => {
  console.log('server run successfully')
})

allright, then let's setup our mongoose model in models/user.js

yarn add mongoose bcrypt

const mongoose = require("mongoose");
const bcrypt = require("bcrypt");

function setPassword(value) {
  return bcrypt.hashSync(value, 10);
}

const UserSchema = new mongoose.Schema({
  email: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true,
    set: setPassword
  }
});

const model = mongoose.model("User", UserSchema);

module.exports = model;

then let's create our create user and login user controller in controllers/users.js (let's also create a jwt token)

yarn add jsonwebtoken

const User = require("../models/user");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcrypt");

async function create(req, res) {
  const { email, password } = req.body;

  const user = await User.create({
    email,
    password
  });

  res.json({
    user,
    message: "create user successfully"
  });
}

async function login(req, res) {
  const { email, password } = req.body;
  const user = await User.findOne({
    email
  });

  if (!user) {
    throw Error("User not found");
  }
  if (bcrypt.compareSync(password, user.password)) {
    const token = jwt.sign({ user }, "yourSecretKey", {
      expiresIn: "24h"
    });

    res.json({
      user,
      token,
      message: "create user successfully"
    });
  } else {
    res.status(401).json({
      message: "Unauthenticated"
    });
  }
}

module.exports = {
  create,
  login,
}

let's add those controller to the route:

POST /users
POST /users/login

your index.js become like this

const express = require("express");
const mongoose = require("mongoose");
const app = express();
const userController = require("./controllers/user");

mongoose.connect("mongodb://localhost/exampledb").then(() => {
  console.log("success connect db");
});
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post("/users", userController.create);
app.post("/users/login", userController.login);

app.listen(8000, () => {
  console.log("server run successfully");
});

now let's create a router

GET /users
GET /users/:id

but protected with a jwt auth. how do we do that. first lets install express-kun

yarn add express-kun

then first let's export user to separate router in routes/user.js

const { Router } = require('express');
const userController = require('../controllers/user');
const router = Router();

router.post('/', userController.create);
router.post('/login', userController.login);

module.exports = router;

then use it in our app in index.js

const express = require("express");
const mongoose = require("mongoose");
const app = express();
const userRouter = require("./routes/user");

mongoose.connect("mongodb://localhost/exampledb").then(() => {
  console.log("success connect db");
});
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use("/users", userRouter);

app.listen(8000, () => {
  console.log("server run successfully");
});

allright now lets build the protected router. the most simple thing is you can use withJWTAuthMiddleware from express-kun. (behind the scene it just utilize withMiddleware but using a pre-made middleware for jwt authentication)
let's use that with our secretKey

const { Router } = require("express");
const userController = require("../controllers/user");
const { withJWTAuthMiddleware } = require("express-kun");
const router = Router();

const protectedRouter = withJWTAuthMiddleware(router, "yourSecretKey");


router.post("/", userController.create);
protectedRouter.get("/", userController.getAll);
router.post("/login", userController.login);
protectedRouter.get("/:id", userController.get);

module.exports = router;

then let's create the corresponding controllers/user.js

async function getAll(req, res) {
  const user = await User.find({});
  res.json({
    user,
    message: "create user successfully"
  });
}

async function get(req, res) {
  const user = await User.findOne({
    _id: req.params.id
  });
  res.json({
    user,
    message: "create user successfully"
  });
}

module.exports = {
  create,
  login,
  get,
  getAll,
};

let's try access the GET /users route to get all users, you will get this 401 error:

{
"message": "Invalid Token",
"error": "No Authorization Header"
}

to be able to access you need a bearer token in Authorization with this format

Authorization: `Bearer $token`

let's login, get the token and try in postman. it will return successfully

Done. you created your first authenticateed route successfully.

Going further

let's deep further. the above work simply. but how to make it more efficient ? if you know a routes is containing all protected routes you can create and exports protectedRoutes instead the main routes for example

// /Gallery Resource
const router = Router();

const protectedRouter = withJWTAuthMiddleware(router, "yourSecretKey");
prtectedRouter.post("/", userController.create);
protectedRouter.get("/", userController.getAll);
protectedRouter.get("/:id", userController.get);

module.exports = protectedRouter;

well this is a repeating process if you have other "all protected" routes. to simplify it you can create a helper in helpers/createProtectedRouter

module.exports = function() {
  const router = Router();
  return withJWTAuthMiddleware(router, 'yourSecretKey');
};

so now in other part of the apps you can do

// Resource /Friends
const protectedRouter = createProtectedRouter();
prtectedRouter.post("/", userController.create);
protectedRouter.get("/", userController.getAll);
protectedRouter.get("/:id", userController.get);

module.exports = protectedRouter;

this was the main philosophy of express-kun. you can build a reusable 'midlewared router' and pass it anywhere, even between project. remember that withJWTAuthMiddleware is using withMiddleware behind the scene.

Customization

So you want to customize the authentication, for example you dont want to use bearer ? it's really possible. actually, here is the source code of withJWTAuthMiddleware


export default function withJWTAuthMiddleware(
  router: Router,
  secretKey: string,
  getToken: GetTokenFun = getTokenFromBearer,
  preCheckFun?: PreCheckFun,
  errorHandler?: ErrorRequestHandler,
  verifyOptions?: jwt.VerifyOptions
) {
  return withMiddleware(
    router,
    jwtAuthMiddleware(
      secretKey,
      getToken,
      preCheckFun,
      errorHandler,
      verifyOptions
    )
  );
}

and here is the source code for pre made jwtAuthMiddleware

export default function jwtAuthMiddleware(
  secretKey: string,
  getToken: GetTokenFun,
  preCheckFun?: PreCheckFun,
  errorHandler?: ErrorRequestHandler,
  verifyOptions?: jwt.VerifyOptions
) {
  return async function middleware(
    req: Request,
    res: Response,
    next: NextFunction
  ) {
    try {
      const token = await getToken(req);
      if (preCheckFun) {
        preCheckFun(req, res);
      }
      await jwt.verify(token, secretKey, verifyOptions);
      res.locals.token = token;
      res.locals.decoded = jwt.decode(token);
      next();
    } catch (e) {
      if (errorHandler) {
        errorHandler(e, req, res, next);
        return;
      }
      if (e instanceof jwt.JsonWebTokenError || e instanceof TokenError) {
        res.status(401).json({
          message: "Invalid Token",
          error: e.message
        });
        return;
      }
      res.status(500).json({
        message: "Internal server Error",
        error: e.message,
        stack: e.stack
      });
    }
  };
}

first thing to note, it will pass your decoded json into res.locals.decoded that you can access in your controller.
moreover. it actually accept and run getToken function.
getToken function is a function that passing a request object and should return the token.
for example, here was the default getTokenFromBearer source code

export default function getTokenFromBearer(req: Request) {
  const authorization = req.headers.authorization;
  if (!authorization) {
    throw new TokenError("No Authorization Header");
  }
  try {
    const token = authorization?.split("Bearer ")[1];
    return token;
  } catch {
    throw new TokenError("Invalid Token Format");
  }
}

so if the token in the ?token queryString you can create something like this

export default function getTokenFromQuery(req: Request) {
  const {token} = req.query;
  if (!token) {
    throw new TokenError("No Token Query");
  }
  return token;
}

you can also havee a preCheck function that will pass you a request and response object and can do literally anything there. for example if you want to check if user exists etc, and also you can provide it with your own custom error handler !

That's all for this post. Thanks, if you interested in the library, please do try !

Things I learned While Developing Express-Kun (Backend Helpers for express app development)

Muhammad Hanif — Fri, 21 Feb 2020 20:49:52 +0000

Intro

Hi guys, So a while back I developed a library that aim to simplify backend development. I don't want to build a framework, I just want to build something like lodash but for backend-specific development. So I built express-kun. a library that providing a set of helper that use functional programming mindset. the concept is simple, for example if you want to create reusable middleware you just pass a router then it will returned back a midlewared router. you can checkout the documentation for more example here https://github.com/hanipcode/express-kun

About this series

So I thought it will really simple to implement this library. But I never felt so wrong, might be because my lack of knowledge about javascript especially about it prototypal nature I thought I want to documented the process so I write this series. here we go to the first bump

Things I just know about express -> router.get is not calling a get in the router class directly but it use a route object (Rotuer different than Route).

Really, this hit me hard. Till know even though I spent hours reading express Router's source code I don't understand how it really implemented. My understanding of it barely scratch the surface.

I thought this library would be very simple. I thought I should just implement it by replacing the router.get to another function like this (I will simplify it but you can read the source code in the repo I linked above)

withMiddleware(router, middleware) {
 router.get = function(path, ...handlers) {
   router.get(path, middleware, handlers)
 }
 // other method more or less the same..
 return router;
}

but I get this error

 var __spreadArrays = (this && this.__spreadArrays) || function () {
                                                               ^

RangeError: Maximum call stack size exceeded

I was stupid actually, If I think about it the previous code will do an infinite recursion. so after hit by this error I check at express source code for Router (https://github.com/expressjs/express/blob/master/lib/router/index.js). checkout line 507 - 513.

methods.concat('all').forEach(function(method){
  proto[method] = function(path){
    var route = this.route(path)
    route[method].apply(route, slice.call(arguments, 1));
    return this;
  };
});

methods is an npm package that list available Http method. and then it just loops over the methdo name. and

  proto[method] = function(path){
    var route = this.route(path)
    route[method].apply(route, slice.call(arguments, 1));
    return this;
  };

this is the interesting path. so for an router object it create handler for every http method. but that handler is actually applying a method on a route object (remember that Router and Route is different). each router have a route object. (you can see a route source code here https://github.com/expressjs/express/blob/master/lib/router/route.js).
Here is when I feel more stupid. after knowing that I don't go to the obvious answer but instead make my second mistake:

Things I just know about express -> Router() does not return a plain object but instead a callable function but with property.

to test this you can write something like you will see that router can be called as a function that shorthand for router.use

const router = new Router();
router(yourMiddleware);

I know this because my second attempt was I try to replace the get method from .get etc like below

withMiddleware(router, middleware) {
 const routeObject = {};
 routeObject.get = function(path, ...handlers) {
   router.get(path, middleware, handlers)
 }
 // other method more or less the same..
 return {
   ...router,
   ...routeObject
 };
}

actually this work for a while, really. but the problem is when you want to split multiple endpoint to multiple router for example if you have routes.js like below

import userRouter from './modules/user/user.routes';
import postRouter from './modules/post/post.routes';

const apiRouter = Router();

apiRouter.use('/users', userRouter);
apiRouter.use('/posts', postRouter);

then in your post.routes

const router = Router();
const errorHandledRouter = withErrorHandler(router, errorHandlerMiddleware);
const protectedRouter = withAuthMiddleware(errorHandledRouter);

protectedRouter.get('/', postController.getAll);
protectedRouter.post('/', postController.create);
protectedRouter.get('/:postId', postController.getPost);
protectedRouter.get('/:postId/comments', postController.getComments);
protectedRouter.post('/:postId/comments', postController.comment);
// other route

export default protectedRouter;

it hit me with an error:

TypeError: Router.use() requires a middleware function but got a Object
    at Function.use (/Users/hanif/Projects/express-kun-example/node_modules/express/lib/router/index.js:458:13)

yup. it error at apiRouter.use('/posts', postRouter). because postRouter is something that returned from withMiddleware and it's not really a router function. it was an object created by spread operator. that was the problem. actually there are workaround to create the post.routes like below

const router = Router();
const errorHandledRouter = withErrorHandler(router, errorHandlerMiddleware);
const protectedRouter = withAuthMiddleware(errorHandledRouter);

protectedRouter.get('/', postController.getAll);
protectedRouter.post('/', postController.create);
protectedRouter.get('/:postId', postController.getPost);
protectedRouter.get('/:postId/comments', postController.getComments);
protectedRouter.post('/:postId/comments', postController.comment);
// other route

export default router;

you still exporting the main router. but every router will still be registered because withMiddleware actually just registering a middleware inside that router. but that's very counterintuitive and I don't want my library to be confusing.

finally I came to the obvious solution:

export default function withMiddleware(
  router: Router,
  middlewares: SupportedMiddleware
): Router {
  let connectedMiddleware: RequestHandler[];
  if (isMiddlewareArray(middlewares)) {
    connectedMiddleware = middlewares;
  } else {
    connectedMiddleware = [middlewares];
  }

  router.get = function(path: PathParams, ...handlers: RequestHandler[]) {
    const route = this.route(path);
    route.get.apply(route, [...connectedMiddleware, ...handlers]);
    return this;
  };

  router.post = function(path: PathParams, ...handlers: RequestHandler[]) {
    const route = this.route(path);
    route.post.apply(route, [...connectedMiddleware, ...handlers]);
    return this;
  };

  router.put = function(path: PathParams, ...handlers: RequestHandler[]) {
    const route = this.route(path);
    route.put.apply(route, [...connectedMiddleware, ...handlers]);
    return this;
  };

  router.delete = function(path: PathParams, ...handlers: RequestHandler[]) {
    const route = this.route(path);
    route.delete.apply(route, [...connectedMiddleware, ...handlers]);
    return this;
  };

  return router;
}

the code above was current code in the repo. here you notice that I was using a normal function instead of arrow function. so I can still get the 'this' value of the router. then I put the method inside the route object. actually this was just modifying this code from the express codebase

  proto[method] = function(path){
    var route = this.route(path)
    route[method].apply(route, slice.call(arguments, 1));
    return this;
  };

Outro

alright that was my stupid bump on developing my express-kun library. if you can learn a thing or two, that's great. and if you like the concept of the library, do try it. Thanks!

Building an Express Application with Express-Kun, a functional-paradigm express helper - Part 1 (Intro and Setup)

Muhammad Hanif — Fri, 14 Feb 2020 18:45:23 +0000

Introduction

Today I was just building a library for express js. the library was functional-first express helpers for the common use cases. I built this library gaining inspiration from frontend libraries like Lodash or redux.

I think the beauty of both library is that those libraries only extends the functionality and not really getting in the way we write our app. for example when using redux, redux doesn't redefine how we write our react component. it only cares that we pass our component to the connect function. meanwhile Lodash, it let us do common things easily.

I think I haven't found such a framework/library for express that doesn't get in the way or change how I write my application. so I build express-Kun (https://github.com/hanipcode/express-kun).

The library is simple enough. it does one of 2 things:

You pass a router, it returned back the modified router
You pass a router and middleware/error handler, it returned callback with the modified router as a param.

there are some function that we will gonna use from express-kun in this series

withMiddleware

you pass a router and middleware, it will return the 'midlewared' router

// your router
const router = Router();
// with auth middleware
const protectedRouter = withMiddleware(router, authMiddleware); // also support array of middleware ex: [authMiddleware, myMiddleware2]

protectedRouter.get("/user", (req, res) => {
  res.send({
    message: "success"
  });
});

because this is only return the midlewared router. you can chain it without modifying the first router behavior

// your router
const router = Router();
// with auth middleware
const protectedRouter = withMiddleware(router, authMiddleware); // also support array of middleware ex: [authMiddleware, myMiddleware2]
// will apply authMiddleware and uploadMiddleware
const protectedUploadRouter = withMiddleware(protectedRouter, uploadMiddleware);

protectedRouter.get("/user", (req, res) => {
  res.send({
    message: "success"
  });
});
protectedUploadRouter.post("/user", (req, res) => {
  res.send({
    message: "success upload photo"
  });
}))

withErrorHandler

you pass a router and error handler, it will return the router, and if any of the handler return error in runtime it will passed to the error handler

function errorHandler(err, req, res, next) {
  res.json({
    error: true,
    mesage: "wow error"
  });
}

const withErrorHandlerRoute = withErrorHandler(router, errorHandler);

// when accessed will return json { error: true, message: 'wow error' }
withErrorHandlerRoute.get("/errorrouter", (req: Request, res: Response) => {
  throw new Error("Error here");
});

this provide further more functionality to compose middleware with error handler

function errorHandler(err, req, res, next) {
  res.json({
    error: true,
    mesage: "wow error"
  });
}

function middleware(req, res, next) {
  console.log("midleware");
  next();
}

const middlewaredRoute = withMiddleware(router, middleware);

const withErrorHandlerRoute = withErrorHandler(middlewaredRoute, errorHandler);

// when accessed will return json { error: true, message: 'wow error' }
withErrorHandlerRoute.get("/errorrouter", (req: Request, res: Response) => {
  throw new Error("Error here");
});

partialWithMiddleware

there is also a partial variant for withMiddleware function so you can build a general helper / utils on top of it for example

// in generateAuthMiddleware.js
const generateAuthMiddleware = partialWithMiddleware(authMiddleware);

// in your routes.js
const router = new Router();
const protectedRoute = generateAuthMiddleware(router);

this even support supplying partialWithmiddleware with middleware for easy composition

// in generateAuthMiddleware.js
const generateAuthMiddleware = partialWithMiddleware(authMiddleware);

// in uploadProtectedMiddleware.js
const generateUploadProtectedMiddleware = generateAuthMiddleware(
  uploadMiddleware
);

// in your routes.js
const router = new Router();
const uploadProtectedRouter = generateUploadProtectedMiddleware(router);

You can read more about other function provided by the library in the readme of the repository. in this article, I will focus more on how to build an App using express-Kun. I will be using typescript in this article but I'll omit some typing stuff so you can feel free if you want to follow along using javascript.

In this article series we will build a backend for forum application. where user can login, post article and then comment the article.

Setup

let's start.
first, we install express and express-kun

yarn add express express-kun

then let's add nodemon for easier development

yarn add --dev nodemon typescript

below is my usual setup when using nodemon for typescript development

{
  "watch": ["dist"],
  "ext": "js",
  "exec": "node index.js"
}

you will see how this work later. let's setup script in our package.json

{
  "scripts": {
    "dev": "nodemon",
    "build:watch": "tsc --watch",
    "build": "tsc",
  },
}

then let's setup our simple app in /src/index.ts (or .js)

import express from "express";

const app = express();

const PORT = 8000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.listen(PORT, () => {
  console.log(`successfully run app in port ${PORT}`);
});

now open up 2 terminal. in the first terminal run

yarn build:watch

and in the second terminal run

yarn dev

this will iterate the build faster than using nodemon + ts-node.

you should see

successfully run app in port 8000

in the second terminal and verify that our app working as for now

Folder Structure

the folder strructure we gonna build are more or less like this

dist/
src/
- index.ts
- modules
- - user
- - - user.model.ts
- - - user.routes.ts
- - - user.controller.ts
- utils
index.js
packae.json

Creating User Endpoint

in this section we will create these routes

GET /users -> get all users (public)
GET /users/:id -> get user detail (protected)
POST /users -> Create user / register (public)
POST /users/auth -> Login User (public)

first thing first let's create the users module folder like in the above. then build the model in src/modules/user/user.model.ts

Creating User model

We will be using mongoose and bcrypt (for password encryption) for this, so let's install these

yarn add mongoose bcrypt

then let's define our model

// user.model.ts

import { Schema, model } from 'mongoose';
import bcrypt from 'bcrypt';

function hashPassword(value: any) {
  return bcrypt.hash(value, 'randomSalt');
}

const UserSchema = new Schema({
  email: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true,
    select: false,
    set: hashPassword
  },
  name: {
    required: true,
    type: String
  }
});

const User = model('User', UserSchema);

export default User;

and then let's build our mongoose connection in the helper initDb in src/utils/initDB.ts

import mongoose from 'mongoose';

const uri = 'mongodb://localhost:27017/forum';

const initDB = () => {
  return mongoose.connect(
    uri,
    {
      useNewUrlParser: true,
      useFindAndModify: false
    },
    err => {
      if (err) {
        console.log(err.message);
        throw new Error('Error Connecting to Database');
      }
    }
  );
};

export default initDB;

now the db connection and setup is ready. in the next article we will try to build the controller.

React Native JS Only Environment Variable Library

Muhammad Hanif — Thu, 02 Jan 2020 20:38:06 +0000

Hi guys, So a few days ago I read post here about Environment Variable in React Native, the Author made me realize that an Envfile should be build/compile time only.
so I just created a library for React Native JS-only Environment variable. checkit out
https://github.com/hanipcode/rnenv

My goals

can be installed as dev dependency
JS only, no need native modules (you can use react-native-config for that)
suport multiple environment
select environment as command for example rnenv ENV=production npm run build:android

sorry for my bad english though.