ServPulse/Development guide: Difference between revisions
From Nasqueron Agora
Created page with "== Axios == An example of integration between Axios and Vue: https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html This example was for Vue v2, we probably want to target Vue 3." |
→Git workflow: Link to docs/workflow.md |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
== | == Getting started == | ||
git clone https://devcentral.nasqueron.org/source/servpulse.git | |||
https:// | cd servpulse | ||
cp .env.example .env | |||
docker compose up | |||
The application will be available at: | |||
* Status page: http://localhost:8080 | |||
* API: http://localhost:3000/api | |||
Tip: if you're maintainer of the project and need write access to the repository, you need to clone by SSH: <code>git clone ssh://vcs@devcentral.nasqueron.org:5022/source/servpulse.git</code>. If you've already cloned the repository, you can edit the URL in <code>.git/config</code>. | |||
== Project structure == | |||
servpulse/ | |||
├── backend/ Express.js API server (MVC pattern) | |||
│ ├── controllers/ Request handlers | |||
│ ├── models/ Data access layer (raw pg queries) | |||
│ ├── routes/ API route definitions | |||
│ ├── middleware/ JWT authentication | |||
│ ├── services/ Business logic (notifications, health checks) | |||
│ ├── config/ App config (app.json) and database connection | |||
│ └── __tests__/ Jest unit tests | |||
├── frontend/ Vue.js 3 application | |||
│ └── src/ | |||
│ ├── components/ Reusable UI components | |||
│ ├── composables/ Vue 3 composables (useServices, useIncidents, etc.) | |||
│ ├── views/ Page views (StatusPage, AdminDashboard, AdminLogin) | |||
│ ├── plugins/ API client (Axios) | |||
│ ├── utils/ Status helpers and formatters | |||
│ └── router/ Vue Router config with auth guards | |||
├── database/ SQL schema (init.sql) | |||
└── docker-compose.yml | |||
== Code conventions == | |||
* [[Code_conventions|Nasqueron conventions]] | |||
* Single quotes for strings | |||
* camelCase for variables and functions | |||
* Vue 3 Composition API (<code><script setup></code>) for components | |||
* Tailwind CSS utility classes for styling (no scoped styles) | |||
* Raw pg queries in models (no ORM) | |||
== How to add a new feature == | |||
=== Adding a backend resource === | |||
# Add table to <code>database/init.sql</code> | |||
# Create <code>models/resourceModel.js</code> — raw pg queries | |||
# Create <code>controllers/resourceController.js</code> — req/res handlers | |||
# Create <code>routes/resourceRoutes.js</code> — Express router with auth where needed | |||
# Register routes in <code>app.js</code> | |||
# Add tests in <code>__tests__/controllers/resourceController.test.js</code> | |||
=== Adding a frontend component === | |||
# Create <code>.vue</code> file in <code>src/components/</code> using <code><script setup></code> | |||
# Use Tailwind classes and existing utilities from <code>@/utils/status</code> | |||
# Import composables from <code>@/composables/</code> for data | |||
# Add tests in <code>src/components/__tests__/</code> | |||
== Axios integration == | |||
The API client is configured in <code>frontend/src/plugins/api.js</code>. It uses Axios with a base URL from <code>VITE_API_URL</code> and automatically attaches JWT tokens from localStorage via a request interceptor. | |||
Composables (<code>useServices</code>, <code>useIncidents</code>, etc.) wrap the API calls and return reactive refs: | |||
const { services, loading, error, fetchServices } = useServices() | |||
== Testing == | |||
# Backend (Jest) | |||
cd backend && npm test | |||
# Frontend (Vitest) | |||
cd frontend && npm run test:unit | |||
== Git workflow == | |||
See {{Browse|servpulse|docs/workflow.md}} in the repository for the arc diff workflow. | |||
[[Category:ServPulse|Development guide]] | |||
[[Category:Developer guide]] | |||
Latest revision as of 21:51, 17 February 2026
Getting started
git clone https://devcentral.nasqueron.org/source/servpulse.git cd servpulse cp .env.example .env docker compose up
The application will be available at:
- Status page: http://localhost:8080
- API: http://localhost:3000/api
Tip: if you're maintainer of the project and need write access to the repository, you need to clone by SSH: git clone ssh://vcs@devcentral.nasqueron.org:5022/source/servpulse.git. If you've already cloned the repository, you can edit the URL in .git/config.
Project structure
servpulse/ ├── backend/ Express.js API server (MVC pattern) │ ├── controllers/ Request handlers │ ├── models/ Data access layer (raw pg queries) │ ├── routes/ API route definitions │ ├── middleware/ JWT authentication │ ├── services/ Business logic (notifications, health checks) │ ├── config/ App config (app.json) and database connection │ └── __tests__/ Jest unit tests ├── frontend/ Vue.js 3 application │ └── src/ │ ├── components/ Reusable UI components │ ├── composables/ Vue 3 composables (useServices, useIncidents, etc.) │ ├── views/ Page views (StatusPage, AdminDashboard, AdminLogin) │ ├── plugins/ API client (Axios) │ ├── utils/ Status helpers and formatters │ └── router/ Vue Router config with auth guards ├── database/ SQL schema (init.sql) └── docker-compose.yml
Code conventions
- Nasqueron conventions
- Single quotes for strings
- camelCase for variables and functions
- Vue 3 Composition API (
<script setup>) for components - Tailwind CSS utility classes for styling (no scoped styles)
- Raw pg queries in models (no ORM)
How to add a new feature
Adding a backend resource
- Add table to
database/init.sql - Create
models/resourceModel.js— raw pg queries - Create
controllers/resourceController.js— req/res handlers - Create
routes/resourceRoutes.js— Express router with auth where needed - Register routes in
app.js - Add tests in
__tests__/controllers/resourceController.test.js
Adding a frontend component
- Create
.vuefile insrc/components/using<script setup> - Use Tailwind classes and existing utilities from
@/utils/status - Import composables from
@/composables/for data - Add tests in
src/components/__tests__/
Axios integration
The API client is configured in frontend/src/plugins/api.js. It uses Axios with a base URL from VITE_API_URL and automatically attaches JWT tokens from localStorage via a request interceptor.
Composables (useServices, useIncidents, etc.) wrap the API calls and return reactive refs:
const { services, loading, error, fetchServices } = useServices()
Testing
# Backend (Jest) cd backend && npm test
# Frontend (Vitest) cd frontend && npm run test:unit
Git workflow
See docs/workflow.md in the repository for the arc diff workflow.
