DOCSEARCHbyAlgolia
Submit Docs

LuckPermsWeb

repository·master·Indexed 41 days ago

https://github.com/luckperms/luckpermsweb

The web-based interface for the LuckPerms Minecraft permission plugin, consisting of the main project website and Vue.js applications. It includes a secure WebSocket communication channel for interacting with the plugin, tools for parsing and building permission node keys, and support for self-hosting via Docker Compose with Nginx, bytebin, and bytesocks.

Tokens
4.2K
Snippets
14
Records
18
Agent score
51%

What's inside LuckPermsWeb

  2. Self-host the web interfaces

    master
    The repository includes a docker-compose.yml file that serves as a starting point for self-hosting the web applications. For comprehensive instructions, refer to the official LuckPerms wiki documentation on self-hosting.

  6. Self-host LuckPermsWeb using Docker Compose

    master

    LuckPermsWeb can be deployed as a multi-container stack using Docker Compose. The stack consists of a frontend service, a bytebin service for data storage, a bytesocks service for WebSockets, and an nginx reverse proxy to manage traffic.

    To deploy, ensure you have a local docker/reverseproxy-nginx.conf file configured for the Nginx service, then run docker-compose up.

    services:
  # frontend service
  frontend:
    build:
      context: ./

  # bytebin (data storage) service
  bytebin:
    image: ghcr.io/lucko/bytebin
    volumes:
      - data:/opt/bytebin/content

  # bytesocks (web socket) service
  bytesocks:
    image: ghcr.io/lucko/bytesocks

  # reverse proxy
  nginx:
    image: nginx:alpine
    command: ['nginx', '-g', 'daemon off;']
    depends_on:
      - frontend
      - bytebin
      - bytesocks
    ports:
      - 8080:80
    volumes:
      - ./docker/reverseproxy-nginx.conf:/etc/nginx/conf.d/default.conf:ro

volumes:
  data: {}

  7. Configure Sass global variables and breakpoints

    master

    The project uses custom Sass loader options to automatically inject global Sass modules into every component. This allows you to use @use "sass:color" and the project's internal variables and breakpoints without manual imports in every .vue or .scss file.

    Injected files:

    • @/scss/variables.scss
    • @/scss/breakpoints.scss
    // The following is automatically injected via sass.additionalData
@use "sass:color";
@import "@/scss/variables.scss";
@import "@/scss/breakpoints.scss";

  8. Configure Markdown rendering via @lucko/vue-markdown-loader

    master

    Markdown files (.md) are processed using @lucko/vue-markdown-loader. The loader is configured with the following options:

    • raw: true
    • linkify: false
    • use: A list of markdown-it plugins:
      • markdown-it-anchor: Configured with permalink: true, a permalinkSymbol: '🔗', and a custom slugify function that trims, lowercases, and replaces spaces/non-word characters with hyphens.
      • markdown-it-emoji: Enables emoji support.
      • markdown-it-highlightjs: Enables syntax highlighting using the project's registered highlight.js languages.

  10. Configure the Nginx reverse proxy in Docker Compose

    master

    The nginx service acts as the entry point for the stack. It maps host port 8080 to container port 80 and requires a custom configuration file mounted from your local filesystem.

    Key Configuration Details:

    • Port Mapping: 8080:80 (Access the web interface via http://localhost:8080)
    • Required Volume: ./docker/reverseproxy-nginx.conf must exist locally and be mounted to /etc/nginx/conf.d/default.conf inside the container.
    • Dependencies: The proxy depends on the frontend, bytebin, and bytesocks services being available.

  11. Configure Bytebin data storage volume

    master

    The bytebin service is used for data storage. To ensure data persistence across container restarts, a named volume data is mounted to /opt/bytebin/content within the container.

      bytebin:
    image: ghcr.io/lucko/bytebin
    volumes:
      - data:/opt/bytebin/content

volumes:
  data: {}

  12. Connect to the plugin via socketConnect

    master

    The socketConnect function initializes a WebSocket connection to the LuckPerms plugin. It automatically handles protocol switching (converting http to ws and https to wss) based on the provided windowHref and uses config.bytesocksUrl as the base URL.

    Parameters:

    • channelId: The unique identifier for the socket channel.
    • sessionId: The current session ID.
    • signVerifyAlgorithm: The cryptographic algorithm used for signing/verifying messages.
    • keys: An object containing the privateKey and encodedPublicKey for the client.
    • pluginKey: The public key used to verify messages coming from the plugin.
    • userAgent: The user agent string (used for browser/OS detection).
    • windowHref: The current window location (used to resolve the WebSocket URL).
    • callbacks: An object containing lifecycle hooks:
      • connect(): Called when the connection is established and the state is accepted or trusted.
      • trust(nonce): Called when the plugin returns an untrusted state, providing a nonce to facilitate the trust process.
      • trusted(): Called when the connection state becomes trusted.
      • reused(): Called when the session data has expired (invalid state).
      • close(): Called when the socket connection is closed.
    socketConnect(
  channelId, 
  sessionId, 
  signVerifyAlgorithm, 
  keys, 
  pluginKey, 
  userAgent, 
  windowHref, 
  callbacks
);