Running on browser
sarupbanskota opened this issue · comments
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
yarnand thenyarn 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!
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?
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 👍
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')`
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 👍
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.
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!
it's not quite that easy, but if you want to muck around in the code you certainly can get something like that working