Front-end only development environment

wikipage development github documentation vocadb
On this page

This guide is to start developing on vocaDB front-end only. This bypasses the need to set up the back-end, run the server locally and set up a database. By connecting to the VocaDB beta website you are able to develop locally with minimal setup. Do mind that if you have only recently created your account, it might not yet be available on the beta website and you will be unable to log in. Any other functionality should work as expected.

Requirements

Step-by-step first setup

  1. Ensure you have all the requirements installed.

  2. Clone the repository and its submodules.

    git clone https://github.com/vocadb/vocadb.git --recurse-submodules
cd vocadb

  3. Open the VocaDB project in Visual Studio.

  4. Prepare the vite configuration file. See vite.config section for more information.

  5. Build the frontend using Node.js. See Compiling frontend assets section for more information.

    1. Right click VocaDbWeb on the Solution Explorer in the right and select the Open in Terminal option.
    2. Install dependencies by running npm install on the Terminal.
    3. Build assets by running npm run development on the Terminal.

  6. You should now be able to start developing.

Formatting

Line endings and indentation are configured by EditorConfig. There’s a plugin for almost any major IDE/text editor. Please install that plugin before editing the code files.

For the frontend located on VocaDbWeb, Prettier and ESLint is used to ensure code quality. You can use plugins to enhance the use of them.

Visual Studio Code

The following extensions are recommended in the VocaDbWeb folder.

These configuration is recommended for better formatting on Visual Studio Code. Open the Settings screen (by pressing F1 and press Preferences: Open Settings (UI) or File (on the top left) > Preferences > Settings) and change these settings.

  • Editor: Default Formatter: Prettier - Code formatter esbenp.prettier-vscode
  • Editor: Format on Save: checked

vite.config

Navigate to VocaDbWeb\vite.config.ts. Here you will see a configuration file that currently points to 'https://localhost:5001' in two locations locations. Replace the value with 'https://beta.vocadb.net' to connect to the VocaDB beta server.

Compiling frontend assets

Ensure Node.js is installed and VocaDbWeb is opened on the Terminal of Visual Studio Code before running these commands.

Install the frontend dependencies by running this command.

npm install

Run this command so that Vite will automatically recompile your assets when it detects a change.

npm run development
About VocaDB Staff Contact