Creating and managing landing pages with React and GrapesJS

Photo by Günter Hoffmann on Unsplash

What you’ll se here:

  • Installation of GrapesJS
  • GrapesJS block basis plugins, and why it is the choosen one
  • RemoteStorage (DB) to save and load customer’s work
  • AssetsManager to upload and use custom pictures.
  • Custom blocks creation
  • Custom css rules
  • Avoid tricky error
  • and so on…

What you’ll don’t see:

  • Create-react-app
  • Back-end
  • Really deep dive into the editor

Installation:

Nothing special here we need those two packages from npm/yarn to play around (I skipped the create-react-app part) :

Configuration:

Let’s create our main component in our react app: Editor.js which initialize an instance of a grapesJs editor:

AssetManager, upload and display pictures:

With this library, you can open an asset manager when you drag n drop the image block inside the editor which looks like this:

  • Headers: to pass some custom headers to the request
  • params: if you need to passe some extra info inside the req.body (not the req.params one)
  • assets: your state with your pictures
  • credentials: Normally the value is on “includes” but makes some CORS problems with my requests, so I switched the value with “omit”.
  • uploadName: the name of your file upload that should match with the multer name (really important)
  • upload: the endpoint where we send our post request to upload our files, if you want to see your new pictures directly into your assetManager without rerender, the response of your request should be: { data: [“https://myFirstPicture.com”,”https://mySecondPicture.com”, etc…] }

StorageManager and database record, store and load content…

Here I’ll describe methods to store and load content into the database with api call but you can use the local storage to do it -btw grapesjs will use it if remote storage connexion failed.

  • type:”remote” to use XMLHttpRequest to POST/PATCH && GET
  • autoload with ternary operator depend if an id is provided, if yes you trigger the get Request.
  • urlStore: our api endpoint to store content.
  • urlLoad: our api endpoint to load content.
  • fetchOptions: Here is the main trick, I don’t know if it’s the right way but I manage the problem with this property:
Photo by Austin Ramsey on Unsplash

Creating Custom Blocks, Custom Styles, importing google fonts and adding some css rules :

In our EditorConfig.js we can add :

  • canvas object is to inject google font into our editor.
  • customfonts object is to display it in the right toolbar:
  • customCss object is a list of class that my customer can use avoiding create them with the builder :

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store