Simplifying Backend Tasks for Frontend Developers with Manifest, a One-File Solution

At Codrops, we’re all about open source! Today, we’re excited to welcome Bruno Pérez, who’s here to introduce us to Manifest—a simple, one-file solution for handling backend tasks. Have an open source project you’d like to share with our community? Let us know!

When delivering a static frontend to a client, nothing is more frustrating than hearing, “Nice job! But can I edit this part…and that part too?” as they point to different sections of the site. Now, you’re stuck explaining backend limitations, which often leaves the client feeling disappointed.

EEven though there’s a big technical difference between frontend and backend development, non-technical clients often don’t realize it. This isn’t a one-off situation either; a study we conducted showed that most frontend developers regularly get asked to handle backend tasks.

The doughnut chart below shows responses to the question, “How many backend requests do you receive per year?”

Without solid backend expertise, some developers will attempt backend tasks even if it’s not their strong suit, often leading to wasted time. Others may decline the work altogether, missing out on potential business and leaving clients unsatisfied.

Building and managing a backend is challenging, especially if it’s not your area of focus. Even for simple needs, you’re faced with selecting a runtime, a database, a framework, and building an API from scratch.

Recently, Backend-as-a-Service (BaaS) solutions have emerged, offering ready-to-use features to speed up development. However, these services can still be tough to use effectively without a grasp of key backend concepts.

That’s why we created Manifest: a single-file backend designed with simplicity and inclusivity in mind. Our goal is to make it easy for any developer to quickly set up and manage a backend.

How it works

Manifest is an open-source project built around a single YAML file. By simply describing your data in this file, you instantly get a complete backend with:

• A non-technical admin panel that you can give to your clients
• A fully functional REST API with its live OpenAPI documentation
• An abstracted database to store all your data
• Key backend features out-of-the-box: Auth, Validation, File storage, Image resizing and more

Manifest can be used in many applications:

• Making an app or website dynamic
• Create a minimal CMS or ERP
• Storing form data
• Restrict content to logged-in users
• and many more

This code below is an example of a todo app implementation:

name: My TODO App ✅
entities:
  Todo:
    seedCount: 10
    properties:
      - title
      - { name: completed, type: boolean }

To achieve this simplicity, we had to find the most human-friendly language: YAML. It is a minimal-syntax data serialization language (not a programming language) that regained a lot of attention recently as it became mainly used in the DevOps / CI-CD world. Let’s say that you do not really have to learn YAML, it just seams logical for everyone who did a bit of coding.

On top of that we created Manifest’s Domain Specific Language (DSL) that surcharges YAML with the possibility of creating entities and properties easily.

The admin panel view for the todo app:

Make your frontend dynamic with Manifest

Manifest is pretty easy to install, you just need to have NodeJS v18+.

Run it directly from your client app root of in a new folder:

npx add-manifest

This will install the dependencies as well as creating a new manifest folder with a backend.yml file. This is the heart of your backend.

name: My pet app 🐾

 entities:
  Owner 😃:
    properties:
      - name
      - { name: email, type: email }

  Cat 😺:
    properties:
      - name
      - { name: age, type: number }
      - { name: birthdate, type: date }
    belongsTo:
      - Owner

You can now visit:

• The admin panel at http://localhost:1111
• The OpenAPI doc at http://localhost:1111/api

From here, you can go to your manifest/backend.yml and tweak from here. The following code generates a Twitter clone:

name: Twitter clone
entities:
  Tweet 🐦:
    properties:
      - { name: content, type: text }
      - { name: createdAt, type: timestamp }
    belongsTo:
      - User

  User 👤:
    properties:
      - name
      - { name: avatar, type: image }

Pretty neat, right? The code above specifies the 2 entities (Tweet and User), their properties and their relationship (many-to-one). After saving, let’s generate a bunch of dummy data with the seed command:

npm run manifest:seed

If we want to resize uploaded avatars into several sizes, replace the User entity code by this one:

User 👤:
  properties:
    - name
    - {
        name: avatar,
        type: image,
        options:
          {
            sizes: { small: { height: 90, width: 90 }, large: { width: 200 } }
          }
      } 

There are many other backend features out-of-the-box like allow users to login or restrict access.

Then from your frontend, you can use the REST API to do HTTP requests like this:

// Fetch tweets
GET http://localhost:1111/api/dynamic/tweets

// Order them by last created first
GET http://localhost:1111/api/dynamic/tweets?orderBy=createdAt&order=DESC
  
// Join Users
GET http://localhost:1111/api/dynamic/tweets?relations=user
  
// Filter Tweets by owner
GET http://localhost:1111/api/dynamic/tweets?relations=owner&owner.id_eq=1

Or download the JavaScript SDK to your frontend to use as a more natural language:

// Fetch tweets
const tweets = await manifest.from('tweets')
                             .find()

// Order them by last created first
const orderedTweets = await manifest.from('tweets')
                                    .orderBy('createdAt', {desc: true})
                                    .find()

// Join Users
const tweetsWithUsers = await manifest.from('tweets')
                                      .with(['user'])
                                      .find()

// Filter Tweets by owner
const filteredTweets = await manifest.from('tweets')
                                     .with(['user'])
                                     .where('user.id = 1')
                                     .find()

How the Manifest Project Started

Manifest was born from an internal project at Buddyweb, our digital agency based in Paris. We started using a skeleton in order to gain time making backends and admin panels.

However when we first open-sourced this tool (named CASE at that time), we received mixed feedback from developers as the technical stack was too specific and only suited our internal processes.

This is when we understood that within the overwhelming number of stacks and libraries available, people have to really choose wisely which ones they want to invest time to learn. And Manifest was born, a way to get started with backend development with nothing to learn.

After a small Proof-of-Concept that caught some attention in Hacker News, we are currently incubated at HEC incubator at Station F, the world largest startup campus. We want to continue our journey building the simplest backend in the world, guided by our love for Open Source software.

Manifest is now in BETA and available on Github. We are starting to get many positive energy from different communities, if you want to be part of it or just to follow the project, give us a ⭐ on Github. We expect people to build nice things with Manifest in the near future.

Cheers ! 🦚💗