Formidablejs: The one person framework
Tags: showdev, node, news, mvc
Published: 2022-01-30 22:10:11

## What is Formidable?

Formidable (or formidablejs) is a Laravel inspired API framework for building backend applications. It uses [Imba](https://imba.io) by default and has native support for JavaScript and TypeScript.

While Formidable is meant to provide a smooth process for building API applications, you may also use it to build Fullstack applications thanks to [Inertia](https://inertiajs.com/) and [Laravel Mix](https://laravel-mix.com/) providing that "one person framework" feel.

Formidable borrows a lot of its features from Laravel, and also uses [Fastify](https://www.fastify.io/) under the hood.

## A few Formidable features

#### Database

Formidable has out of the box support for `SQL` Queries and `Redis`. The SQL data layer is powered by Knex.js, while the Redis data layer is powered by Node-Redis.

#### Migrations

Out of the box, Formidable provides a simple database migration system that allows you to define and share your database schema definition. This is a great way to ensure that your database schema is always in sync with your application code.

#### Auth

Formidable provides a starter authentication system for both `session` and `jwt` based applications. By default, `session` based authentication is enabled.

The `session` based authentication system enables the use of `cookies`, and stores the session data in `memory`, `file` or `redis`. While the `jwt` based authentication system enables the use of JWT tokens, and stores authentication data in the database.

#### Routing

Just like any other framework, routing has become a standard feature. Formidable provides a routing system similar to Laravel's router. You can easily group your routes, limit them to specific middleware's, etc.

#### Error Handling

Formidable has an Error Handler class which allows you to intercept any errors and return a different response. Formidable also provides Bugsnag out of the box.

#### CLI Tool

Craftsman is the command line interface included with Formidable. Craftsman is installed as a global package and on every Formidable application. It provides a number of helpful commands that can assist you while you build your application.

## Project setup

First thing you want to do, is install the CLI tool:

```bash
$ npm i -g @formidablejs/craftsman
```

Once the CLI installation is done, run the following command:

```bash
$ craftsman new project-name --web
```

cd into the project folder:

```bash
$ cd project-name
```

<b>Optional:</b> should you want to install Vuejs or React, run the following commands:

```bash
$ craftsman inertia
$ npm run mix:dev
```

When done with everything, serve your application using the following command:

```bash
$ craftsman serve --dev
```

Once Formidable is running, you can go to `http://localhost:3000` in your browser to see if your application was successfully created.
You should see the following:

![Formidable Welcome Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m0ce84q3qb2jchp9hko.png)

## Project structure

Lets take a look at what our project looks like:

| Directory                | Description
|:-------------------------|:-------------
| `/app`                   | Contains the core code of your application.
| `/app/Http/Controllers`  | Contains applicaiton controllers.
| `/app/Http/Middleware`   | Contains request middlewares.
| `/app/Http/Requests`     | Contains form and API requests.
| `/app/Http/Models`       | Houses `bookshelf` models.
| `/app/Http/Resolvers`    | Contains application service resolvers.
| `/bootstrap/cache`       | Contains the cached config file and database settings file.
| `/config`                | Contains application configuration files.
| `/database/migrations`   | Houses your application migration files.
| `/public`                | Houses your assets such as images, JavaScript, and CSS.
| `/resources/lang`        | Contains language files.
| `/resources/views`       | Contains Imba view class files.
| `/routes`                | Contains application routes.
| `/storage/framework`     | Contains core application data.
| `/storage/session`       | Contains application sessions.

> Note: in some cases, you might see more folders; This is dependent on the type of project you created.

## Demo

#### Creating your first Route

To add a new route, open the `routes/web` routes file and add the following lines at the bottom of the routes file:

```py
Route.get '/ping', do 'pong'
```

Now, when visiting `http://localhost:3000/ping`, you should see `pong`.

#### Creating a Controller

In the section above, I showed you how to create a route. Now, let's create a controller and map it to the route:

```bash
$ craftsman make controller HelloController
```

Once created, you can open `app/Http/Controllers/HelloController` and you should see the following code:

```py
import Controller from './Controller'

export class HelloController < Controller
```

Now create an action in the controller:

```py
import Controller from './Controller'

export class HelloController < Controller

	def index
		'Hello World'
```

After adding the `index` action, you can go to your `routes/web` file import your new controller:

```py
import { HelloController } from '../app/Http/Controllers/HelloController'
```

Once you've imported your controller, you can add a new route and map it to the action you created in the controller:

```py
Route.get 'hello', [HelloController, 'store']
```

You should now see `Hello World` when visiting `http://localhost:3000/hello`

> For a fullstack demo application with crud operations see: [https://github.com/donaldp/pingcrm](https://github.com/donaldp/pingcrm)

![PingCRM Demo Application](https://raw.githubusercontent.com/donaldp/pingcrm/dev/screenshot.png)

## Conclusion

While Formidable provides a lot of useful features, it still has a long way to go before hitting a stable release. For now, just play around with it, report bugs and contribute if you can!

Documentations: [https://formidablejs.org](https://formidablejs.org)
Github: [https://github.com/formidablejs](https://github.com/formidablejs)
PingCRM Demo: [https://github.com/donaldp/pingcrm](https://github.com/donaldp/pingcrm)