Deep dive into middlewares in Laravel

Posted on: Tue, 09-Jan-2018
Posted by: Nwanze Franklin

What is a Laravel middleware?

It is a feature in Laravel which provides a mechanism for filtering HTTP requests entering your application. This allows you to hook into Laravel request processing work flow to perform some kind of logic that decides how your application works.

What would you use middleware for?

  • Protecting your routes
  • Setting headers on HTTP responses
  • Logging requests to your application
  • Sanitizing incoming parameters
  • Enable site-wide maintenance mode
  • Manipulating responses generated by your application

How to create a custom middleware?

Creating a middleware in Laravel is as simple as running the following command. 

This creates a middleware with the specified name in the middleware folder located in app.

Luckily, Laravel scaffolds the basic things needed to start customizing your middleware.

Notice the handle function which accepts two parameters $request and $next . The $request parameter holds the incoming request URI in your application while $next parameter is used to pass the request deeper into the application. The logic needed is written within the handle function and that brings us to types of middleware-before middleware and after middleware.

Before middleware as the name suggests handles some set of logic before forwarding the request deeper into the application. On the other hand after middleware runs after the request has been handled by the application and the response built.

Before middleware:

After middleware:

Categories of Middleware

  • Global middleware
  • Route middleware

Global middlewares run for every single request that hits the application. Laravel comes with most of these middlewares such as ValidatePostSize, TrimStrings,CheckForMaintenanceMode etc.

Route middlewares run only on routes they are attached to e.g redirectIfAuthenticated.

Registering a Middleware

Any middleware created has to be registered as that is the only way Laravel knows that such exists. To register a middleware simply open the file named kernel.php which is located inside Http folder like so:

This file contains list of all registered middlewares that come with Laravel by default. it contains three major arrays which include $middleware , $middlewareGroups and $routeMiddleware


How to set up a React.js/TypeScript project using create-react-app

Posted on: Sat, 28-Oct-2017
Posted by: Chidume Nnamdi(ngArchangel)

Brief Prelude

Being an Angular developer, I am used to writing codes in TypeScript which I love so much because of TypeScript (a strict syntactical super-set of JavaScript), adds optional static typing to your codes. Recently, I started working on how to transition my Angular/TypeScript projects into React/TypeScript. After scouring the web, I found tons of articles on how to setup React/TypeScript project using Webpack, they were very stressful and brain-racking. I fine-tuned my search and I found out how you could easily setup a React/TypeScript project with zero stress using create-react-app and react-scripts-ts.

Why is this important

Suppose you want to start a new project with React.js and because you are a good software developer, you want to use npm, babel and Webpack. what comes to mind is

Where do i start?

Before create-react-app you had to search and try an infinite amount of boilerplates and example repositories to finally had a mediocre setup after two days of wasted time.
Now it’s easier .


We will learn how to create a React/TypeScript project using the create-react-app utility. By the end, we’ll have

* a project with React and TypeScript

We’ll use the create-react-app tool to quickly get set up.I assume that you’re already using Node.js with npm.

Install create-react-app

First, install the global package.

npm install -g create-react-app

Create our new project

We’ll create a new project called myreactapp:

create-react-app myreactapp — scripts-version=react-scripts-ts

create-react-app is a global command-line utility that you use to create new projects
react-scripts-ts is a development dependency in the generated project to take the standard create-react-app project and bring TypeScript into the mix.

The create-react-app — scripts-version=react-scripts-ts command will proceed to create the myreactapp folder and install the dependencies in the package.json file it generated.

Your project layout should look like this.

├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
| — — index.tsx
| — — registerServiceWorker.ts
| — — logo.svg
| — — App.tsx
| — — App.test.tsx
| — — App.css
| — — index.css
| — — assets/
├─ package.json
├─ tsconfig.json
└─ tslint.json

tsconfig.json contains TypeScript-specific options for our project.
tslint.json stores the settings that our linter, TSLint, will use.
package.json contains our dependencies, as well as some shortcuts for commands we’d like to run for testing, previewing, and deploying our app.
public contains static assets like the HTML page we’re planning to deploy to, or images. You can delete any file in this folder apart from index.html.
src contains our TypeScript and CSS code.
 *index.tsx is the entry-point for our file, and is mandatory.

Running the project

Ok, now that we are done with the setup. lets fire up our application. First, move into the project folder myreactapp.

cd myreactapp

Then, run the command

npm run start

This runs the start script specified in our package.json, and will spawn off a server which reloads the page as we save our files. Typically the server runs at http://localhost:3000, but should be automatically opened for you.

You can now navigate your favorite browser to localhost:3000 to see our application in action.

React/TypeScript Welcome Screen

Testing the project

Testing is also just a command away:

npm run test

Creating a production build

When running the project with npm run start, we didn’t end up with an optimized build. Typically, we want the code we ship to users to be as fast and small as possible. Certain optimizations like minification can accomplish this, but often take more time. We call builds like this “production” builds (as opposed to development builds).

To run a production build, just run

npm run build

This will create an optimized JS and CSS build in ./build/static/js and ./build/static/css respectively.

You won’t need to run a production build most of the time, but it is useful if you need to measure things like the final size of your app.


You can see that create-react-app is a powerful command-line tool that simplifies the creation of React/TypeScript projects.

I can’t emphasize how useful and important create-react-app is for the ecosystem.

The first and obvious benefit is being able to quickly create new projects without having to think about build infrastructure, which is honestly the most painful part of building a modern React project. create-react-app makes all the hard choices for you and gives you a reasonable set of defaults to work with.

I can’t thank the team behind this little tool enough for making it so easy and so much fun to build React applications!

Becoming A Functional Programmer

Posted on: Sat, 28-Oct-2017
Posted by: Chukwurah Chuka

First of all, functional programming isn’t a tool or a framework, its just a way of writing codes. Just like object oriented programming.

In functional programming a major emphasis is placed on writing code using functions as “building blocks.”

Your program is defined in terms of one main function. This main function is defined in terms of other functions, which are in turn defined in terms of still more functions — until at the bottom level the functions are just language primitives like “number” or “string.”

Ok lets slow down and start from the basics:

First of all… what are functions?

Functions are “self contained” pieces of code that accomplish a specific task. It defines a relationship between a set of possible inputs and a set of possible outputs — they usually take in data, process it, and return a result. Once a function is written, it can be used over and over and over again.

When we’re learning about a programming paradigm — like functional programming — it’s often helpful to consider how the paradigm approaches behavior and data respectively.

Behavior, for example, is handled purely using functions in functional programming.

Data is, well, data. In functional programming, data is immutable — meaning it can’t be changed. Rather than changing data they take in, functions in functional programming take in data as input and produce new values as output. Always.

By treating functions as nothing more special than a piece of data and by only using data that is immutable, we are given a lot more freedom in terms of how we can use functions.

Namely, it allows us to create small, independent functions that can be reused and combined together to build up increasingly complex logic. We can break any complex problem down into smaller sub-problems, solve them using functions, and finally combine them together to solve the bigger problem. 
Considering the ever-growing complexity of software applications, this kind of “building-block” approach makes a huge difference in keeping programs simple, modular, and understandable. This is also why developers strive to make their functions as general-purpose as possible, so that they can be combined to solve large, complex problems and reused to speed up development time for subsequent programs.

Ultimately, the reason that functions are so powerful in functional programming is because the functions follow certain core tenets. Those tenets will be the subject of my email course:

  • Functions are pure
  • Functions use immutable data
  • Functions guarantee referential transparency
  • Functions are first-class entities

After that, I’ll briefly touch on how functional programming applies these tenets to encourage us to think carefully about our data and the functions that interact with it.

By the end, you’ll be able to understand how this approach leads to code that is:

  • Easier to understand (that is, “expressive”)
  • Easier to reuse
  • Easier to test
  • Easier to maintain
  • Easier to refactor
  • Easier to optimize
  • Easier to reason about

Sound exciting? Come along for the ride!