Getting Started - FactoriaF5-Asturias/project-p5-digital-academy-team1-restaurant-frontend GitHub Wiki
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..envis ignored by Git; only.env.exampleis 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
- Open
https://localhost:5173โ the Carta loads with the 60 products from the backend seed. - Log in with one of the backend seed users (local development only):
| Role | Password | Lands on | |
|---|---|---|---|
| Customer | [email protected] |
user1234 |
Carta, Cesta, Mi pedido, Perfil |
| Cook | [email protected] |
cook1234 |
Cocina |
| Delivery driver | [email protected] |
delivery123 |
Reparto |
| Admin | [email protected] |
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)