Overview
It's very easy to run a development instance of Wiki.js with all the necessary dependencies and tools included.
Requirements
- An IDE that supports Dev Containers, for example:
- Visual Studio Code (recommended)
- You must also install the Dev Containers extension.
- IntelliJ WebStorm
- Zed
- Visual Studio Code (recommended)
- Docker Engine with Docker Compose
Note
Avoid Docker Desktop on Linux as it's known to cause issues. Install the Docker Engine directly instead.
- An IDE that supports Dev Containers, for example:
- Visual Studio Code (recommended)
- You must also install the Dev Containers extension.
- IntelliJ WebStorm
- Zed
- Visual Studio Code (recommended)
- Docker Desktop
- An IDE that supports Dev Containers, for example:
- Visual Studio Code (recommended)
- You must also install the Dev Containers and WSL extensions.
- IntelliJ WebStorm
- Zed
- Visual Studio Code (recommended)
- Docker Desktop
- WSL 2 + WSL Integration enabled in Docker Desktop
Basic Usage
Warning
All instructions below are written with Visual Studio Code in mind. The steps will defer for other editors.
- Clone the project on your local machine.
- Open the project in Visual Studio Code.
- Reopen the project in container (from the popup in the lower-right corner of the screen when opening the project, or via the Command Palette (Ctrl + Shift + P or F1) afterwards).
- Once in container mode, make a copy of
config.sample.ymland rename it toconfig.yml. There's no need to edit the file, the default values are ok. - Two terminals should automatically launch in the lower part of the screen. If this isn't the case, from the Command Palette, run the task "Create terminals":
- Launch the Command Palette (Ctrl + Shift + P or F1)
- Type
Run Taskand press Enter - Select the task "Create terminals" and press Enter
- In the right-side terminal (Frontend), run the command:
npm run build - In the left-side terminal (Backend), run the command:
npm run start - Open your browser to
http://localhost:3000 - Login using the default administrator user:
- Email:
[email protected] - Password:
12345678
- Email:
Populate Sample Content
A tool to quickly generate sample content is available in the Administration Area > Utilities page.
- Click Proceed next to the Generate Sample Content action.
- To delete all sample content, click Proceed next to the Purge Sample Content action instead.
Backend Development
Tip
If you're still running the
npm run startcommand, stop it first.
From the left-side terminal (Backend), run the command:
npm run dev
This will launch the server in dev mode and automatically restart upon modification of any server files.
Only precompiled client assets are served in this mode. See the sections below on how to modify the frontend and run in SPA (Single Page Application) mode.
Frontend Development
Important
Make sure you are running
npm run devin the left-side terminal (Backend) first! Requests still need to be forwarded to the server, even in SPA mode!
If you wish to modify any frontend content (under /frontend), you need to start the Vite Dev Server in the right-side terminal (Frontend):
npm run dev
You can then access the site at http://localhost:3001. Notice the port being 3001 rather than 3000. The app runs in a SPA (single-page application) mode and automatically hot-reload any modified component. Any requests made to the /_api endpoint are automatically forwarded to the server running on port 3000, which is why both must be running at the same time.
Any change you make to the frontend will not be reflected on port 3000 until you run the command npm run build in the right-side terminal.
Included Tools
pgAdmin
A web version of pgAdmin (a PostgreSQL administration tool) is available at http://localhost:8000. Use the login [email protected] / 123123 to login.
Add a new server with the following settings:
- Hostname:
db - Port:
5432 - Username:
postgres - Password:
postgres - Database:
postgres
Mailpit
An instance of mailpit (an email testing tool) is available at http://localhost:8025.
In your Wiki.js dev instance, on the Administration Area > Mail page, enter the following settings to point to it:
- Host:
localhost - Port:
1025 - TLS:
off - Username:
<none> - Password:
<none>