Convert JSON to HTML server-side

[AdamTorma]

So first of all, thank you @artf for this amazing project.

I have a question:
Is it possible to easily convert the components-JSON to HTML on the server-side (in a Node.js environment)? If it is possible, can you give me a hint how to achieve this?

On the client-side it's quite straightforward:
I can get the components-JSON (JSON.stringify(editor.getComponents());) and save it to my database. Then I can reuse my components later (editor.setComponents();) and get the HTML (editor.getHtml();) to show it in the browser. In my case though, I have to do it on the server-side.

Any help would be greatly appreciated!

[Ju99ernaut]

Maybe you could install grapesjs server-side(similar to client-side) and use it for rendering, otherwise you'll have to reverse engineer the renderer. Another alternative would be to store the generated HTML in the database as well.

[artf]

Well, I think that would be cool but unfortunately, at the moment, we leak a lot of DOM interfaces at the initialization level. So, it might be possible if you're ok with using something like jsdom to avoid breaking stuff due to DOM calls, otherwise, I'd be happy to merge a PR with the proper refactoring (eg. by adding a new headless option)

[Detzler]

+1

need ssr feature so much, can't live without

[bgrand-ch]

Hello,

For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be.

Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close this issue).

Thank you for your understanding.

[anlumo]

Note that the exported HTML retrieved via .getHtml is completely different than what's visible in the editor (all gjs- attributes are missing), so your CSS might not work any more. For exporting, I ended up just grabbing the iframe content instead.

[artf]

@anlumo, unfortunately, grabbing iframe content is not good as each component can have a completely customized view. I mean, it might work for your case but for sure it's not a stable approach.

[anlumo]

Yes, if you have any kind of interactive content, that probably wouldn't work. Fortunately that's not the case for my application.

[artf]

Just a quick update, I've merged the first iteration of the headless option #3671
This is not something I'd heavily use, at the moment, but I think this kind of feature might open a lot of possibilities in the future and it also forces to delineate the purely logical part from the presentational one.

You can check the related test case here which illustrates also some of the examples of usage.

I guess the final goal would be to give the possibility to load, edit and store the JSON file by using the same API and, as you can see from the test file, it should already be possible (but I didn't play that much I'd say).
So, let's say for example that I need to update all the images of some project file, this is how I'd do it:

const editor = grapesjs.init({ headless: true });
const jsonData = await loadProjectData(projectID); // { pages: [...], styles: [...], ... }
editor.loadData(jsonData);
const mainPage = editor.Pages.getMain();
const wrapper = mainPage.getMainComponent();
// note: can't use `.find` method, as it requires DOM API
wrapper.findType('image').map(img => img.set('src', 'placeholder.jpg'));
const newData = editor.storeData();
await storeProjectData(projectID, newData);

@AdamTorma In case of your initial question, you would do something like this

const editor = grapesjs.init({ headless: true });
const components = editor.addComponents({ type: '...' }); // Component Definition
const html = components.map(cmp => cmp.toHTML()).join('');

At the moment is not possible to use all those methods which would require the use of some DOM API (without using something like jsdom). So, doing this editor.addComponents('<div>....'), which triggers the native parser, would not work.
Also, some Component-related methods like find() and closest() require the component to be rendered.

I'll move this issue in a Discussione so for any further update related to the subject, can be discussed there.

[im-Qarch]

you saved me men, right on

[koendeschacht]

Hi @artf thank you for this work! I'm trying to get grapesjs to render our HTML on the server. This is what my code looks like:

import grapesjs from 'grapesjs'

const PAGE_CONTENTS = [
  {
    tagName: 'h1',
    type: 'text',
    components: [
      {
        type: 'textnode',
        removable: false,
        draggable: false,
        highlightable: 0,
        copyable: false,
        selectable: true,
        content: 'Dit is een test!',
        _innertext: false,
      },
    ],
  },
]

export function renderHTML () {
  const editor = grapesjs.init({ headless: true })
  const components = editor.addComponents(PAGE_CONTENTS)
  const html = components.map(cmp => cmp.toHTML()).join('')
  console.log('Rendered HTML is ', html)
}

renderHTML()

In my package.json I added:

"grapesjs": "https://github.com/artf/grapesjs.git#dev",

However, I keep running in this error:

ReferenceError: window is not defined
    at Object.<anonymous> (/home/koen/zelfstandige/give-a-day/site/backend/node_modules/grapesjs/dist/grapes.min.js:2:204)

Do you have any tips on how to solve this? I have tried building grapes.min.js myself while playing around with some webpack settings, but could not solve it.

Thanks in advance!

[artf]

@koendeschacht just added your example here as a test and works as expected.
Are you sure you don't have an old cached grapesjs version?

[artf]

@koendeschacht please try the new release

[koendeschacht]

I just tried the new release but I seem to run in the same problem. I also tried building grapes.min.js myself with the options you suggested but these did not seem to help. If I disable minimization I can see that it fails at these lines:

/* MIT https://github.com/kenwheeler/cash */


var doc = document,
    win = window,

which seems to originate from the cash (https://github.com/fabiospampinato/cash) package. For reference this is the webpack.config.js that I used:

import path from 'path';
import pkg from './package.json';

const rootDir = path.resolve(__dirname);

export default ({config}) => ({
  ...config,
  output: {
    ...config.output,
    filename: 'grapes.min.js',
    libraryTarget: 'umd',
    globalObject: 'this',
  },
  devServer: {
    headers: {'Access-Control-Allow-Origin': '*'},
    disableHostCheck: true,
  },
  module: {
    rules: [
      {
        test: /\/index\.js$/,
        loader: 'string-replace-loader',
        query: {
          search: '<# VERSION #>',
          replace: pkg.version
        }
      },
      ...config.module.rules,
    ],
  },
  optimization: {
    minimize: false,
  },
  resolve: {
    modules: ['src', 'node_modules'],
    alias: {
      jquery: 'cash-dom',
      backbone: `${rootDir}/node_modules/backbone`,
      underscore: `${rootDir}/node_modules/underscore`,
    }
  },
});

[artf]

Thanks Koen, yeah, seems like there are other places on import where DOM stuff are exposed and the test config is not able to catch. I'll try to investigate on the solution and will let you know.

[artf]

Hey @koendeschacht I pushed the fix on dev, please try to pull, build (npm run build:js) and run with your grapesjs code (on my side, I see no issues now)

[koendeschacht]

That seems to have fixed it. Awesome! Thanks!

[babuus]

can you refer me to some sample code to use grapesjs In nodejs @artf

[artf]

The example above is all you need to know for now #3672 (comment)

[yoerriwalstra]

Hey @artf, let me start by saying: thanks for your awesome package and for adding a headless option to it!

However, I'm struggling to get GrapesJS to work server-side. I've read your thread with Koen and tried to reproduce it to the best of my abilities, but without success.

In short: when I add grapesjs to a Node app I've been working on and try to initiate the editor with the headless option,

1. the entire content of grapes.min.js gets printed to my console
2. the following error is thrown:

ReferenceError: document is not defined
    at Module.<anonymous> (/Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:103296)

Stacktrace, for what it's worth

``` ReferenceError: document is not defined at Module. (/Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:103296) at n (/Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:412) at Module. (/Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:596611) at n (/Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:412) at /Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:1214 at /Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:1225 at /Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:81 at Object. (/Users/yoeri/Development/node-grapesjs/node_modules/grapesjs/dist/grapes.min.js:2:203) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) ```

I created a minimal repo that produced the same result. The steps were:

mkdir node-grapesjs && cd node-grapesjs
npm init -y
npm i grapesjs
touch index.js

I pasted in Koen's example code in index.js, with one difference: I imported grapesjs with CommonJS syntax: const grapesjs = require('grapesjs').default because I'm a Node noob and didn't get it to work with the ESM syntax.
Lastly, I run

node index.js

which produces the above mentioned results.

Any idea what I'm doing wrong here?

[koendeschacht]

Hi @yoerriwalstra. This import bug is fixed on the dev branch of the grapjes repo, however it has not yet been released. I have changed my example code in https://github.com/GiveaDay/tmp-grapesjs to reflect this. Could you adapt your code to look like the code in that repo (you'll need to copy the grapes.min.js file) and give it another try?

[yoerriwalstra]

Hey @koendeschacht my code works with your grapes.min.js :D Thanks for the help!.

I thought I was already using the dev branch version of grapesjs after I copied the dependency to my package.json like you showed in your comment:

{ "grapesjs": "https://github.com/artf/grapesjs.git#dev" }

I don't fully understand why that didn't work. I've never had to require a specific branch before, as opposed to a tag, but StackOverflow leads me to believe it should have worked like this.

I guess I'll be keeping a close eye on new releases, hoping a fix will be published soon.

Thanks again for your help.

[SachinPuthiyoth]

Hi @artf, thank you for all the work on the grapesjs framework and thanks a lot for the headless option.

We were migrating our custom editor layout on to the grapesjs editor experience and used the headless option to build the editor using the existing components, which are added as custom components in grapesjs using plugins. While adding the plugin for custom components in the grapesjs.init() call, we ran into a DOM call which broke the editor initialization.

The error seems to be from src/index.js

Shouldn't we have a check here? Something like const wplg = (isWin() ? window: global)[pluginId] or adding !isFunction(pluginId) in the existing if condition? I'm not sure if that would have an impact elsewhere. Just thought of sharing this.

PS: Adding the plugins in the editor initialization as named-plugins seems to be a work-around here and works in our case.

[artf]

yeah sure, you're right. I'll add that check in the next release