Integrate browser-sync
Tool to automatically reload used .css and .js files. To make it work symlinks are created instead of a copy if browsersync is enabled. 1. install: npm install -g browser-sync 2. use configure option: --enable-browsersync 3. remove loleaflet/dist directory 4. run server: LOOL_SERVE_FROM_FS=1 make run -j10 5. run browsersync: browser-sync start --config browsersync-config.js or make sync-writer Change-Id: Iebee1cc0b9a03bc866954ff33e3cb8a10b48e0afprivate/mmeeks/thread-png
parent
eb75a64c3c
commit
8a61a53027
|
@ -289,6 +289,15 @@ run: all @JAILS_PATH@
|
|||
--o:admin_console.username=admin --o:admin_console.password=admin \
|
||||
--o:logging.file[@enable]=true --o:logging.level=trace
|
||||
|
||||
sync-writer:
|
||||
browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file://$(abs_top_srcdir)/test/data/hello-world.odt"
|
||||
|
||||
sync-calc:
|
||||
browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file://$(abs_top_srcdir)/test/data/hello-world.ods"
|
||||
|
||||
sync-impress:
|
||||
browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file://$(abs_top_srcdir)/test/data/hello-world.odp"
|
||||
|
||||
run-valgrind: all @JAILS_PATH@
|
||||
@echo "Launching loolwsd under valgrind (but not forkit/loolkit, yet)"
|
||||
@fc-cache "@LO_PATH@"/share/fonts/truetype
|
||||
|
|
|
@ -0,0 +1,108 @@
|
|||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Browser-sync config file
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| For up-to-date information about the options:
|
||||
| http://www.browsersync.io/docs/options/
|
||||
|
|
||||
| There are more options than you see here, these are just the ones that are
|
||||
| set internally. See the website for more info.
|
||||
|
|
||||
|
|
||||
*/
|
||||
module.exports = {
|
||||
"ui": {
|
||||
"port": 3001
|
||||
},
|
||||
"files": ["loleaflet/dist/**/*.css", "loleaflet/dist/**/*.js"],
|
||||
"watchEvents": [
|
||||
"change"
|
||||
],
|
||||
"watch": false,
|
||||
"ignore": [],
|
||||
"single": false,
|
||||
"watchOptions": {
|
||||
"ignoreInitial": true
|
||||
},
|
||||
"server": false,
|
||||
"proxy": "http://localhost:9980/",
|
||||
"port": 3000,
|
||||
"middleware": false,
|
||||
"serveStatic": [],
|
||||
"ghostMode": {
|
||||
"clicks": true,
|
||||
"scroll": true,
|
||||
"location": true,
|
||||
"forms": {
|
||||
"submit": true,
|
||||
"inputs": true,
|
||||
"toggles": true
|
||||
}
|
||||
},
|
||||
"logLevel": "info",
|
||||
"logPrefix": "Browsersync",
|
||||
"logConnections": false,
|
||||
"logFileChanges": true,
|
||||
"logSnippet": true,
|
||||
"rewriteRules": [],
|
||||
"open": "local",
|
||||
"browser": "default",
|
||||
"cors": false,
|
||||
"xip": false,
|
||||
"hostnameSuffix": false,
|
||||
"reloadOnRestart": false,
|
||||
"notify": true,
|
||||
"scrollProportionally": true,
|
||||
"scrollThrottle": 0,
|
||||
"scrollRestoreTechnique": "window.name",
|
||||
"scrollElements": [],
|
||||
"scrollElementMapping": [],
|
||||
"reloadDelay": 0,
|
||||
"reloadDebounce": 500,
|
||||
"reloadThrottle": 0,
|
||||
"plugins": [],
|
||||
"injectChanges": true,
|
||||
"startPath": "loleaflet/04597b4ec/loleaflet.html?file_path=./test/data/hello-world.odt",
|
||||
"minify": true,
|
||||
"host": null,
|
||||
"localOnly": false,
|
||||
"codeSync": true,
|
||||
"timestamps": true,
|
||||
"clientEvents": [
|
||||
"scroll",
|
||||
"scroll:element",
|
||||
"input:text",
|
||||
"input:toggles",
|
||||
"form:submit",
|
||||
"form:reset",
|
||||
"click"
|
||||
],
|
||||
"socket": {
|
||||
"socketIoOptions": {
|
||||
"log": false
|
||||
},
|
||||
"socketIoClientConfig": {
|
||||
"reconnectionAttempts": 50
|
||||
},
|
||||
"path": "/browser-sync/socket.io",
|
||||
"clientPath": "/browser-sync",
|
||||
"namespace": "/browser-sync",
|
||||
"clients": {
|
||||
"heartbeatTimeout": 5000
|
||||
}
|
||||
},
|
||||
"tagNames": {
|
||||
"less": "link",
|
||||
"scss": "link",
|
||||
"css": "link",
|
||||
"jpg": "img",
|
||||
"jpeg": "img",
|
||||
"png": "img",
|
||||
"svg": "img",
|
||||
"gif": "img",
|
||||
"js": "script"
|
||||
},
|
||||
"injectNotification": false
|
||||
};
|
18
configure.ac
18
configure.ac
|
@ -55,6 +55,10 @@ AC_ARG_ENABLE([debug],
|
|||
AS_HELP_STRING([--enable-debug],
|
||||
[Enable debugging, link with debugging version of Poco libraries]))
|
||||
|
||||
AC_ARG_ENABLE([browsersync],
|
||||
AS_HELP_STRING([--enable-browsersync],
|
||||
[Don't copy files to the target directory but create the symlink to allow browsersync usage]))
|
||||
|
||||
AC_ARG_ENABLE([anonymize-usernames],
|
||||
AS_HELP_STRING([--enable-anonymize-usernames],
|
||||
[Enable anonymization/obfuscation of usernames in logs]))
|
||||
|
@ -207,6 +211,17 @@ AC_SUBST(LOOLWSD_LOGLEVEL)
|
|||
AC_SUBST(LOOLWSD_LOG_TO_FILE)
|
||||
AC_SUBST(LOLEAFLET_LOGGING)
|
||||
|
||||
ENABLE_BROWSERSYNC=
|
||||
browsersync_msg="disabled: copy files to the target directory"
|
||||
if test "$enable_browsersync" = "yes"; then
|
||||
AC_DEFINE([ENABLE_BROWSERSYNC],1,[Whether to create symlinks instead of copying files to the target dorectory to run browsersync])
|
||||
ENABLE_BROWSERSYNC=true
|
||||
browsersync_msg="enabled: create symlinks in the target directory"
|
||||
else
|
||||
AC_DEFINE([ENABLE_BROWSERSYNC],0,[Whether to create symlinks instead of copying files to the target dorectory to run browsersync])
|
||||
fi
|
||||
AC_SUBST(ENABLE_BROWSERSYNC)
|
||||
|
||||
if test -n "$with_logfile" ; then
|
||||
LOOLWSD_LOGFILE="$with_logfile"
|
||||
fi
|
||||
|
@ -487,6 +502,7 @@ AS_IF([test "$ENABLE_GTKAPP" = true],
|
|||
[PKG_CHECK_MODULES([WEBKIT],[webkit2gtk-4.0])])
|
||||
|
||||
AM_CONDITIONAL([ENABLE_DEBUG], [test "$ENABLE_DEBUG" = "true"])
|
||||
AM_CONDITIONAL([ENABLE_BROWSERSYNC], [test "$ENABLE_BROWSERSYNC" = "true"])
|
||||
|
||||
mobile_app=
|
||||
ENABLE_MOBILEAPP=
|
||||
|
@ -750,10 +766,12 @@ Configuration:
|
|||
Debug & low security $debug_msg
|
||||
Anonymization $anonym_msg
|
||||
Set capabilities $setcap_msg
|
||||
Browsersync $browsersync_msg
|
||||
|
||||
\$ make # to compile"
|
||||
if test -n "$with_lo_path"; then
|
||||
echo " \$ make run # to start loolwsd
|
||||
\$ make sync-writer|calc|impress # to start browsersync with specified app
|
||||
"
|
||||
fi
|
||||
])
|
||||
|
|
|
@ -55,7 +55,11 @@ LOLEAFLET_ADMIN_DST = $(patsubst $(srcdir)/admin/%,$(builddir)/dist/admin/%,$(LO
|
|||
|
||||
define file_target
|
||||
$(1): $(2)
|
||||
@cp $$< $$@
|
||||
@if test -z '$(ENABLE_BROWSERSYNC)'; then \
|
||||
`cp $$< $$@`; \
|
||||
else \
|
||||
`ln -sf ../$$< $$@`; \
|
||||
fi
|
||||
|
||||
endef
|
||||
|
||||
|
@ -267,7 +271,11 @@ node_modules: npm-shrinkwrap.json
|
|||
|
||||
$(builddir)/dist/plugins/%.js: $(srcdir)/plugins/%.js
|
||||
@mkdir -p $(dir $@)
|
||||
@cp $< $@
|
||||
@if test -z '$(ENABLE_BROWSERSYNC)'; then \
|
||||
`cp $< $@`; \
|
||||
else \
|
||||
`ln -sf $(abs_srcdir)/$< $@`; \
|
||||
fi
|
||||
|
||||
$(builddir)/dist/images/%: $(srcdir)/images/%
|
||||
@mkdir -p $(dir $@)
|
||||
|
@ -279,11 +287,20 @@ $(builddir)/dist/%.html: $(srcdir)/html/%.html
|
|||
|
||||
$(builddir)/dist/src/%.js: $(srcdir)/src/%.js
|
||||
@mkdir -p $(dir $@)
|
||||
@cp $< $@
|
||||
@if test -z '$(ENABLE_BROWSERSYNC)'; then \
|
||||
`cp $< $@`; \
|
||||
else \
|
||||
`echo $< $@`; \
|
||||
`ln -sf $(abs_srcdir)/$< $@`; \
|
||||
fi
|
||||
|
||||
$(builddir)/dist/%.js: $(srcdir)/js/%.js
|
||||
@mkdir -p $(dir $@)
|
||||
@cp $< $@
|
||||
@if test -z '$(ENABLE_BROWSERSYNC)'; then \
|
||||
`cp $< $@`; \
|
||||
else \
|
||||
`ln -sf $(abs_srcdir)/$< $@`; \
|
||||
fi
|
||||
|
||||
$(builddir)/dist/node_modules/%.js: $(builddir)/node_modules/%.js
|
||||
@mkdir -p $(dir $@)
|
||||
|
|
|
@ -91,6 +91,29 @@ with the --o:storage.filesystem[@allow]=true option of loolwsd. In case anything
|
|||
the debugging output. You might be asked to confirm the certificate if you are using self-signed certificate
|
||||
for loolwsd.
|
||||
|
||||
Development
|
||||
-----------
|
||||
|
||||
For faster development you might want to install browser-sync which can reload app in your browsers automatically
|
||||
after you edit and save the source code (so for .css only):
|
||||
|
||||
npm install -g browser-sync
|
||||
|
||||
Remember to add '--enable-browsersync' argument for './configure' script and delete `dist` directory.
|
||||
|
||||
Run server and start browser-sync:
|
||||
|
||||
LOOL_SERVE_FROM_FS=1 make run
|
||||
|
||||
and in the second terminal:
|
||||
|
||||
make sync-[writer|calc|impress]
|
||||
|
||||
Your browser will open example document and now you can edit .css files and see the result without server restart.
|
||||
|
||||
To run another document use:
|
||||
browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file:///path/to/the/file.ods"
|
||||
|
||||
Admin Panel
|
||||
-----------
|
||||
|
||||
|
|
Loading…
Reference in New Issue