search

front / gutenberg-js

JavaScript only version of the WordPress Gutenberg editor (DEPRECATED)
GNU General Public License v2.0
390 stars 42 forks source link

Live demo? #7

Open Grawl opened 5 years ago

Grawl commented 5 years ago

Want to see how it's working "like production": built assets, etc.

It's possible to host it on "static hosting" like surge.sh?

perandre commented 5 years ago

The best way to demo it, is to run this scaffolding tool. It will give you a local instance of Gutenberg JS: https://github.com/front/create-cloud-block

IsraelOrtuno commented 5 years ago

I think he means an installation demo, it's pretty tricky to make it work if you do not have React knowledge at all

Grawl commented 5 years ago

I mean working installed and hosted demo to play with.

To fork and play with code.

perandre commented 5 years ago

You could run Create Cloud Block; it will spin up an editor for you locally https://github.com/front/create-cloud-block

Not a perfect demo, but it just works. It's for building Gutenberg blocks, but adds an editor for testing.

perandre commented 5 years ago

Sorry, I repeated myself :)

To just test the editor itself, head to http://wordpress.org/gutenberg

Grawl commented 5 years ago

No I want to have a repository to play with no-WP Gutenberg.

perandre commented 5 years ago

We don't have a hosted version at the moment, but will consider to put it up. However, you will get a local version if you use create cloud block as mentioned above.

Grawl commented 5 years ago

Good example will be embedding this project into AdminLTE or similar. Everyone want Gutenberg in their custom dashboards.

arn-zz-aud-in commented 5 years ago

+1 In Laravel app could be great ! I tryed to install it but I have too many errors ... Please, give us a ready to use exemple.

joejordanbrown commented 5 years ago

I've set up a demo on StackBlitz that you can use as a demo https://stackblitz.com/edit/gutenberg-editor?file=index.js

arn-zz-aud-in commented 5 years ago

Thanks ! With a bit of learning about Create React App and patience, I finally arrive to implement it.

Grawl commented 5 years ago

@joejordanbrown looks like it's not working without Dev Server. I build it with react-scripts build, then yarn global add serve & serve -s build and got following errors:

gutenberg-js.js:6520 Uncaught TypeError: Super expression must either be null or a function, not undefined
    at gutenberg-js.js:6520
    at gutenberg-js.js:6519
    at gutenberg-js.js:6504
    at Object.<anonymous> (gutenberg-js.js:26733)
    at n (gutenberg-js.js:17)
    at Object.<anonymous> (gutenberg-js.js:82448)
    at n (gutenberg-js.js:17)
    at Object.<anonymous> (gutenberg-js.js:34453)
    at n (gutenberg-js.js:17)
    at Object.<anonymous> (gutenberg-js.js:46974)

I hosted it here: gutenberg-js-demo.surge.sh

Also, I un-comment imports in index.js because without that imports I got an error of react-scripts start:

Failed to compile.

./src/index.jsx
  Line 11:  'ReactDOM' is not defined                no-undef
  Line 12:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 13:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 14:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 15:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Looks like demo on StackBlitz working with different dev-server, without ESLint embedded in compile-time.

Also, app is not starting without every <script> in index.html: Uncaught TypeError: Cannot read property 'createContext' of undefined. In production, I want to bundle all libraries into one file.

Code I working with is here: https://github.com/Grawl/gutenberg-js-demo

joejordanbrown commented 5 years ago

@Grawl

That demo is intended for testing using the web UI of StackBlitz, it won't work without modifications locally.

For local use, you can just this repo https://github.com/front/g-editor

Grawl commented 5 years ago

@joejordanbrown it's not working without dev-server too. I am writing an issue here because front/gutenberg-js repository needs built static live working demo I can use in other projects.

joejordanbrown commented 5 years ago

@Grawl That's because they are for local development and testing, you are meant to build it yourself using webpack or another build tool of your choosing.

I think i understand now what you're requesting. You're looking for a pre-bundled ready to use lib of the editor instead of importing using NPM?

For example, you would like to download the ready built package and use like this <script src="gutenberg-js.min.js"></script> without the need of building it yourself?

Grawl commented 5 years ago

I want to customize it for my needs. I want to disable some widgets and add some.

I want to build it and place it on my server to use without webpack-dev-server running.

Qoraiche commented 5 years ago

@joejordanbrown @Grawl - I want to achieve this too, any idea?

saleehk commented 5 years ago

Looking forward for a solution running in production

Grawl commented 5 years ago

@Qoraiche I am not very good with React to resolve problems I'm facing when I try to build it. It's why I'm here and asking to make build NPM task work.