Configuring VitePress
To modify any VitePress related settings, a JavaScript development environment is needed. Everything related to VitePress is contained in the docs/ folder.
Prerequisites
- Node.js v24 or above is recommended. To install and manage Node.js nvm is the preferred way for Linux and MacOS. For Windows either official installer or fnm.
- pnpm package manager, v10.28 or above. Easiest way to install pnpm is using corepack which is part of Node.js.
Development
To start a development environment,
- Navigate to
/docsdirectory in the terminal
sh
cd docs- Install dependencies
sh
pnpm install- Start the development server
sh
pnpm run docs:dev- Open
http://localhost:5173/frappe_dockerin your browser to see the development version which will update the preview as you make changes.
Configurations
- Public assets related to VitePress site is added in the
docs/publicfolder. This folder should NOT be used for adding images added inside the.mdfile. - VitePress uses
index.mdfiles to do some special things. For example the home page is configured using thedocs/index.mdfile. Checkout the file for more details. - VitePress uses 'file based routing', meaning the URL paths mimics the directory and file structure inside the
docs/directory. - VitePress specific config is
docs/.vitepress/config.mts. - To auto populate the sidebar, a plugin called 'VitePress Sidebar' is used. The
config.mtsalso include config for this plugin. More details can be found in the documentation page. - Each subfolder has an
index.mdfile. This is used to specify the group heading of the pages in the sidebar.
