Issue #2782Opened May 17, 2020by joshbedo0 reactions

Best way to render a page stored in firestore?

Question

I've been reading a lot of the documentation and closed issues but I'm a little confused on the best approach to render a page stored in firestore.

For example I have a node.js backend using cloud functions and i was thinking i would basically have an API endpoint that pulls the page from the firestore and renders it. Is this possible? I haven't found many examples on how to render pages from the server.

In short how can i render a page generated in grapejs? So i can show a preview of the page and also have a live website using something generated by grapejs.

ex:

app.get('/pages/:id', (req, res) => {
   const page = firebase.getData(req.params.id); // just an example

   res.send(page);
});

Answers (1)

artf• June 9, 20200 reactions

Hi Josh, storing and loading templates is described more in details here: https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates

Basically, the editor stores 2 types of data:

components and style, JSON result of your template. You need these to load back the data in the editor.
html and css, HTML/CSS result of your template. This can be used to be rendered in your final page (eg. the page created by your user) but DON'T use it to load it back in the editor for editing.

In short how can i render a page generated in grapejs?

Well, this depends, I'd expect you to know that at first 😅. For example, if you store the entire object in your firebase document the result might be something like this:

app.get('/pages/:id', (req, res) => {
   const page = firebase.getData(req.params.id); // just an example
   // Just an example of what you can return
   res.send(`<html>
		...
			<style>${page.css}</style>
		</head>
		<body>
			${page.html}
		</body>
	<html>`);
});

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Best way to render a page stored in firestore?

Question

Answers (1)

Related Questions and Answers

global functions/variables

[QUESTION] Add default Trait (attribute) to model for all HTML Components (elements)

[QUESTION] export options

Loading dynamic content

Paid Plugins That Match This Issue

Browse Plugin Categories