diff options
author | Szymon Kłos <szymon.klos@collabora.com> | 2019-02-12 11:47:24 +0100 |
---|---|---|
committer | Szymon Kłos <szymon.klos@collabora.com> | 2019-02-21 09:23:47 +0100 |
commit | 8a61a53027a0e3a1854c659de8b83dcb76737da6 (patch) | |
tree | 04a93a9d8f547038956d30a081c95e980539ace0 | |
parent | eb75a64c3cf6a4305fb105123558c4ef13aeaa48 (diff) |
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: Iebee1cc0b9a03bc866954ff33e3cb8a10b48e0af
-rw-r--r-- | Makefile.am | 9 | ||||
-rw-r--r-- | browsersync-config.js | 108 | ||||
-rw-r--r-- | configure.ac | 18 | ||||
-rw-r--r-- | loleaflet/Makefile.am | 25 | ||||
-rw-r--r-- | loleaflet/README | 23 |
5 files changed, 179 insertions, 4 deletions
diff --git a/Makefile.am b/Makefile.am index 2a6a1ef5b..4fd349d76 100644 --- a/Makefile.am +++ b/Makefile.am @@ -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 diff --git a/browsersync-config.js b/browsersync-config.js new file mode 100644 index 000000000..c11f4d370 --- /dev/null +++ b/browsersync-config.js @@ -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 +};
\ No newline at end of file diff --git a/configure.ac b/configure.ac index 2f05fd972..dc8560e67 100644 --- a/configure.ac +++ b/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 ]) diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am index d5b54001a..07f2dc886 100644 --- a/loleaflet/Makefile.am +++ b/loleaflet/Makefile.am @@ -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 $@) diff --git a/loleaflet/README b/loleaflet/README index 3b9f53d21..8080605c0 100644 --- a/loleaflet/README +++ b/loleaflet/README @@ -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 ----------- |