Remote API example

[Lorand Csatlos]

Do you have documentation or examples of remote requests/responses?

[Brendon Ngirazi]

Not yet, this is still a WIP, but I plan on setting up some demos in the future. Currently the only way to get an idea of how to setup your remote server would be to just copy the default config in the README, then check the payload in devtools.

Anyway the final API could look something like:
GET https://api/templates/ load all templates

Returns

[
   {
      "idx": "UUIDv4",
      "id": "Page name",
      "template": false,
      "thumbnail": "",
      "gjs-html": "",
      "gjs-css": "",
      "gjs-components": "",
      "gjs-styles": ""
   }
]

POST https://api/templates/{idx: UUIDv4} store template

Expects

   {
      "idx": "UUIDv4",
      "id": "Page name",
      "template": false,
      "thumbnail": "",
      "gjs-html": "",
      "gjs-css": "",
      "gjs-components": "",
      "gjs-styles": ""
   }

GET https://api/templates/{idx: UUIDv4} load template

Returns

  {
      "idx": "UUIDv4",
      "id": "Page name",
      "template": false,
      "thumbnail": "",
      "gjs-html": "",
      "gjs-css": "",
      "gjs-components": "",
      "gjs-styles": ""
   }

DELETE https://api/templates/{idx: UUIDv4} delete template

Which would have the following setup:

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  storageManager:  {
    type: 'rest-api',
    // the URIs below can be the same depending on your API design 
    urlStore: 'https://api/templates/',// POST
    urlLoad: 'https://api/templates/',// GET
    urlDelete: 'https://api/templates/',// DELETE
  },
  plugins: ['grapesjs-template-manager'],
  pluginsOpts: {
    'grapesjs-template-manager': { /* options */ }
  }
});

All the fields are generated from the editor so you just need to setup your API to receive and return data in that format. I'd recommend you check the network tab so you get a more accurate format for the payloads.

[Lorand Csatlos]

Makes sense now. I tried doing the Network way, but even with Firestore it crashes, with some "cs." error, that's why I stopped. I'll try with this solution.

Thanks!

[Lorand Csatlos]

@Ju99ernaut this was the issue, and I am still getting this on editor load ... do you have a fix for this already or should I digg in?

[Brendon Ngirazi]

There's still some work to be done for Firestore, mainly error handling. As for the keys error I already have a fix, I'll build and publish the local changes soon.