Giter VIP home page Giter VIP logo

destack's Introduction

Destack ๐Ÿ”Œ Embrace design. Own the stack.

Build landing pages visually right in your React or Next.js projects. Deploy them zero further configuration!

๐Ÿญ Examples: prettyfunnels.com, getdestack.com

Announcements

๐Ÿ“ฃ [13/03/2024] Destack v3 has just been released on NPM. Learn more at pull/103 and issues/104. Note that pages created with v2 have to be recreated with v3 to function smoothly.

๐Ÿ“ฃ [10/10/2023] Destack v3 is in beta. This release is an rewrite of the editor from scratch. Check it out at destack-starter-beta. More at pull/103 and issues/104.

๐Ÿ“ฃ [13/06/2023] Three more themes have been added Preline, Flow Bite and Flow Rift.

๐Ÿ“ฃ [04/02/2023] Version 2 has just been released on NPM. Try it out with destack@2 or destack@latest.

๐Ÿ“ฃ [17/12/2022] Destack v2 is now in beta. It's a major rewrite that comes new custom page builder based on Craft.js. Check it out at destack-starter-beta. More at pull/62 and issues/22.

๐Ÿ“ฃ [11/10/2022] Destack now supports multiple themes. Two new themes have been added Meraki UI and Hyper UI.

Tutorial

What's Destack?

It's a tool to build landing pages within your React or Next.js projects. Destack includes multiple components from Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite and Flow Rift.. It also supports image uploads and form submissions.

Destack helps you stop worrying about marketing pages so you can focus on your project.

Themes

Destack now supports theme selection.

Theme selection Meraki UI (Components)
Hyper UI (Components) Tailblocks (Components)
Preline (Components) Flow Rift (Components)
Flow Bite (Components)

Contribute (add a new theme)

There are many open source Tailwind themes that Destack can support. If you want to help adding a new theme create a new topic in discussions or reach out to me on twitter.

Features

๐Ÿงฑ Powerful Blocks

There are hundreds of well designed and heavily functional blocks from Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite and Flow Rift.. Supports Tailwind's theme colors ie. Red, Yellow, Green, Blue, Indigo, Purple & Pink.

๐Ÿƒ Delightful Builder

Powered by a custom-made minimal page-builder that was created with simplicity in mind. It supports altering tailwind CSS classes and CSS properties with the inspector in browser DevTools.

๐Ÿ•น Data Ownership

Destack stores all your assets on Github, Bitbucket etc through the editor. There are no external dependencies to manage or worry about.

๐Ÿž Assets & Forms Support

Stores the images uploaded in the editor in your repository & displays them when needed on production. Also supports HTML and API form submission out of the box.

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Easy Setup & Deployment

Works existing & new React and Next.js projects. Requires minimal setup and no extra configuration to deploy your landing pages to production.

Getting Started

With a new Next.js project:

  • Fork the destack-starter project

  • OR deploy a project to Vercel:

  • OR preview it online with Gitpod:

With an existing Next.js project:

1. Install Destack on your Next.js project
npm i destack
2. Setup the builder endpoint

Create pages/api/builder/handle.js and add the following:

export { handleEditor as default, config } from 'destack/build/server'
3. Then create a new page

On any Next.js page you want to setup Destack:

export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'
How to use the legacy page-builder (Grapesjs)
import { ContentProviderGrapes } from 'destack'
import 'grapesjs/dist/css/grapes.min.css'

export { getStaticProps } from 'destack/build/server'

export default function Page(props) { 
    return (
        <div style={{height: '100%'}}>
            <span>Hello world</span>
            <ContentProviderGrapes {...props}/>
        </div>)
}

With a new React.js project:

  • Fork the destack-react-starter project

  • OR deploy a project to Vercel:

  • OR preview it online with Gitpod:

With an existing React.js project:

1. Install Destack on your React.js project
npm i destack
2. Setup the builder endpoint

In package.json:

  • Replace the "start" script with destack -d \"react-scripts start\"
  • Then, replace the "build" script with destack -b \"react-scripts build\"
3. Then create a new page

In any React.js component you want to setup Destack:

export { ContentProviderReact as default } from 'destack'
How to use the legacy page-builder (Grapesjs)
import 'grapesjs/dist/css/grapes.min.css'

import { ContentProviderReact } from 'destack'

const App = () => {
  return (
    <div style={{ height: '100%' }}>
      <span>Hello world</span>
      <ContentProviderReact />
    </div>
  )
}
export default App

How it works

๐Ÿ›  Destack is composed of two main components, the first is a React component that shows the editor or the generated page and the second is a Next.js API route that saves your progress to your repository.

๐Ÿ‘จโ€๐Ÿ’ป When you run the project in development (ie. with npm run dev) the React component understands it from the NODE_ENV environment variable and shows you the editor where you can create your landing page visually.

๐Ÿ’ก Every change you make goes to the API route which updates a default.json file. That file contains the HTML for your landing page and it remembers how you structure your page so you can come back later to update it.

๐Ÿš€ When is time to go in production (ie. do npm run build or deploy to Vercel) the React component reads NODE_ENV again and statically generates the HTML version of the page you build in the editor from the default.json file Destack created for you earlier.

Note: The above description is for Next.js. In React.js, the destack -b script creates an API route similar to the one described above that handles template changes and file uploads in development. In production the destack -d script copies default.json to the public folder and builds a static version of the page.

More on the project's architecture here.

How to's & guides

Adding an HTML form

  • Drop a block that contains a form
  • Click on the form & head to components settings
  • Add form URL & check async if don't want a redirection
  • To handle a async forms you can create an API route
    • Next.js: Create a file in api/submit.js
    • React.js: You will need a seperate Node.js server listening on /api/submit

Uploading images

  • Drop a block that contains an image or use image block
  • Click on an image to open the upload modal
  • Select the image you want to update and click on it to add it to the page
  • Note: Images are uploaded to public/uploaded with their original filenames

Multi-page Support

Next.js

Create a new page file in pages folder of the Next.js project and import destack as described in #with-an-existing-nextjs-project to various pages.

React.js

Install a routing library such as react-router-dom or router-tutorial in the React.js project and import destack as described in #with-a-new-reactjs-project to various routes. For more info check out destack-react-starter.

Contributing to the project

See CONTRIBUTING.md

How this project came to existence

This project evolved out of the need to prototype quickly, maintain ownership of the generated pages and be compatible with serverless JAM-stack frameworks.

Next.js ๐Ÿ…ง โž• Tailwind CSS ๐Ÿƒ = ๐Ÿ’ฃ๐Ÿ’ฃ

Please go and show these projects some love (โญ๏ธ).

Don't forget to check out Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite and Flow Rift., without their amazing open sourced components none of this would have been possible.

Contributors

Made with contributors-img.

Upcoming Tasks

  • Add admin UI as a Next.js route

destack's People

Contributors

iojcde avatar liveduo avatar nikolas-con avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

destack's Issues

Blank screen

I've followed the video and installed this package and build a nice little website but when i build and start the app the website is just white

I see the json file under data and my html is in there but its not loading any idea what i did wrong?

steps:
first i typed in term: npm i destack

second: made a new path: pages/api/builder and added a file called handle.js and added export { handleData as default, config } from 'destack/build/server'

third i added import 'grapesjs/dist/css/grapes.min.css' export { getStaticProps } from 'destack/build/server' export { ContentProvider as default } from 'destack' to my index.js

then i just designed my website ran npm run build then ran npm run start

creation of components in any pages but No components display after refreshing any pages in nextjs

hey,

when i create a page with these destack components, in nextjs then i refresh this page, the components disappear: there is a blank page. However, if i set up the index page with the components, in nextjs, then i will refresh the index page, it will contain all the previous components placed, in the index page.

Let's imagine, i create a page named "souffixe.js" in nextjs. Then i run it in the browser like 'http://localhost:3001/souffixe'. Then i place the destack component like blog, in this page, then i refresh this page, all the components disappear. And i see "souffixe.json", in the files explorer, in the "data" folder.

How could you fix it? Or help me, fix it, please?

Custom components

Hi, this is a really cool project. I was wondering if there are plans to allow custom components to be added into the builder?

Would you mind migrating this project to Typescript?

Title.

For now, Javascript might be feasible, but as the project grows, Typescript will certainly help reduce bugs. I am willing to type the whole project (for fun) If you mind..

Btw, I was the one on reddit that commented this

componenst React?

Since the project uses grapes js, is it possible to build React components to add the editor within the project?

Header Vector Swaps

Firstly thanks for your efforts in putting this together. Making Tailblocks sites is a breeze.
Just curious what's the correct way to swap the header component svg.
In https://destack-page.vercel.app/, swapping the svg's ViewBox and Path (plain dimensions, no tags) doesn't seem to work across all the vectors I tried, leaving nothing but a solid background.

Does not work when deployed to vercel

Hello! @dannyyys and I am facing some issues here and would like to get some thoughts on this.

Subject of the issue

  1. Destack web-ui does not show up when deployed via vercel. It shows on localhost.
  2. Destack web-ui does not have 'view code' button on localhost.

Your environment

  • "destack": "^0.8.1"
  • "next": "latest",
  • node v12.20.1

click here for full repo

  • pages/destack.js
  • pages/api/builder/handle.js

Steps to reproduce

Expected behaviour

  1. wild-bakes.com/destack should look like localhost:3000/destack
  2. /destack page should have 'view code' button

Actual behaviour

  1. wild-bakes.com/destack shows empty while localhost:3000/destack shows proper components
  2. /destack page does not have 'view code' button

Add support for custom Tailwindcss config

Currently, Tailwindcss is loaded from a cdn.
This is not very ideal (slower TTFB, external dependencies, slower performance)

Building Tailwindcss locally with a custom config will give greater customizability to the user.

This issue exists to track the feature.

Firefox: No CSS

Hello,
I tried the project on Firefox (Ubuntu 21.04) and it seems like some CSS doesn't load when importing a module.
The dev console doesn't show any issue or error message except the favicon that 404.

Screenshot from 2021-08-08 20-18-00

Screenshot from 2021-08-08 20-16-27

A blog component(and editor)?

Since this project is used as sort of a static site generator, a blog component and editor would be a great feature in the long term. Still thinking how to implement this though.

One idea off the top of my head is creating a WYSIWYG md editor, and storing the posts in a directory(let's say ./blog) in markdown format and use nextjs's dynamic routing to show the proper blog post.

I have an abandoned social media project that has an md editor, so we might be able to reuse some of the code.

Missing License

NextJS is under the MIT license, same for TailwindCSS, Grapesjs is under the BSD 3-Clause License but I don't seem to find the license for this particular project, haven't you decided yet ?

How to use destack's tailwind css in custom component?

Hi, I follow the example of using a custom component. But I also want to use tailwind css in this component. Since destack already imported tailwind css, how can I use it?

import { ContentProvider } from 'destack'
import 'grapesjs/dist/css/grapes.min.css'
import Head from 'next/head'
import Header from "../components/Header"
import Hero from "../components/Hero"
import Footer from "../components/Footer"


export { getStaticProps } from 'destack/build/server'

export default function Home(props) { 
  return (
    <div style={{height: '100%'}}>
      <Head>
        <title>RE Predicts - Renewable Power Predict API Toolkit</title>
        <meta name="description" content="Wind Farm, PV Plant Power Forecast" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Hero />
      <div>API Test Component</div>
      <ContentProvider {...props}/>
      <Footer />
    </div>)
}
export default function Header() {
  return (
    <header className="text-gray-600 body-font">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-10 h-10 text-white p-2 bg-blue-500 rounded-full" viewBox="0 0 24 24">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
          </svg>
          <span className="ml-3 text-xl">Tailblocks</span>
        </a>
        <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
          <a className="mr-5 hover:text-gray-900">First Link</a>
          <a className="mr-5 hover:text-gray-900">Second Link</a>
          <a className="mr-5 hover:text-gray-900">Third Link</a>
          <a className="mr-5 hover:text-gray-900">Fourth Link</a>
        </nav>
        <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Button
          <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-4 h-4 ml-1" viewBox="0 0 24 24">
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </button>
      </div>
    </header>
  );
}

Nextjs build can't show the page

Nextjs version: 13.4.19
destack version: 2.1.2
issue:
when I build the project and start it, the page can't show the page that i create in the dev environment.
image

Editor standalone use

Hello,

Is it possible to use the (craft) Editor and the full-preview of the components as a standalone components where i can pass the JSON?

Thank you!

How to edit <p> and table cell?

Hi, this is really a great project. I've played with it today but can't find a way to edit some of the blocks inside. Such as

and table cell. I tried double click but it didn't change to edit mode like . Also I can't find where to set the text in the right panel.
Could anyone give some help? Thanks a lot!

image
image

Have the editor show up to admins

I'm thinking what are your thoughts on using this project as a page editor not just for the code owner, but also to admins in the platform. Do you think this is something that can be archived?

More information on why I asked the question... I'm thinking that since the app needs to be built again to save the changes I'm not sure if this is something that can be done or that can be implemented, like have a way for an admin to log in to the frontend and just by login in, having the ability to modify the site, save it and log out and have it ready in production with the updated changes.

Note: I really like this project and the things you've created with it! I'll review it in more depth to see how I can possibly contribute to it ๐Ÿ˜ธ

Next js export doesn't get proper static builds

Hey, thanks for your effort to putting this together.
I just tried get static build with the Next js example.
In the index.html it only has some js & css files and the props (NEXT_DATA). It doesn't look like SEO friendly.

Is there any work around to get static build?
Screenshot from the sample project page source
image

path undefined error

Unhandled Runtime Error
TypeError: Path must be a string. Received undefined

Call Stack
assertPath
node_modules\next\dist\compiled\path-browserify\index.js (1:95)
Object.parse
node_modules\next\dist\compiled\path-browserify\index.js (1:4265)
eval
node_modules\destack\build\server\index.js (1886:0)
(app-client)/./node_modules/destack/build/server/index.js
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/app/page.js (105:1)
options.factory
/_next/static/chunks/webpack.js (704:31)
webpack_require
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (359:21)
eval
webpack-internal:///(app-client)/./src/app/page.js (7:78)
(app-client)/./src/app/page.js
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/app/page.js (159:1)
options.factory
/_next/static/chunks/webpack.js (704:31)
webpack_require
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (359:21)
Next.js
requireModule
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (144:0)
initializeModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1205:0)
resolveModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1163:0)
eval
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1590:0)

How to run locally "git clone https://github.com/LiveDuo/destack.git"

Good day!
Doesn't start on localhost.

Your environment

  • "destack": "0.9.1"
  • "next": "^10.2.3"
  • node v14.16.0
  • OS Windows 10

Steps to reproduce

  1. "git clone https://github.com/LiveDuo/destack.git" and cd in "destack"
  2. "npm install"
  3. "cd lib/destack && npm install"
  4. "cd dev/nextjs-project && npm install"
  5. "cd ../../"
  6. "npm start"

Result

`./pages/index.js:2:2
Module not found: Can't resolve '../../../node_modules/grapesjs/dist/css/grapes.min.css'
1 | if (process.env.NODE_ENV !== 'production') {

2 | require('../../../node_modules/grapesjs/dist/css/grapes.min.css')
| ^
3 | }
4 |
5 | export { getStaticProps } from 'destack/build/server'`

Migration to Craft.js

Craft.js is another page-builder framework like Grapes.js (which destack currently uses)

However, Grapes.js isn't the best fit for this project.

1. TypeScript support

Fully typing Destack isn't possible yet because Grapes.js doesn't have any (working) TypeScript support yet. There has been a community effort before, but it seems to be abandoned for now.

Craft.js has TypeScript definitions embedded in it.

2. Grapes.js wasn't made to be used with react, unlike Craft.js.

Craft.js was made to be used with react, which means maintaining the project will be easier for the future.

3. Craft.js already has a system to store the component state.

The basic example includes a feature to copy the (compressed) state to clipboard. This will make it easier to do what destack does now ( parsing the default.json, etc ).

Here's a quick guide: link

This issue exists for discussion on the topic, and for tracking the feature.

Cannot read properties of null (reading 'querySelector')

Hi everyone
I have an error, and I don't know what should I do or where should I search for that.
can anybody help me.
`Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'querySelector')

Call Stack
r.getBody
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:584083)
eval
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:284460)
Array.forEach

r.toggleSelectComponent
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:283903)
r.stopSelectComponent
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:283695)
r.stop
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:292852)
runDefault
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:623075)
eval
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:626321)`

How to submit form?

Hey there,

Amazing project, thanks for all the great work!

Just wanted to ask how to submit the form? I am running the destack starter repo locally.

I have

  • added a component with a form
  • made a file pages/api/submit.js
  • selected the form and changed the component settings to:
    • Method: POST
    • Action: /api/submit
    • Async: ON (checked)
  • selected the Button and set it to SUBMIT.

Building without Next.js

Apologies in advance for complete beginner React related questions:

You guys just so happen to have done exactly what I was hoping to do: build a grapes.js instance that uses tailwind blocks. Problem is I'm looking to integrate this into a Django backend, and thus don't really want to use Next, I'd rather create the API endpoints that grapes needs in python, and save the grapes state to the existing database.

Would it be possible to separate the grapes.js build in this project from Next entirely and just build the grapes.js bundle alone?

NextJS app router compatibility

It seems destack does not work, or the example needs updating, for how to use with the new app router, now the recommended default when starting a new next app.

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

   ,-[/home/tony/hof/mods/tmp/myapp/app/example/page.tsx:1:1]
 1 | 'use client';
 2 | 
 3 | import 'destack/build/browser/index.css'
 4 | export { getStaticProps } from 'destack/build/server'
   :          ^^^^^^^^^^^^^^
 5 | export { ContentProvider as default } from 'destack'
   `----

File path:
  ./app/example/page.tsx

Page editor broken with latest version of Next?

Followed install instructions except used 'npx create-next-app@latest'.
Dragging a component from the picker to a page places an image of the component instead of the component.
Please advise. Thx.

Doesn't save the layout for pages

I was testing how to use the builder on the page other than index.js
So I created a page, let's say test.js, pasted this code onto it:

import 'grapesjs/dist/css/grapes.min.css'
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'

Then I run npm run dev and open http://localhost:3000/test. The builder works, but doesn't save anything. So on refreshing or builing I get a blank page.

Style problem

I followed the exact instructions for contributing, but when I drag and drop component the style of it doesn't work properly.

image

Enable custom HTML markup

Hello, since we are trying to become a better shuffle.dev, I was thinking of a couple ideas. One of them (among importing markup from cdn servers to enable truly custom code to enter) was to have a live HTML Editor for the markup. A smal JS editor on the side could also be a possibility

Picking colors

Hi! I'm trying to add a color picker to destack. I made a couple of changes to text.tsx on a fork, I essentially added colors to props, and then I thought of creating an analogous to ButtionDialog.tsx, TextColorPickerDialog.tsx . Do you think this is the right approach? The reason I ask is because I know destack is pulling colors from the themes directly, e.g. bg-indigo-600.

Single Page Limitation

I've been playing around with destack and was hoping it would be possible to add support for multiple pages. Currently it appears that all instances of the editor relate back to the same content limiting the use cases to a single landing page per nextjs project.

Great work so far and thanks in advance :)

Ps Happy to help out with any testing once this has been implemented ๐Ÿ‘

The multiple pages feature not working correctly.

Hi,
I have created a new page (blog.js) and setup destack. But i don't see any sections which has been added in the page after I reload the page.
And my source code still have "data/blog.json" file. But I don't know why it's not showing up on the "blog" page.

So I think the cause of this error in the loadTemplate function. Please check!

P/S: Run the project in development npm run dev

Environment

  • "destack": "1.0.3"
  • "next": "13.0.2"
  • "grapesjs": "0.20.1"
  • "react": "18.2.0"
  • node v16.13.2
  • OS Windows 11

Tailwind .text-transparent

Hello,
Upon request I am opening a new issue to explain that on a fresh clone there are some discrepancies with how the UI looks. I explained it to @LiveDuo here: #75

Where could the issue be?

Cannot contribute on fresh clone

I followeed the exact instructions for contributing, but when I run "npm run dev", I get the following:
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
[0] client/craft/index.tsx (16:4)
[0] 14: const ContentProviderBase: React.FC = ({ data, standaloneServer }) => {
[0] 15: return (
[0] 16:
[0] ^
[0] 17:


[0] 18:

Also, I get the following on the server afterwards:

bundles server/index.ts โ†’ build/server...
[0] created build/server in 4s
[1] node:internal/crypto/hash:71
[1] this[kHandle] = new _Hash(algorithm, xofLen);
[1] ^
[1]
[1] Error: error:0308010C:digital envelope routines::unsupported
[1] at new Hash (node:internal/crypto/hash:71:19)
[1] at Object.createHash (node:crypto:140:10)

Blank builder page after refreshing the builder page, locally.

Hey,

All the times, I do npm run dev, all I get is a blank builder page, after having build a page with the components. While, I see in the default.json the generated code and these updates.

Is there anything, i forget in the setup, like a env file or anything?

Built Pages Reset on Local

I've found that after deploying from local, the build page isn't loaded into the editor again. The editor is empty, and anything added will overwrite the previously rendered page, though if redeployed without adding anything to the editor there are no changes to the rendered page.

The code on the page is as described for a next.js project in the README.md:

import 'grapesjs/dist/css/grapes.min.css'
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'

And pages/api/builder/handle.js has the code outlined in the README.md:

export { handleData as default, config } from 'destack/build/server'

Is this an intended function, or have I configured it wrong?

Vue3 support

The name says it all, are there any thoughts to port the project to Vue (or Astro, etc.)?

Also, are there any strong points for keeping Next (and SSR) for this type of project?

This is such a beautiful project

I really love this project. If I have all the necessary skills, I want to contribute.
It's pretty simple for low-code dev like me who doesn't even understand how to modify html/css/js.

Not just a cute project, it has high potential to become open-source carrd, with adding more templates+marketplace, etc.

Is there a potential community in this project?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.