Running on browser

[sarupbanskota]

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

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

Thank you!

[jaredp]

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

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]

Not without a little elbow grease :)

Why does the Electron app not work for you?

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]

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

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]

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

Put up a pull request!

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

[sarupbanskota]

Thanks @jaredp!

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

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

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]

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