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:

Configuration:

AssetManager, upload and display pictures:

  • 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…

  • 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 :

  • 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 :

--

--

--

Clean Code Padawan

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Customs Events In JavaScript

Vue.js and ASP.NET MVC

INTRODUCTORY GUILD TO JAVASCRIPT [EPISODE 2]

JDBC Fetch Size

Model-View-Controller(MVC) architecture versus front-end web programming. What are the differences?

Child to Parent | React

React hooks with TypeScript

How To Host a Vue.js Static Website With GCP Cloud Storage

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
AntoineGGG

AntoineGGG

Clean Code Padawan

More from Medium

Next JS- How to create protected routes and redirect a user to login page if unauthenticated

Learn Next.js setting up & routing in no time

NextJs App — Part 1

10 React Best Practices to Implement in 2022