Skip to content

I have successfully run PageDraw in the browser by the source code, which may be helpful. #53

@jinmingpang

Description

@jinmingpang

From the Readme, we can preview by the electron.

So I briefly explain how to preview by the browser. Just a few simple changes, it can successfully preview. more info.

  1. create pagedraw/ide-integrations/browser.cjsx
React = require 'react'
createReactClass = require 'create-react-class'
_l = require 'lodash'

{Editor} = require '../editor/edit-page'
{Doc} = require '../doc'
core = require '../core'
config = require '../config'
util = require '../util'

open_file = 'untitled.pagedraw.json'
initialDocjson = (new Doc()).serialize()

module.exports = createReactClass

    render: ->
        <Editor
            initialDocJson={initialDocjson}
            onChange={@handleDocjsonChanged}
            windowTitle="Pagedraw"
        />

# definitely not "right", kind of a hack
isInsideDir = (dir_path, file_path) -> file_path.startsWith(dir_path)
  1. update pagedraw/src/editor/router.cjsx . And one line browser: -> require('../ide-integrations/browser') at line 58.
   pages = {
        # some other routes
        browser: -> require('../ide-integrations/browser')
        electron_app: -> require('../ide-integrations/electron-app')
    }
  1. copy pagedraw/desktop-app/index.html to pagedraw/static/brower.html. And update some code at line 15.
window.pd_params = {
      "route": "browser"
};
  1. run yarn devserver and open http://localhost:3000/brower.html in the browser.

image

  1. if you want preview the project like 'https://pagedraw.io/tutorials/basics' in local. You can just edit pagedraw/static/brower.html at line 15.
 window.pd_params = {
      "tutorial": true,
      "blitz_id": "basics",
      "route": "stackblitz"
 };

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions