How do I render a page? #6158

Ferks-FK · 2024-09-19T17:14:53Z

Ferks-FK
Sep 19, 2024

I'm trying to retrieve the “built” page to display, but I don't seem to have this information in the DB.

storageManager: {
    type: 'remote',
    stepsBeforeSave: 1,
    autosave: true,
    autoload: true,
    options: {
        remote: {
            urlLoad: 'http://page-builder.localhost/api/load-page',
            urlStore: 'http://page-builder.localhost/api/save-page',
            contentTypeJson: true,
            onStore: result => {
                console.log(result)
                return ({ data: result })
            },
            onLoad: result => {
                console.log(result)
                return result.data;
            },
        }
    },
},

In the onStore function I get this:

{
  assets: [{...}],
  pages: [{...}],
  styles: [{...}],
  symbols: []
}

And that's what's being stored in the DB, for editing the page using Graper this works, but I can't find anything useful in this answer for rendering the page itself.

Note: I found this answer, it says that Graper delivers the gjs-html and gjs-css attributes, which are not present in my case.

mosh-tudor · 2024-09-20T15:10:34Z

mosh-tudor
Sep 20, 2024

@Ferks-FK

Your HTML code is in pages: [{...}], and CSS styles are in styles: [{...}], so you need to find a way to display this content on your page. Everything depends on your stack.

In the end, it should look something like this:

<html ...>
  <head>
   <style>
     = styles
   </style>
  </head>
  <body>
    = html
  </body>
</html>

2 replies

Ferks-FK Sep 20, 2024
Author

@Ferks-FK

Your HTML code is in pages: [{...}], and CSS styles are in styles: [{...}], so you need to find a way to display this content on your page. Everything depends on your stack.

In the end, it should look something like this:
<html ...>
  <head>
   <style>
     = styles
   </style>
  </head>
  <body>
    = html
  </body>
</html>

So those properties (which I mentioned in the stackoverflow link) no longer exist?
Do I literally have to go through that data and build the page?

mosh-tudor Sep 20, 2024

I don't think that comment is still relevant; it was written 4 years ago, when there were no pages in GrapesJS.

You have all the information in the database, and all that's left is to display it on your page.

artf · 2024-09-24T17:52:36Z

artf
Sep 24, 2024
Maintainer

Here you can see an example of how to add HTML/CSS to the project JSON itself in the storage: https://grapesjs.com/docs/modules/Storage.html#common-use-cases

I'd suggest taking it only as an example of how to export the code from pages. Keep the project file separate from the HTML/CSS data, and use the exported code only in the "export"/"publish" action in your application.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How do I render a page? #6158

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How do I render a page? #6158

Uh oh!

Ferks-FK Sep 19, 2024

Replies: 2 comments · 2 replies

Uh oh!

Uh oh!

mosh-tudor Sep 20, 2024

Uh oh!

Ferks-FK Sep 20, 2024 Author

Uh oh!

mosh-tudor Sep 20, 2024

Uh oh!

artf Sep 24, 2024 Maintainer

Ferks-FK
Sep 19, 2024

Replies: 2 comments 2 replies

mosh-tudor
Sep 20, 2024

Ferks-FK Sep 20, 2024
Author

artf
Sep 24, 2024
Maintainer