Skip to content
This repository has been archived by the owner on Jul 30, 2024. It is now read-only.

Live demo? #7

Open
Grawl opened this issue Nov 13, 2018 · 19 comments
Open

Live demo? #7

Grawl opened this issue Nov 13, 2018 · 19 comments

Comments

@Grawl
Copy link

Grawl commented Nov 13, 2018

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
Copy link
Member

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
Copy link

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
Copy link
Author

Grawl commented Dec 6, 2018

I mean working installed and hosted demo to play with.

To fork and play with code.

@perandre
Copy link
Member

perandre commented Dec 6, 2018

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
Copy link
Member

perandre commented Dec 6, 2018

Sorry, I repeated myself :)

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

@Grawl
Copy link
Author

Grawl commented Dec 11, 2018

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

@perandre
Copy link
Member

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
Copy link
Author

Grawl commented Jan 10, 2019

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

@arn-zz-aud-in
Copy link

+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
Copy link

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
Copy link

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

@Grawl
Copy link
Author

Grawl commented Jan 17, 2019

@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
Copy link

@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
Copy link
Author

Grawl commented Jan 23, 2019

@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
Copy link

@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
Copy link
Author

Grawl commented Jan 30, 2019

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
Copy link

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

@saleehk
Copy link

saleehk commented Jan 31, 2019

Looking forward for a solution running in production

@Grawl
Copy link
Author

Grawl commented Feb 1, 2019

@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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants