Frontend Development

Running front-end

1) Launch API server

Either use

API Container

Manually Run API

2) Configure .env

In the Frontend folder create file .env

VITE_ENTRA_CLIENT_ID = 6b19d245-0286-43a2-8481-98db51a8e777
VITE_ENTRA_TEDANT_ID = e066975d-a520-4d16-bc9e-861a5ed8ded7
VITE_ENTRA_SERVER = luuppiweba
VITE_ENTRA_SCOPE = api://luuppi-larpake/Larpake.Use
VITE_ENTRA_REDIRECT_URL = http://localhost:3000/fi/index.html

# Local running API instance
# https://localhost:7267/
# 
# Dev Docker Container
# https://localhost:5502/
#
# Production database (do not use)
# https://larpake.luuppi.fi/
VITE_API_BASE_URL = http://localhost:5502/

3) Run vite server

In Frontend folder run

npm run dev 

Go to localhost:3000

Frontend should now be open at http://localhost:3000/fi/index.html

Tip:

• Download vite vscode extension
• create Frontend/.vscode/launch.json
• copy paste following
• after npm run dev press F5 to launch the app and debug

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome Localhost vite",
            "url": "http://localhost:3000/index.html",
            "webRoot": "${workspaceFolder}",
        }
    ]   
}