Skip to content

Getting Started

Jump to bottom
Alexapop edited this page Oct 6, 2026 · 1 revision

A step-by-step guide to cloning, installing, and running the frontend locally.

Requirements

Make sure you have the following installed:

  • Node.js 22 LTS — node -v (the same version used in the CI pipeline; Vite 8 requires a recent Node version)
  • npm — npm -v
  • Git
  • mkcert — to create trusted local HTTPS certificates (installation guide)
  • The GitSushi backend running locally on https://localhost:8443 — see the backend repository
  • An IDE of your choice (VS Code recommended) with the Vue - Official extension installed
  • Chrome or Edge — required for voice dictation in the profile form (Web Speech API)

1. Clone the repository

git clone https://github.com/FactoriaF5-Asturias/project-p5-digital-academy-team1-restaurant-frontend.git
cd project-p5-digital-academy-team1-restaurant-frontend

If you are a team member, clone your fork instead and add the team repository as upstream — see Git Workflow.

2. Install dependencies

npm install

3. Create the local HTTPS certificates

The backend runs over HTTPS and sends the session in secure cookies (SameSite=None), so the frontend must also run over HTTPS. vite.config.js looks for the certificates in a certs folder next to the repository folder:

Visual Studio/                      # (or any parent folder)
├── certs/
│   ├── localhost+2.pem
│   └── localhost+2-key.pem
└── project-p5-digital-academy-team1-restaurant-frontend/

# From the parent folder of the repository
mkdir certs
cd certs
mkcert -install                     # only the first time: trusts the local CA
mkcert localhost 127.0.0.1 ::1      # creates localhost+2.pem and localhost+2-key.pem

The certificates are never committed. If they are missing, Vite starts over plain HTTP — useful for running tests or CI, but the login will not work against the HTTPS backend.

4. Configure the environment

Create your .env file from the template:

cp .env.example .env

Set the backend URL (HTTPS):

VITE_API_BASE_URL=https://localhost:8443

Only variables prefixed with VITE_ reach the client code, and everything in them ends up in the browser bundle — never put secrets here. .env is ignored by Git; only .env.example is committed.

Dependencies list:

Framework: Vue 3.5 · Build tool: Vite 8

Core

Dependency Version Purpose
vue ^3.5.41 Reactive UI framework (Composition API)
vue-router ^5.3.1 Client-side routing and role-based route guards
pinia ^4.0.3 Global state management (auth, cart, checkout, offers, last order)
axios ^1.20.0 HTTP client for the REST API

Styling

Dependency Version Purpose
tailwindcss ^4.3.3 Utility-first CSS framework (@theme design tokens)
@tailwindcss/vite ^4.3.3 Tailwind integration with Vite

Development Tools

Dependency Version Purpose
vite ^8.2.2 Dev server with hot module replacement and production build
@vitejs/plugin-vue ^6.0.8 Compiles Vue Single File Components

Testing

Dependency Version Purpose
vitest ^5.0.0 Test runner (Vite-native, Jest-compatible API)
@vue/test-utils ^2.5.0 Mounting and interacting with Vue components in tests
jsdom ^30.1.1 Simulated browser environment for tests
@vitest/coverage-v8 ^5.0.0 Code coverage reports (v8 provider)

5. Run the development server

npm run dev

The app starts on https://localhost:5173 (port fixed in vite.config.js).

6. Verify it's working

  1. Open https://localhost:5173 — the Carta loads with the 60 products from the backend seed.
  2. Log in with one of the backend seed users (local development only):
Role Email Password Lands on
Customer customer@gitsushi.com user1234 Carta, Cesta, Mi pedido, Perfil
Cook cook@gitsushi.com cook1234 Cocina
Delivery driver delivery@gitsushi.com delivery123 Reparto
Admin admin@gitsushi.com admin123 Admin, Cocina, Reparto, Perfil

Common issues

Issue Likely cause
"No se ha podido cargar la carta" + net::ERR_CONNECTION_REFUSED The backend is not running, or VITE_API_BASE_URL is wrong
blocked by CORS policy The backend only accepts https://localhost:5173. Check that Vite is running on HTTPS (certificates found) and on port 5173
NET::ERR_CERT_AUTHORITY_INVALID mkcert -install was not run, or the browser was open before installing the local CA — restart the browser
Login returns 403 with correct credentials The browser is blocking the session cookies. In Chrome, click the crossed-out eye icon in the address bar and allow third-party cookies for localhost:8443
Changes in .env are not applied Vite only reads environment files on startup — restart npm run dev

Useful commands

npm run dev             # start the dev server
npm run build           # production build in /dist
npm run preview         # serve the production build locally
npm run test            # run the whole test suite once
npm run test:watch      # run tests in watch mode while developing
npm run test:coverage   # run tests with coverage report (terminal + coverage/index.html)

Clone this wiki locally