Running Slidev on Docker

[tutods]

Description

I'm trying to run the Slidev presentation using a Dockerfile and Docker Compose. But when I access the localhost:<port-i-set> not working. On 0.0.0.0:<por-i-set> the screen is flashing.

To Reproduce

1. Create a Slidev presentation and create the Dockerfile with:

FROM node:17-alpine3.14

WORKDIR /usr/app

COPY package.json ./
COPY yarn.lock ./

RUN yarn

COPY . ./

EXPOSE 3030

CMD ["yarn", "dev"]

2. After that create the docker-compose.yml file with:

version: '3.8'

services:
  presentation:
    build:
      context: .
      dockerfile: ./Dockerfile

    volumes:
      - '.:/usr/app'
      - '/usr/app/node_modules'

    ports:
      - 3031:3030

3. Run docker-compose up and try access the presentation.

Details

• OS: macOS
• Browser: Safari and Firefox
• Slidev version: 0.28.9

[tangramor]

I just implemented a new docker image for slidev because the image mentioned in official document is not working:

Slidev Docker image

Work with Slidev. Just run following command in your work folder:

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    tangramor/slidev:latest

If your work folder is empty, it will generate a template slides.md and other related files under your work folder, and launch the server on port 3030.

You can access your slides from http://localhost:3030/

Build deployable image

Or you can create your own slidev project to a docker image with Dockerfile:

FROM tangramor/slidev:latest

ADD . /slidev

Create the docker image: docker build -t myppt .

And run the container: docker run --name myslides --rm --user node -p 3030:3030 myppt

You can visit your slids from http://localhost:3030/

Build hostable SPA (Single Page Application)

Run command docker exec -i slidev npx slidev build on the runing container slidev. It will generate static HTML files under dist folder.

You can host dist in a static web site such as Github pages or Gitlab pages. You can also host it by your self:

docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine

Or create a static image with following Dockerfile:

FROM nginx:alpine

COPY dist /usr/share/nginx/html

Create the docker image: docker build -t mystaticppt .

And run the container: docker run --name myslides --rm -p 80:80 mystaticppt

You can visit your slids from http://localhost/

[tutods]

Thanks, and how you do the production (builded presentation) in docker-compose and docker file?

[tutods]

I tried using this code:

Dockerfile

FROM node:alpine AS development

WORKDIR /usr/app

ENV PATH /usr/app/node_modules/.bin:$PATH

COPY package.json ./
COPY yarn.lock ./

# use --ignore-scripts to avoid the husky hooks
RUN yarn install --ignore-scripts
RUN npx playwright install

COPY . .

RUN yarn build

EXPOSE 3030

CMD ["yarn", "slidev", "--remote"]

FROM nginx:alpine AS production

WORKDIR /usr/app

COPY --from=development /usr/app/dist .

Docker Compose

version: '3.8'

services:
  prod_presentation:
    build:
      context: .
      target: production
      dockerfile: ./Dockerfile

    volumes:
      - .:/usr/app:ro

    ports:
      - 8081:80

[tutods]

But appears this error every time I try to run the docker-compose:

15 7.699 browserType.launch: Failed to launch: Error: spawn /root/.cache/ms-playwright/chromium-965416/chrome-linux/chrome ENOENT
#15 7.699 =========================== logs ===========================
#15 7.699 <launching> /root/.cache/ms-playwright/chromium-965416/chrome-linux/chrome --disable-background-networking --enable-features=NetworkService,NetworkServiceInProcess --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-background-pages --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=ImprovedCookieControls,LazyFrameLoading,GlobalMediaControls,DestroyProfileOnBrowserClose,MediaRouter,AcceptCHFrame,AutoExpandDetailsElement --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-backgrounding --disable-sync --force-color-profile=srgb --metrics-recording-only --no-first-run --enable-automation --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-gOOlee --remote-debugging-pipe --no-startup-window
#15 7.699 [pid=N/A] starting temporary directories cleanup
#15 7.699 [pid=N/A] finished temporary directories cleanup
#15 7.699 ============================================================
#15 7.699     at exportSlides (/usr/app/node_modules/@slidev/cli/dist/export-ZRXUVXEE.js:68:34)
#15 7.699     at async build (/usr/app/node_modules/@slidev/cli/dist/build-VQ6LBTZA.js:723:5)
#15 7.699     at async Object.handler (/usr/app/node_modules/@slidev/cli/dist/cli.js:179:3)
#15 7.755 error Command failed with exit code 1.
#15 7.756 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
executor failed running [/bin/sh -c yarn build]: exit code: 1
ERROR: Service 'prod_presentation' failed to build : Build failed

[tonai]

Playwright officially only supports ubuntu for Linux distribution.

[tutods]

Playwright officially only supports ubuntu for Linux distribution.

What you recommend? Remove the package?

[tonai]

The simplest way is to use a Ubuntu node container. Officials node containers are only Debian or Alpine, but you can maybe try this one: https://hub.docker.com/layers/sitespeedio/node/ubuntu-20.04-nodejs-12.14.1/images/sha256-f30166b7eb40aa694a87ad2460291ebf859a3b794557f5f0478ee54bfa8a43

On my side, I also use docker and I use the debian node:16-bullseye-slim image. But I did a little trick to cheat Playwright because they pushed a new release that will prevent the installation on Linux distribution that are not Ubunu.

Here is my Dockerfile:

FROM node:16-bullseye-slim

EXPOSE 3030

WORKDIR /root

COPY --chown=root:root package.json package-lock.json /root/

# Install dependencies
RUN set -xe; \
    # Required for ttf-ubuntu-font-family dependency that is used by playwright
    sed -i -e's/ main/ main contrib non-free/g' /etc/apt/sources.list; \
    apt-get update; \
    npm install -g npm@latest; \
    npm ci; \
    # Playwright only officialy support Ubuntu for linux distributions
    sed -i -e 's/^ID=.*/ID=ubuntu/g' /etc/os-release; \
    sed -i -e 's/^NAME=.*/NAME="Ubuntu"/g' /etc/os-release; \
    sed -i -e 's/^VERSION_ID=.*/VERSION_ID="20.04"/g' /etc/os-release; \
    # Install additional packages required for playwright (including ttf-ubuntu-font-family)
    npx playwright install-deps chromium; \
    npm cache clean --force; \
    apt-get clean; \
    rm -rf /var/lib/apt/lists/*;

COPY --chown=root:root entrypoint.sh /root/

ENV SHELL=/bin/bash
ENTRYPOINT ["/root/entrypoint.sh"]
CMD ["all"]

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.