Reveal.js

Name: Reveal.js
Author: cloudogu

Container

It is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free | Production Mode

Image details

Pulls: 10k

Architecture: amd64

Image size: 8 MB

Latest: 5.2.1-r3

User: cloudogu

Created: Mar 12, 2020

Updated: 7 months ago

Status: active

Source details

Repo: cloudogu/reveal.js

Stars: 34

Forks: 10

Language: JavaScript

License: MIT

Latest: 5.2.1-r3 · 8 months ago

Updated: 7 months ago

Website: cloudogu.github.io/reveal.js-docker-example/

Configuration

Type

Container

Platform

linux

Image

cloudogu/reveal.js

Ports

6060:8080/tcp

Volumes

/reveal/docs/slides : /portainer/Files/AppData/Config/revealjs/docs/slides/resources : /portainer/Files/AppData/Config/revealjs/scripts/test

Restart

always

Template by xneo1

Standalone Install

Select an install method, to see config/commands for deploying Reveal.js

Install on Portainer

Import all app templates into your Portainer instance, for easy 1-click deploys

Ensure both Docker and Portainer are installed, and up-to-date
Log into your Portainer web UI
Under Settings → App Templates, paste the below URL
Head to Home → App Templates, and the list of apps will show up
Select Reveal.js, fill in any config options, and hit Deploy

Template Import URL

https://raw.githubusercontent.com/Lissy93/portainer-templates/main/templates.json

Show Me

More install options in our documentation, or see cloudogu/reveal.js for app-specific guidance.

reveal.js-docker

Docker images providing easier to use, opinionated reveal.js web apps - web-based slides/presentations.
Evolution of cloudogu/continuous-delivery-slides. Allows for

less cluttered Repos (more slides, less reveal.js)
faster startup / builds (don't have to build reveal.js over and over again)
easier updates (new version of docker image; no git merge necessary)

How to use

- Simplest start - Ship your own slides - Index.html pseudo-template - Examples

Development

- Tests

How to use

Simplest start

Ships a default presentation:

docker run --rm -p 8080:8080 cloudogu/reveal.js

Ship your own slides

Mount markdown slides to /docs/slides
Optionally mount additional folders to web server, e.g. like so:

-v $(pwd)/images:/reveal/images

Mount folder containing HTML fragment files (examples) to /resources

slides.html -> Pick the slides from docs/slides (example) additional.js - script executed before initializing reveal.js body-end.html - html injected at the end of HTML <body> footer.html - rendered at the footer (lower left corner) for now only works with cloudogu Themes
Optional Env vars:
TITLE THEME_CSS
* `css/cloudogu.css` * `css/cloudogu-black.css`
SHOW_NOTES_FOR_PRINTING - print speaker notes - defaults to false. ADDITIONAL_REVEAL_OPTIONS - additional reveal.js options ADDITIONAL_DEPENDENCIES - additional reveal.js dependencies, e.g. plugins
e.g. `-e ADDITIONAL_DEPENDENCIES="{ src: 'plugin/tagcloud/tagcloud.js', async: true }" ` Note that these files have to be mounted to the /reveal folder, e.g. here `-v $(pwd)/plugin/tagcloud:/reveal/plugin/tagcloud`
SKIP_TEMPLATING ignores all of the above elements and just launches with the index.html present. Useful if you

mount your own `index.html`.

Start Container

# Development mode (with live reloading)
docker run --rm \
    -v $(pwd)/docs/slides:/reveal/docs/slides \
    -v $(pwd)/scripts/test:/resources \
    -e TITLE='my Title' -e THEME_CSS='css/cloudogu-black.css' \
    -p 8000:8000 -p 35729:35729 \
    cloudogu/reveal.js:dev

# Production Mode (smaller, more secure, just a static HTML site served by NGINX)
docker run --rm \
    -v $(pwd)/docs/slides:/reveal/docs/slides \
    -v $(pwd)/scripts/test:/resources \
    -e TITLE='my Title' -e THEME_CSS='css/cloudogu-black.css' \
    -p 8080:8080 \
    cloudogu/reveal.js

You can also build your own productive image:

FROM cloudogu/reveal.js:3.9.2-r5 as base

FROM base as aggregator
USER root
RUN mkdir -p /dist/reveal
COPY . /dist/reveal
RUN mv /dist/reveal/resources/ /dist

FROM base
ENV TITLE='my Title' \
    THEME_CSS='css/cloudogu-black.css'
COPY --from=aggregator --chown=nginx /dist /

Or if you want to run the container with --read-only file system, you can do the index.html rendering at build time, so no files need to be written at runtime:

FROM cloudogu/reveal.js:3.9.2-r3 as base

FROM base as aggregator
ENV TITLE='myTitle' \
    THEME_CSS='css/cloudogu-black.css'
USER root
COPY . /reveal
RUN mv /reveal/resources/ /
RUN /scripts/templateIndexHtml

FROM base
ENV SKIP_TEMPLATING='true'
COPY --from=aggregator --chown=nginx /reveal /reveal

You can then start your container like so

docker run --rm --read-only -v someTempFileImage:/tmp yourImageName

Index.html pseudo-template

An overview where the env vars and HTML Fragment are injected:

<!doctype html>
<html>
<head>
    <title>${TITLE}</title>
    
    <link rel="stylesheet" href="${THEME_CSS-css/cloudogu.css}">
</head>
<body>
    <div class="reveal">
        <!-- optional: footer.html -->
        <div class="slides">
        <!-- slides.html-->
        </div>
    </div>
    const showNotesForPrinting = ${SHOW_NOTES_FOR_PRINTING};
    <!-- Optional: <script>additional.js</script>-  -->
    <script>
    // ... Initializes reveal.js
        dependencies: [
                         // ...,
                         ${ADDITIONAL_DEPENDENCIES}
                       ]
        ${ADDITIONAL_REVEAL_OPTIONS}
    </script>
    
    <!-- optional: body-end.html -->
</body>
</html>

Examples

cloudogu/k8s-security-3-things

Development

Build Docker Images, from repo root

docker build -t prod .
docker build -t dev --build-arg ENV=dev .

Note: If only one build is required, buildkit would be more efficient. However, prod is failing with buildkit. Try it with export DOCKER_BUILDKIT See this issue) and run container as described here.

Script templateIndexHtml

Test script locally (manually for now 😬)

# For now manually
CAT_INDEX_HTML='true' RESOURCE_FOLDER='scripts/test' WEB_FOLDER='.' scripts/src/templateIndexHtml

Serve Reveal.js on your own domain behind Caddy, Nginx or Traefik. Fill in your domain and copy the result. It's a starting point, some apps need their own base URL or extra headers set too.

Proxy Domain App port Upstream

Proxying reveal-js.example.com to http://revealjs:8080

Add this to your Caddyfile

reveal-js.example.com {
	reverse_proxy http://revealjs:8080
}

Check the logs first

Nine times out of ten the logs tell you exactly what went wrong.

In Portainer, go to Containers, click the container, then Logs. Or run docker logs revealjs
Exit codes help too: 137 means killed, usually out of memory. 126 or 127 means the command inside the image is broken.

Port already in use

If deployment fails with "Bind for 0.0.0.0:6060 failed: port is already allocated", something else on your server is using that port.

Find what's using it: sudo ss -tlnp | grep :6060
Stop the other service, or pick a different host port. In 6060:8080 only the left number is yours to change, the right one belongs to the app.

Running but the page won't load

The container is up but nothing appears in your browser.

Use your server's real IP: http://your-server-ip:6060. The 0.0.0.0 link Portainer shows isn't a real address.
Give it a minute after first deploy, revealjs can take a while to initialise.
Make sure your firewall allows the port, e.g. sudo ufw allow 6060

Permission denied on volumes

If the logs show "permission denied", the app can't write to its data folder on the host.

Fix the ownership: sudo chown -R 1000:1000 /portainer/Files/AppData/Config/revealjs/docs/slides (and the same for the other mapped folders)

Image won't pull

Test the pull directly on the host: docker pull cloudogu/reveal.js

"manifest unknown" means the tag no longer exists. This template uses latest, so try pinning a specific version instead.
"toomanyrequests" is the Docker Hub rate limit. Log in with docker login to raise it.
"no space left on device" means a full disk. Reclaim space with docker system prune

"exec format error"

This means the image was built for a different CPU architecture than your server.

This image supports: amd64
Check yours with uname -m: x86_64 is amd64, aarch64 is arm64. Raspberry Pi and other ARM boards are the usual culprits.

Container keeps restarting

The always restart policy relaunches the app after every crash, so the real error can scroll past.

Check the logs right after a restart, the last few lines before it died are the useful ones.
Get the exit code with docker inspect revealjs --format '{{.State.ExitCode}}'
Still stuck? Redeploy once with the restart policy set to no so the failure stays visible.

Raise an issue

Found something which isn't working as it should? Here's how to report it.

Bug within the app: Open an issue on cloudogu/reveal.js
Template not working: Open an issue on xneo1/portainer_templates
This website not working: Open an issue on lissy93/portainer-templates

A single container

Reveal.js runs as one container, the simplest kind of app here. Just the one image to pull and nothing else wired up alongside it.

The app image

An image is the app packed up ready to go, everything Reveal.js needs bundled into one download. This template pulls cloudogu/reveal.js, which Docker fetches once (about 8 MB) and then starts your own copy from.

Where the image comes from

Docker pulls its images from registries, public libraries of ready-built apps. Reveal.js's comes from Docker Hub, published by cloudogu.

Version tags

The bit after the colon in the image name is the version tag. Here it's latest, which always points at the newest build, so a redeploy can bump you to a newer release without you asking. Newest right now is 5.2.1-r3. Pin a specific tag if you would rather stay on one version.

Which machines it runs on

Every image is built for particular CPU types. This one ships for amd64, so it runs on regular x86 PCs and servers, though not ARM boards like a Raspberry Pi.

Ports

A port is the door the app answers on. A mapping like 6060:8080 means it's reachable on port 6060 of your server, where the left number is yours to change and the right one belongs to the app. Once it's running, open http://your-server-ip:6060 in a browser. It opens:

6060:8080, likely the web interface

Volumes

A volume is where Reveal.js keeps its files so they survive an update or a restart. Without one, anything it saves would sit inside the container and vanish the moment it's recreated. This template mounts:

/reveal/docs/slides from /portainer/Files/AppData/Config/revealjs/docs/slides on the host
/resources from /portainer/Files/AppData/Config/revealjs/scripts/test on the host

Restart policy

The restart policy here is always, so Docker brings Reveal.js back up after a crash and again when the server reboots. Good for anything you want running around the clock. You can change this on the deploy screen. The choices are no (never restart), on-failure (only after a crash), unless-stopped (restart unless you stop it), and always (bring it back no matter what).

Networking

Nothing custom is set, so Reveal.js sits on Docker's default bridge network: its own private space that reaches the outside world only through the ports it publishes.

Container name

Once it's deployed, Portainer names the container revealjs. That's what you'll spot in the containers list and use in commands like docker logs revealjs.

Platform

The platform is linux, the kind of system the container is built to run on. Docker and Portainer handle this on a normal Linux server.

Open source license

Reveal.js is open source, released under the MIT license. In plain terms the code is out in the open, so you're free to run it and change it to fit what you need.

Portainer app templates

Zooming out, this whole page comes from a Portainer app template: a short recipe telling Portainer how to set Reveal.js up. Add the template list to Portainer once, then deploying Reveal.js is a click rather than a wall of config.

Portainer Templates

Reveal.js

Image details

Source details

Configuration

Standalone Install

Install on Portainer

Template Import URL

reveal.js-docker

Table of contents

How to use

Simplest start

Ship your own slides

Index.html pseudo-template

Examples

Development

Script templateIndexHtml

Check the logs first

Port already in use

Running but the page won't load

Permission denied on volumes

Image won't pull

"exec format error"

Container keeps restarting

Raise an issue

A single container

The app image

Where the image comes from

Version tags

Which machines it runs on

Ports

Volumes

Restart policy

Networking

Container name

Platform

Open source license

Portainer app templates

Reveal.js

Image details

Source details

Configuration

Standalone Install

Install on Portainer

Template Import URL

Container Documentation

reveal.js-docker

Table of contents

How to use

Simplest start

Ship your own slides

Index.html pseudo-template

Examples

Development

Script templateIndexHtml

Recent versions

Proxy configurator

Troubleshooting

Check the logs first

Port already in use

Running but the page won't load

Permission denied on volumes

Image won't pull

"exec format error"

Container keeps restarting

Raise an issue

Config glossary

A single container

The app image

Where the image comes from

Version tags

Which machines it runs on

Ports

Volumes

Restart policy

Networking

Container name

Platform

Open source license

Portainer app templates