Forem: Yıldıray Ünlü

Best Open-Source Headless CMS to Try for Your Next Application

Yıldıray Ünlü — Mon, 02 May 2022 06:27:31 +0000

A headless CMS system, which can be developed quickly, contains many features you need, and helps you to produce products very quickly compared to traditional systems.

What is a headless CMS?

Headless CMS are basically systems that distribute content with a database and restfull API. There is no front-end system, hence the name “headless”.

It allows you to create, store, manage and modify your content. Even if you don't have any coding or technical expertise, you can create a website and start publishing content right away using a good CMS like WordPress, Wix, Joomla.

However, with the developing technology and changing needs, traditional systems have turned into cumbersome, difficult to develop systems.

In this article, I will talk about headless open source cms that you can consider using in your next project.

Strapi

It is the leading open source headless CMS for your applications after Strapi. It is customizable and 100% JavaScript that makes it easy and simple to build a performant, customizable and self-hosted content API.

Strapi is an open source platform and has many contributors. It is easy to customize the API and admin panel. It has become more powerful with plugins. It has an advanced and developer-oriented SDK.

Free service with limited features. Get more benefits with the paid plan starting at $9/month.

Directus

It is one of the best Open Data Platforms for turning SQL databases into beautiful no-code apps and APIs with Directus. Strengthens your project with innovative solutions.

You can use Directus for free on your own server. With the Cloud solution, you can use it effortlessly by paying $25/month.

AppWrite

Appwrite is an end-to-end backend server that is aiming to abstract the complexity of common, complex, and repetitive tasks required for building a modern app.

Appwrite provides you with a set of APIs, tools, and a management console UI to help you build your apps a lot faster and in a much more secure way. Between Appwrite different services, you can find user authentication and account management, user preferences, database and storage persistence, cloud functions, localization, image manipulation, and more.

Netlify CMS

Build flexible and faster web projects using Netlify CMS in combination with the static site builder. Netlify CMS stores your content in a Git repository for easier and simpler versioning. It also helps with multi-threading and handling content updates within Git.

It is designed as a one-page React app; so you can add UI widgets, editor plugins and backends to support various Git platform APIs.

Ghost

Start your headless CMS journey with Ghost and learn how to create beautiful standalone publications. From local environment to product development, follow the installation guide and install the software easily. You can design your own templates using this guide. By understanding Ghost's configuration and architecture, you can create new websites, apps, etc. you can create.

Keystone

Build faster content with the Keystone. Just describe your schema and get awesome Management UI and GraphQL API for data and content.

Submit the code with APIs without sacrificing the flexibility of the backend. It offers multiple field types, session management, custom schema, access control, database migrations, powerful filters, relational data, event hooks, automated CRUD, and more.

Refine

If you are looking for a framework that will provide extreme customizability to your application, refine will be a very good alternative. Refine doesn't have any back-end support yet, but if you have a rest-full API or GraphQL api it allows you to build very flexible applications.

Refine comes with Ant Design and can also be used headless if you prefer.

Conclusion

Headless CMS systems offer a modern and efficient approach to creating and distributing content across multiple channels with high performance, flexibility, scalability and a host of useful features.

So, if you are looking for an open source headless CMS system, check out the above options based on your needs.

How to make authorization ready admin panel with NestJS?

Yıldıray Ünlü — Mon, 21 Feb 2022 08:09:28 +0000

All the steps described are in this repo.

Intro

In the previous blog post, we used nestjs with an api and refine in the admin panel. In this blog, let's add authorization to both api and admin panel.

Scenario

Let's have two roles in this system, they are admin and editor. In the API we prepared, we had two crud processes that we categorized as companies and jobs.

In this scenario; editor can only list companies, not any deletion or additions. Have the authority to list and create job postings. Let admin have authorization for all transactions.

Authorization

I used nestjsx-crud in the api we prepared. This library makes CRUD operations very easy. However, there is no support on the authorization side. That's why I made use of the accesscontrol library, which can be easily integrated with both nestjs and refine.

Using AccessControl in API

In the first step, let's install nestjs-access-control in our project for accesscontrol integration to the api.

npm install nest-access-control

I'm specifying a role as the AccessControl supports. According to our scenario, this should be as follows:

// app.roles.ts

import { RolesBuilder } from 'nest-access-control';

export enum AppRoles {
  ADMIN = 'ADMIN',
  EDITOR = 'EDITOR',
}

export const roles: RolesBuilder = new RolesBuilder();

roles
  // editor
  .grant(AppRoles.EDITOR)
  .create('jobs')
  .update('jobs')
  // admin
  .grant(AppRoles.ADMIN)
  .extend(AppRoles.EDITOR)
  .create(['companies'])
  .update(['companies'])
  .delete(['companies', 'jobs']);

Now I import AccessControlModule.

  // app.module.ts

  import { roles } from './app.roles';

    @Module({
      imports: [
        ...
        AccessControlModule.forRoles(roles)
      ],
      controllers: [...],
      providers: [...],
    })
    export class AppModule {}

After determining the roles and privileges, we add the ACGuard class to the controller UseGuards.

import { ACGuard } from 'nest-access-control';

...
@UseGuards(JwtAuthGuard, ACGuard)
@Controller('companies')
export class CompanyController implements CrudController<CompanyEntity> {}
...

Now we define resource and action for methods using UseRoles decorator. For example, we override for the companies resource and the create action as follows.

import { ACGuard, UseRoles } from 'nest-access-control';

...
@UseGuards(JwtAuthGuard, ACGuard)
@Controller('companies')
export class CompanyController implements CrudController<CompanyEntity> {
  constructor(public service: CompanyService) {}

  get base(): CrudController<CompanyEntity> {
    return this;
  }

  @Override()
  @UseRoles({
    resource: 'companies',
    action: 'create',
  })
  createOne(
    @ParsedRequest() req: CrudRequest,
    @ParsedBody() dto: CompanyCreateDto,
  ) {
    return this.base.createOneBase(req, <CompanyEntity>dto);
  }
...

Similarly, we add this decorator for other methods.

After these operations, we complete the authorization process on the API side. Now we will do the authorization to the admin panel that we created with refine.

Using AccessControl in refine (dashboard)

refine; It supports many authorization tools, very flexible. What we need to do; Defining an accessControlProvider inside the <Refine /> component.

accessControlProvider is implemented only one asynchronous method named "can" to be used to control whether the requested access is granted. This method takes resource and action with parameters.

// App.tsx

<Refine
  ...
  accessControlProvider={{
    can: async ({ resource, action }) => {
      let can: boolean = false;
      const stringifyUser = localStorage.getItem('refine-user');
      if (stringifyUser) {
        const { roles } = JSON.parse(stringifyUser);

        roles.forEach((role: string) => {
          switch (action) {
            case 'list':
            case 'show':
              can = ac.can(role).read(resource).granted;
              break;
            case 'create':
              can = ac.can(role).create(resource).granted;
              break;
            case 'edit':
              can = ac.can(role).update(resource).granted;
              break;
            case 'delete':
              can = ac.can(role).delete(resource).granted;
              break;
          }
        });
      }
      return Promise.resolve({ can });
    },
  }}
/>****

Now let me explain a little bit of this code I wrote. First we need the role of the logged in user. We saved it to local storage during login.
Then we match the refine actions with the accessControl's actions and check its authorization with the granted method. I also resolve the returned result.

Conclusion

As a result, we have done the authorization on both the ui (dashboard) side and the api side.

Build fast and customizable admin panel with NestJS.

Yıldıray Ünlü — Mon, 04 Oct 2021 14:33:55 +0000

All the steps described are in this repo.

Intro

NestJS is a framework for building efficient, scalable Node.js server-side applications. With nestjsx/crud we can add CRUD functions quickly and effortlessly on this framework.

In this article, we will prepare a simple job-posting application. We will also use the refine framework for the admin panel. The project will consist of two parts, api and admin.

NestJS Rest Api

To start playing with NestJS you should have node (>= 10.13.0, except for v13) and npm installed.

Create Project Folder



mkdir job-posting-app
cd job-posting-app

Setting up a new project is quite simple with the Nest CLI. With npm installed, you can create a new Nest project with the following commands in your OS terminal:



npm i -g @nestjs/cli
nest new api

TypeORM is definitely the most mature ORM available in the node.js world. Since it's written in TypeScript, it works pretty well with the Nest framework. I chose mysql as database. TypeORM supports many databases (MySQL, MariaDB, Postgres etc.)

To start with this library we have to install all required dependencies:



npm install --save @nestjs/typeorm @nestjs/config typeorm mysql2

Create an .env.example file. Here we will save the database information.
Create and configured a docker-compose file for MySQL.
Create a ormconfig.ts file for migrations.
Add the following scripts to the package.json file for migrations. ```bash

"typeorm": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js",
"db:migration:generate": "npm run typeorm -- migration:generate",
"db:migration:run": "npm run typeorm -- migration:run",
"db:migration:revert": "npm run typeorm -- migration:revert",
"db:refresh": "npm run typeorm schema:drop && npm run db:migration:run"

- Import the `TypeOrmModule` into the `app.module.ts`

**Install nestjsx-crud**
I used [nestjsx-crud](https://github.com/nestjsx/crud) library because it makes crud functions easier.

```bash


npm i @nestjsx/crud @nestjsx/crud-typeorm class-transformer class-validator

Since the steps to create Entities Contorllers, and services are very long, I do not explain step by step. You can check the repo for details.

It created these end-points automatically with nestjsx/crud.

Now let's refine the admin panel. With Superplate, we can quickly create a refine project.



npx superplate-cli admin

Answer as below:



✔ Select your project type › refine
✔ What will be the name of your app · admin
✔ Do you want to customize theme?: · less
✔ Data Provider: · nestjsx-crud-data-provider
✔ Auth Provider: · none
✔ Do you want to add an example page? · example-resource
✔ Do you want to customize layout? · custom-layout
✔ i18n - Internationalization: · no



cd admin
npm run dev

Refine's sample application will welcome you.

Change api url in admin/src/App.tsx



const API_URL = "http://localhost:3000";

Let's add the listing page in refine for the companies crud end-point.

/admin/src/pages/companies/list.tsx



import {
  List,
  Table,
  TextField,
  useTable,
  IResourceComponentsProps,
  getDefaultSortOrder,
  Space,
  EditButton,
  DeleteButton,
  TagField,
  ShowButton,
} from "@pankod/refine";
import { ICompany } from "interfaces";

export const CompanyList: React.FC<IResourceComponentsProps> = () => {
  const { tableProps, sorter } = useTable<ICompany>({
    initialSorter: [
      {
        field: "id",
        order: "desc",
      },
    ],
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column
          dataIndex="id"
          key="id"
          title="ID"
          render={(value) => <TextField value={value} />}
          defaultSortOrder={getDefaultSortOrder("id", sorter)}
          sorter
        />
        <Table.Column
          dataIndex="name"
          key="name"
          title="Name"
          render={(value) => <TextField value={value} />}
          defaultSortOrder={getDefaultSortOrder("name", sorter)}
          sorter
        />
        <Table.Column
          dataIndex="location"
          key="location"
          title="Location"
          render={(value) => <TextField value={value} />}
          defaultSortOrder={getDefaultSortOrder("location", sorter)}
          sorter
        />
        <Table.Column
          dataIndex="isActive"
          key="isActive"
          title="Is Active"
          render={(value) => <TagField value={value} />}
          defaultSortOrder={getDefaultSortOrder("status", sorter)}
          sorter
        />
        <Table.Column<ICompany>
          title="Actions"
          dataIndex="actions"
          render={(_, record) => (
            <Space>
              <EditButton hideText size="small" recordItemId={record.id} />
              <ShowButton hideText size="small" recordItemId={record.id} />
              <DeleteButton hideText size="small" recordItemId={record.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

Similarly, let's add the create, edit and jobs crud pages under the pages folder.

Next, let's define the resources in <Refine> (App.tsx):



      <Refine
           dataProvider={dataProvider}
           ...
            resources={[
                {
                   name: "companies",
                   list: CompanyList,
                   create: CompanyCreate,
                   edit: CompanyEdit,
                   show: CompanyShow,
                },
                {
                   name: "jobs",
                   list: JobList,
                   create: JobCreate,
                   edit: JobEdit,
                   show: CompanyShow,
                },
           ]}
    />