Does not work when deployed to vercel about destack HOT 10 CLOSED

Thanks for proving a link to reproduce. I receive another report about the blank page on vercel and it's a priority at the moment.

Will have a look and possibly push a fix later today.

PS: I'll try to sort out the "View code" but that's lower on the list right now. Still I think that's an easy fix.

from destack.

From what I see in the repo if you run the Destack locally it should show as blank too. Let me know if that's not the case to investigate further.

Yup, it is not the case, it is running well locally.

I'm curious if there's a bug that caused this and would be very helpful if we find a way to reproduce this.

Maybe this might help. We used this NextJS with-chakra-ui starter

Note: By default, Vercel sets NODE_ENV = production when you deploy a project to production. If it's changed or a different environment is used it might break Destack environment detection and if that happened there's a good chance it's the root of the problem. If you use a different environment on Vercel (other than production) you might want to set NODE_ENV = production manually.

I just did a double check of env variables in .env.local and on Vercel deployment env. There is no overwrite or modification to the NODE_ENV variable. Oh, and we only have one deployment live at anytime and that is production.

from destack.

I think I understand what the issue is. Destack is normally used as an editor locally which shows the generated content in production.

If you guys are looking to have the editor in production that is totally possible with the server prop. The Destack editor works like that. It's hosted on if you want to take a quick peek: destack-page and its source code is here: pages/index.js.

We might need to update the Readme.md to better document this use case. Thanks for the heads up!

from destack.

Does it need to be the only page in pages? Meaning to say only one file in pages/index.js?

No, it doesn't matter how many pages you have or if Destack is located in pages/index.js or another file. What ever suits you best should work.

How about the api route in step 2 of README.md? Not required to put the api route file in pages/api/builder/handle.js?

If you are just using the editor you don't need step 2. That is for saving the page locally (in a JSON file) and is not required if you are just using the editor in production.

from destack.

@OkkarMin @dannyyys

I just got the chance to look at your repo and the bug you submitted yesterday.

It seems your data/default.json file is just a blank page (it's a <section> tag with no child elements).

From what I see in the repo if you run the Destack locally it should show as blank too. Let me know if that's not the case to investigate further.

I'm curious if there's a bug that caused this and would be very helpful if we find a way to reproduce this.

Note: By default Vercel sets NODE_ENV = production when you deploy a project to production. If it's changed or a different environment is used it might break Destack environment detection and if that happened there's a good chance it's the root of the problem. If you use a different environment on Vercel (other than production) you might want to set NODE_ENV = production manually.

from destack.

You are welcome @LiveDuo 😊

Hmm.. I really must be doing something wrong here. This is the new code after referencing to your code at page/index.js

// in pages/destack.js
import "grapesjs/dist/css/grapes.min.css";
import { ContentProvider } from "destack";

export default function Destack(props) {
  return <ContentProvider {...props} server={false} />;
}

Still not showing up on the production page https://wild-bakes.com/destack

Does it need to be the only page in pages? Meaning to say only one file in pages/index.js?

How about the api route in step 2 of README.md? Not required to put the api route file in pages/api/builder/handle.js?

from destack.

Hey @OkkarMin,

I think I stumbled across the problem and pushed a fix a few days ago.

If you are still looking for a solution there's a little section on Readme.md#show-editor-in-production to help setting it up. I also updated the example editor we have that very close to what you need. Here's the exact file
pages/index.js.

Note: It might be subtle and easily missed but the server prop has now changed to showEditorInProd .

from destack.

Awesome! Working well now, just missing the 'view code' button. If I recall correctly, you will be adding that in near future 👍

Will be closing this issue

from destack.

@LiveDuo @OkkarMin Can any one please tell me how you loaded data into the editor in production?

from destack.

@LiveDuo @OkkarMin Can any one please tell me how you loaded data into the editor in production?

Should work without any further setup ie. the page you see in development should appear in production (just without the editor).

from destack.