@liro_u/cms-front

CMS FRONT

.env

create a .env and copy paste the following code :

REACT_APP_PROXY=http://localhost:4000

run your new project

Then you just need to run the project with this command in the terminal :

npm start

How to use the CMS

Signup

chose a password for your admin.

Create new Page

go to admin page and click create, it will create a new page.

Add custom react component to the CMS

instruction :

create in src a folder named components and add your custom react components in it.

exemple :

For an exemple i will create a component and i will use it for the rest of the tutorial.

This component is just a text that take a params text to change reactively the text.

Exemple.jsx :

import React from "react";

const Exemple = ({ text = "exemple" }) => {
  return <p>{text}</p>;
};

export default Exemple;

Then in cmsConfig/customComponents.js add your new component like this :

export const customComponents = [
  {
    node: "Exemple",
    type: "Component",
    editorIcon: "draft",
    text: "Exemple",
  },
];

node, type et editorIcon sont obligatoire pour chaque nouveau composant.

• node doit avoir exactement la meme valeur que le nom de la classe du nouveau composant
• type peut prendre la valeur Component ou Container selon si il a une variable children ou non.
• editorIcon peut prendre une valeur d'un nom d'icon trouvable sur la liste de materials icon de google et representera le nouveau composant.

Et text correspond au variable dont on veut donner l'acces a l'utilisateur sur le nouveau composant, avec sa valeur par defaut.

Si on veut creer un folder de composants

export const customComponents = [
  node: "fodler name",
  children: [{
    node: "Exemple",
    type: "Component",
    editorIcon: "draft",
    text: "Exemple",
  }],
];

Enfin il suffit d'ajouter notre classe a la liste qui lui correspond

export const customComponentsConstructorClassification = {
  basicComponents: {
    Exemple,
  },
  basicContainers: {},
  complexContainers: {},
};

Ici on l'ajoute a basicComponents car c'est un component.

Si on avait un container, on l'aurait ajouter a basicContainers, et si on obtenai un resultat étrange alors on l'aurai déplacé dans complexeContainers.