Skip to content

Frontend Introduction

This guide walks you through the initial steps required to set up and develop frontend features in our project.

Getting Started as a Frontend Developer

We are transitioning from server-side rendering to a modern frontend stack using Vue.js alongside GraphQL on the backend.

Note: To develop frontend features, you must also have the backend running on your workstation. Follow the Initial Setup Guide if you haven't set it up yet.

Setting Up the Frontend Environment

1. Install Node.js.

We use Node Version Manager (nvm) to manage Node.js versions. Install nvm if you haven't already. The current Node.js version is 24.15. Once installed, switch to the correct version:

nvm use

If the required version is not installed, nvm will prompt you to install it. Refer to the nvm README for installation details.

2. Use the right version of Yarn package manager

We use Yarn as the package manager. The current Yarn version is 4.14.1. Enable it with:

corepack enable

Corepack will switch to Yarn version that is defined in package.json in field packageManager.

3. Running Initial Setup

To initialize the project, including database migration and installing dependencies (node modules), run the following command in the project root:

RAILS_ENV=development bundle exec rails easy8:install

Running the Development Environment

Before starting development, ensure that your platform is on the correct branch.

1. Start Vite Development Server

Start Vite to serve the frontend assets, with watching changes:

vite dev

It is possible to run vite build to build the frontend assets without watching changes. (This is used in production.)

Do not kill it! Keep an eye on the console. Front compilation failures appear here.

2. Start the Rails server

In a separate terminal, start the Rails backend:

bundle exec rails server

3. Use the app in the browser

Once the servers are running:

  • Vite serves the frontend assets.
  • Any changes to the source files trigger automatic recompilation.
  • The app can be accessed via http://localhost:3000/.