DEV Community

Cover image for Formidablejs: The one person framework
Donald
Donald

Posted on

Formidablejs: The one person framework

What is Formidable?

Formidable (or formidablejs) is a Laravel inspired API framework for building backend applications. It uses Imba 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 and Laravel Mix providing that "one person framework" feel.

Formidable borrows a lot of its features from Laravel, and also uses Fastify 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:

$ npm i -g @formidablejs/craftsman
Enter fullscreen mode Exit fullscreen mode

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

$ craftsman new project-name --web
Enter fullscreen mode Exit fullscreen mode

cd into the project folder:

$ cd project-name
Enter fullscreen mode Exit fullscreen mode

Optional: should you want to install Vuejs or React, run the following commands:

$ craftsman inertia
$ npm run mix:dev
Enter fullscreen mode Exit fullscreen mode

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

$ craftsman serve --dev
Enter fullscreen mode Exit fullscreen mode

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

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:

Route.get '/ping', do 'pong'
Enter fullscreen mode Exit fullscreen mode

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:

$ craftsman make controller HelloController
Enter fullscreen mode Exit fullscreen mode

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

import Controller from './Controller'

export class HelloController < Controller
Enter fullscreen mode Exit fullscreen mode

Now create an action in the controller:

import Controller from './Controller'

export class HelloController < Controller

    def index
        'Hello World'
Enter fullscreen mode Exit fullscreen mode

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

import { HelloController } from '../app/Http/Controllers/HelloController'
Enter fullscreen mode Exit fullscreen mode

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

Route.get 'hello', [HelloController, 'store']
Enter fullscreen mode Exit fullscreen mode

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

PingCRM Demo Application

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
Github: https://github.com/formidablejs
PingCRM Demo: https://github.com/donaldp/pingcrm

Top comments (0)