Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Running on browser #4

Open
sarupbanskota opened this issue Mar 1, 2019 · 12 comments
Open

Running on browser #4

sarupbanskota opened this issue Mar 1, 2019 · 12 comments

Comments

@sarupbanskota
Copy link

sarupbanskota commented Mar 1, 2019

Hi @jaredp and co!

I was trying to get Pagedraw to load on a browser locally, and subsequently, deploy it.

I went through the following:

  • cloned the repo
  • yarn and then yarn devserver

If I visit http://localhost:3000, I get the message described on #2:
This is a placeholder needed for our build system in dev mode. You should never see it.

If I just served desktop-app/index.html, I get the following error
screenshot 2019-03-01 17 02 51

Any tips on getting it to work on a local browser? :)

Thank you!

@jaredp
Copy link
Contributor

jaredp commented Mar 1, 2019

Hey @sarupbanskota,

The open source version is an electron app— if you want to get that running, follow the directions in the readme and run

yarn devserver
yarn run-electron

That being said, if you want to get it running in a browser, serving and loading desktop-app/index.html (with yarn devserver in the background) is a great place to start!

In https://github.com/Pagedraw/pagedraw/blob/master/desktop-app/index.html#L16, notice we set window.pd_params.route to electron_app. That's picked up by src/editor/router.cjsx, the root of our code. On https://github.com/Pagedraw/pagedraw/blob/master/src/editor/router.cjsx#L58, we route the electron app to load https://github.com/Pagedraw/pagedraw/blob/master/src/ide-integrations/electron-app.cjsx

It's pretty easy to see what src/ide-integrations/electron-app.cjsx is doing. Basically just loading a docjson (or creating a new one) and handing it to an <Editor />. It's using Electron APIs to load from your local file system, which I'd assume is why it's crashing in your browser.

I'd make a new route, cloning desktop-app/index.html and changing pd_params.route in the clone, adding the route to src/editor/router.cjsx, and cloning the route itself src/ide-integrations/electron-app.cjsx into src/ide-integrations/browser.cjsx.

In the new route, you'll have to figure out how to get a docjson (and how to save it). To get started, I recommend just creating a fresh docjson ((new Doc()).serialize()) on load.

There's also a bunch of code that does livecollab, which is beautiful, but requires a bit more refactoring...

@ghost
Copy link

ghost commented Mar 1, 2019

Hi there! what i assume from above conversation is that there is no such a way to run pagedraw with all feathures on a browser, right?

@jaredp
Copy link
Contributor

jaredp commented Mar 1, 2019

Not without a little elbow grease :)

Why does the Electron app not work for you?

@ghost
Copy link

ghost commented Mar 1, 2019

first: big thanks for your kind answer and support.
second: the electron app works fine for me, the thing is that porting this project to browser, opens the door for a browser based sketch that can generate code, and believe me it is something big 👍

@jaredp
Copy link
Contributor

jaredp commented Mar 1, 2019

Yeah that’s what Pagedraw was before we open sourced it...

@ghost
Copy link

ghost commented Mar 1, 2019

awesome! if i go with your proposed solution above for making a fresh browser.cjsx, this new file will be the clone of electron-app.cjsx with modifications made on lines 25 - 35 like below, am i right?

`//openResults = electron.dialog.showOpenDialog()
open_file = 'untitled.pagedraw.json'
initialDocjson = (new Doc()).serialize()
fs.writeFileSync(open_file, initialDocjson, 'utf-8')

//if openResults?
// open_file = openResults[0]
// initialDocjson = JSON.parse fs.readFileSync(open_file, 'utf-8')

//else
// open_file = electron.dialog.showSaveDialog({
// defaultPath: 'untitled.pagedraw.json',
// buttonLabel: 'Create'
// })
// initialDocjson = (new Doc()).serialize()
// fs.writeFileSync(open_file, initialDocjson, 'utf-8')`

@jaredp
Copy link
Contributor

jaredp commented Mar 1, 2019

You’ll want to comment out the first fs.writeFileSync(), and the electron requires.

Put up a pull request!

@ghost
Copy link

ghost commented Mar 1, 2019

thanks for your kind answer, i definitely go for a PR 👍

@sarupbanskota
Copy link
Author

Thanks @jaredp!

@pouyamiralayi - do you intend to send a PR to this repo?

@ghost
Copy link

ghost commented Mar 6, 2019

@sarupbanskota yes i am currently figuring out a way to not break functionality for this PR, i will inform you the result in this thread.
cheers.

@Fi1osof
Copy link

Fi1osof commented Mar 11, 2019

Good day!

Can i use something like "import {Editor} from ''pagedraw" to use this in own react component? I suspect that no, but I would like to. Do not plan to do this?

Thanks!

@jaredp
Copy link
Contributor

jaredp commented Mar 13, 2019

it's not quite that easy, but if you want to muck around in the code you certainly can get something like that working

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

No branches or pull requests

3 participants