Next Generation Open Source Wiki

• Official Website
• Documentation

🟥 ⚠️ ⚠️ 🟥
THIS IS A VERY BUGGY, INCOMPLETE AND NON-SECURE DEVELOPMENT BRANCH!
USE AT YOUR OWN RISK! THERE'S NO UPGRADE PATH FROM THIS BUILD AND NO SUPPORT IS PROVIDED!
🟥 ⚠️ ⚠️ 🟥

The current stable release (2.x) is available at https://js.wiki

---

• Generic Setup
  • Requirements
  • Usage
• Using VS Code Dev Environment (recommended)
  • Requirements
  • Usage
  • Server Development
  • Frontend Development (Quasar/Vue 3)
  • Legacy Frontend Development (Vuetify/Vue 2)
  • pgAdmin

Generic Setup

Requirements

• Node.js 18.x or later
• Yarn
• PostgreSQL 11 or later

Usage

1. Clone the project
2. Make a copy of config.sample.yml and rename it to config.yml
3. Edit config.yml and fill in the database details. You need an empty PostgreSQL database.
4. Run the following commands to install dependencies and generate the client assets:

   yarn
   yarn legacy:build
   cd ux
   yarn
   yarn build
   cd ..
   

5. Run this command to start the server:

   node server
   

6. In your browser, navigate to http://localhost:3000 (or the IP/hostname of the server and the PORT you defined earlier.)
7. Login using the default administrator user:
   • Email: admin@example.com
   • Password: 12345678

DO NOT report bugs. This build is VERY buggy and VERY incomplete. Absolutely NO support is provided either.

Using VS Code Dev Environment

Requirements

• VS Code
• Docker Desktop
• Windows-only: WSL 2 + WSL Integration enabled in Docker Desktop

Usage

1. Clone the project.
2. Open the project in VS Code.
3. Make sure you have Dev Containers extension installed. (On Windows, you need the WSL VS Code extension as well.)
4. 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) afterwards).
5. Once in container mode, make a copy of config.sample.yml and rename it to config.yml. There's no need to edit the file, the default values are ok.
6. From the Command Palette, run the task "Create terminals":
   • Launch the Command Palette (Ctrl+Shift+P)
   • Type "Run Task" and press Enter
   • Select the task "Create terminals" and press Enter
7. Two terminals will launch in split-screen mode at the bottom of the screen. Server on the left and UX on the right.
8. In the left-side terminal (Server), run the command:

   yarn legacy:build
   

9. In the right-side terminal (UX), run the command:

   yarn build
   

10. Back in the left-side terminal (Server), run the command:

    yarn dev
    

11. Open your browser to http://localhost:3000
12. Login using the default administrator user:
    • Email: admin@example.com
    • Password: 12345678

DO NOT report bugs. This build is VERY buggy and VERY incomplete. Absolutely NO support is provided either.

Server Development

From the left-side terminal (Server), run the command:

yarn dev

This will launch the server 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 (Quasar/Vue 3)

Make sure you are running yarn dev in the left-side terminal (Server) first! Requests still need to be forwarded to the server, even in SPA mode!

If you wish to modify any frontend content (under /ux), you need to start the Quasar Dev Server in the right-side terminal (UX):

yarn 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 /graphql endpoint are automatically forwarded to the server running on port 3000, which is why both must be running at the same time.

Note that not all sections/features are available from this mode, notably the page editing features which still relies on the old client code (Vuetify/Vue 2). For example, trying to edit a page will simply not work. You must use the normal mode (port 3000) to edit pages as it relies on legacy client code. As more features gets ported / developed for Vue 3, they will become available in the SPA mode.

Any change you make to the frontend will not be reflected on port 3000 until you run the command yarn build in the right-side terminal.

Legacy Frontend Development (Vuetify/Vue 2)

Client code from Wiki.js 2.x is located under /client. Some sections still rely on this legacy code (notably the page editing features). Code is gradually being removed from this location and replaced with newer code in /ux.

In the unlikely event that you need to modify legacy code and regenerate the old client files, you can do so by running in this command in the left-side terminal (Server):

yarn legacy:build

Then run yarn dev to start the server again.

pgAdmin

A web version of pgAdmin (a PostgreSQL administration tool) is available at http://localhost:8000. Use the login dev / 123123 to login.

The server dev should already be available under Servers. If that's not the case, add a new one with the following settings:

• Hostname: db
• Port: 5432
• Username: postgres
• Password: postgres
• Database: postgres