Development setup

Install dependencies

npm install

Run development server

npm start

Environment variables

When running locally, environment variables will be taken from this file.

Lint and fix files

npm run lint:fix

Customize configuration

See Configuration Reference for Vue options.

Optional: Setup website backend server (and authenticate as admin)

By default the website you started using npm start will connect to the production backend of www.w3champions.com. The API serving the dynamic content is available at website-backend.w3champions.com/api/.

If you're not interested in manipulating the API responses you can skip the following setup, but for some actions you might require a local instance of the website backend:

1. Clone (and fork) the w3champions/website-backend
2. Follow the setup instructions and spin up your local website backend api server
3. Change the BASE_URL in the environment configuration /public/env.js#L4 to your desired URL

Authenticating as Admin

Granting yourself admin permissions consists of two steps:

Granting API admin scope (JWT manipulation)

Permission is validated using a JWT, to intercept the process you can skip the JWT validation and return a valid W3CUserAuthenticationDto object which grants you IsAdmin rights.

Open the file W3ChampionsStatisticService/WebApi/ActionFilters/W3CAuthenticationService.cs and just return an object which contains your battleTag and IsAdmin = true like

public async Task<W3CUserAuthenticationDto> GetUserByToken(string bearer)
{
    return new W3CUserAuthenticationDto
    {
        BattleTag = "modmoto#123",
        Name = "modmoto",
        IsAdmin = true
    };
}

After restarting the backend server you're granted access to all routes protected by the [CheckIfBattleTagIsAdmin] attribute.

Granting frontend admin permission

In order to set the isAdmin state in the frontend you have several options. Since the original permission request is send to the w3champions/identification-service (see IDENTIFICATION_URL) you could spin up your own local identification server and grant yourself admin permission.

A more convenient option is to overwrite the vue mutation which sets the isAdmin property in the oauth store:

SET_IS_ADMIN(isAdmin: boolean): void {
  this.isAdmin = true; // this.isAdmin = isAdmin;
}

Working with Localization

The website rebuilds localizations on each new deployment, running this script:

generate-locales.ts

this works by gathering all the localization strings from this Google Drive document:

Localization Tables

It then merges with the existing localizations here, which contains some english-specific translations, such as the names of maps and proxies:

locales

If you'd like to add new strings to the website, you can request access to edit the localization document above to add them, and then refer to them in the html by calling the v18n library in that component.

example