Browser hot reload

[gquintana]

Is possible to have browser hot reload: when an AsciiDoc file is changed, HTML is rebuilt and browser reloads new page?

Does someone have some nodejs or anything else do that?

[wimdeblauwe]

I just did a setup that does just that using Visual Studio Code. You need to have the Live Server and the Run on Save extensions installed first.

After that follow these steps:

1. Create a create-presentation.sh script containing (And make is executable):

node asciidoctor-to-revealjs.js

2. Configure Run on Save extension to run the script for each save of your presentation:

"emeraldwalk.runonsave": {
        "commands": [
            {
            "match": "presentation\\.adoc",
            "cmd": "./create-presentation.sh"
        },
        {
            "match": "presentation\\.css",
            "cmd": "./create-presentation.sh"
        }
    ]
    }

3. Generate the HTML file once manually if you haven't done so and open the file in the editor.
4. Click on 'Go live' with the HTML file opened.

If you now edit your asciidoc or CSS file, the browser should reload automatically.

Note that you can append #/5 manually to the URL if you want to directly jump to slide 5 after reloading. This is convenient to avoid having to navigate after each reload to the slide you are working on.

[a4z]

ruby guard + live reload extension in firefox

guard will rebuild the html when the adoc file is changing, and had also the possibility to notify the browser (with the live reload extension)

some browsers, like GNOME/epiphany, will reload a page that has changed on disk, if you open the html site as file, not via a web server, than live reload is not required

[stenzengel]

An option which uses "node.js" as originally request is browser-sync:

• Create the following file:

//preview.js
const asciidoctor = require('@asciidoctor/core')();
const asciidoctorRevealjs = require('@asciidoctor/reveal.js');
asciidoctorRevealjs.register();

const browserSync = require("browser-sync");
const bs = browserSync.create();

const adocFile = process.argv[2];
if (!adocFile) {
	console.error(
		"You must specify an asciidoctor file to be previewed! Example:\n",
		"node preview.js test\\test.adoc"
	);
	return;
}

function convertFile(cause) {
	asciidoctor.convertFile(adocFile, { safe: 'safe', backend: 'revealjs' });
	console.log(`Converted file: '${adocFile}' (${cause})`);
}

function watchCallback(filename) {
	if (!filename.endsWith(".html") && !filename.startsWith(".")) {
		convertFile(`'${filename}' changed`);
		bs.reload();
	}
}

convertFile("startup");
bs.watch(".").on("change", watchCallback);

bs.init({
	server: true,
	startPath: adocFile.replace(".adoc", ".html")
});

• install all dependencies and run the script for an "adoc" file. This shows the generated HTML file in your registered browser with hot reload (currently watching for all "change" events in the current workspace and ignoring filenames starting with "." and ending with ".html")

npm i --save-dev @asciidoctor/reveal.js asciidoctor browser-sync
node preview.js test/test.adoc

[bcouetil]

Another option, for those generating with the docker image in a shell script.

It works with any editor and any browser.

• use inotifywait in shell to wait for file changes
• start a web server in the folder, for ex python3 -m http.server
• add live.js in your generated files, using docinfo-header.html in generation, with this additional line : <script type="text/javascript" src="http://livejs.com/live.js"></script>
• browse your local web server, live reload is ready

[obilodeau]

Hot reload in general

All these approaches are very interesting. Thanks for taking the time to document them here. I'll start experimenting and post here about which one I feel we should officially support.

Addressing a specific point

the docker image

Which docker image? We don't have an official one yet. However, it could be interesting to build an official one.

[bcouetil]

There is something which seems official, having all backends : https://github.com/asciidoctor/docker-asciidoctor.

Generating myself HTML5 / Reveal.js / PDF both locally and in CI, I found that way more efficient. I went tired maintaining my Maven stack, and don't mind waiting for features while having a guaranteed compatibility !

[hexmind]

It works with any editor and any browser.

* use `inotifywait` in shell to wait for file changes

For me :revealjs_hash: true and this script together work well:

# sudo apt-get install inotify-tools
input=index.adoc
while inotifywait -e close_write $input;
  do npx asciidoctor-revealjs $input;
done

[ggrossetie]

We should probably document the various workflow in the documentation.

[wimdeblauwe]

I found another option if you use the Maven plugin:

1. Add a docinfo-revealjs.html with:

<script type="text/javascript" src="http://livejs.com/live.js"></script>

2. Add :docinfo: shared to your adoc file of your presentation.
3. Add the fizzed-watcher-maven-plugin to your pom.xml:

            <plugin>
                <groupId>com.fizzed</groupId>
                <artifactId>fizzed-watcher-maven-plugin</artifactId>
                <version>1.0.6</version>
                <configuration>
                    <watches>
                        <watch>
                            <directory>src/docs/asciidoc</directory>
                        </watch>
                    </watches>
                    <goals>
                        <goal>process-resources</goal>
                    </goals>
                </configuration>
            </plugin>

4. Run mvn fizzed-watcher:run in a separate terminal.
5. Use npm install -g livereload to install livereload and start it with livereload target/generated-slides/ in a separate terminal
6. Create your presentation normally via Maven 1 time (e.g. mvn process-resources)
7. Serve the presentation on a simple webserver. I use python3 -m http.server -d target/generated-slides/ in a 3rd terminal.
8. Open http://localhost:8000 in your browser and enable the livereload browser extension.

[wimdeblauwe]

About https://github.com/asciidoctor/asciidoctor-reveal.js/issues/248#issuecomment-579277817:

• add live.js in your generated files, using docinfo-header.html in generation, with this additional line : <script type="text/javascript" src="http://livejs.com/live.js"></script>

You need to use docinfo-revealjs.html now instead of docinfo-header.html.