From e80fdce1c8574a1864a546d6f834b67d0179577d Mon Sep 17 00:00:00 2001 From: Matt Beaudoin Date: Sat, 16 May 2026 18:47:31 -0700 Subject: [PATCH] update README, add build script for NoMock --- .env.example | 5 --- README.md | 53 ++++++++++++++++++++++++++++--- package.json | 1 + src/routes/Apps/App.tsx | 2 +- src/routes/Recipes/RecipeForm.tsx | 2 +- src/routes/Recipes/Recipes.scss | 4 +-- src/routes/Recipes/Recipes.tsx | 2 +- src/routes/Servers/Server.tsx | 2 +- src/services/api.ts | 2 +- src/services/mockApi.ts | 2 +- 10 files changed, 58 insertions(+), 17 deletions(-) delete mode 100644 .env.example diff --git a/.env.example b/.env.example deleted file mode 100644 index f21daf3..0000000 --- a/.env.example +++ /dev/null @@ -1,5 +0,0 @@ -# API base URL for the backend that wraps the abra CLI -VITE_API_URL=http://localhost:3000/api - -# Set to 'true' to use mock data -VITE_MOCK_AUTH=true \ No newline at end of file diff --git a/README.md b/README.md index 1978622..de431f2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,52 @@ -# Coop Cloud Front +# Coop Cloud Front -This is the frontend of a web wrapper for Coop Clouds abra CLI, letting users set up and manage VPSs and docker images through a web UI. +Frontend for Coop Cloud — a web UI wrapper around the `abra` CLI for +managing VPSs, containers and application deployments. -## Still a work in progess! +This repository contains a Vite + React + TypeScript app styled +with SCSS. -## This is built with react, typescript, scss, and vite \ No newline at end of file +## Quick start + +- Install dependencies (pnpm is recommended): + +pnpm install +pnpm dev + +``` + +The app uses Vite; start the dev server with `pnpm dev`. + +## Environment + +- The app reads runtime flags from Vite env variables. The default build uses mocked api data. +-To deploy on a real API without mocking, run: +pnpm start:prod + +Modify `.env` file at the project root if you need to override values for +development (see Vite docs for env var conventions). + +## Scripts + +- `pnpm dev` — start dev server +- `pnpm build` — run TypeScript and build production assets +- `pnpm preview` — preview production build locally +- `pnpm lint` — run ESLint +- `pnpm lint:scss` — run Stylelint +- `pnpm format` — format with Prettier + +## Notes about local development + +- The repo contains mock JSON and a `mockApi` service to develop UI without + a backend. Toggle mock mode with `VITE_MOCK_AUTH=true`. +- Routes are client-side using `react-router-dom`. + +## Next steps / suggested work items + +- Add form validation and better UX for `RecipeForm`. +- Improve accessibility. +- Add unit tests. +- Improve responsive layouts and card grid behaviour on narrow screens. +- Add deployment docs and production environment variables. + +--- \ No newline at end of file diff --git a/package.json b/package.json index 242d961..8a6d0ec 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "start": "vite", "dev": "vite", + "start:prod": "VITE_MOCK_AUTH=false pnpm start", "build": "tsc && vite build", "preview": "vite preview", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", diff --git a/src/routes/Apps/App.tsx b/src/routes/Apps/App.tsx index c67cbf8..424df52 100644 --- a/src/routes/Apps/App.tsx +++ b/src/routes/Apps/App.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { useParams, useNavigate, Link } from 'react-router-dom'; +import { Link, useNavigate, useParams } from 'react-router-dom'; import { Header } from '../../components/Header/Header'; import { Terminal } from '../../components/Terminal/Terminal'; import { apiService } from '../../services/api'; diff --git a/src/routes/Recipes/RecipeForm.tsx b/src/routes/Recipes/RecipeForm.tsx index 0fa8f7e..61be1ab 100644 --- a/src/routes/Recipes/RecipeForm.tsx +++ b/src/routes/Recipes/RecipeForm.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useEffect, useState } from "react"; import { apiService } from '../../services/api'; import type { AbraServer } from '../../types'; import './RecipeForm.scss'; diff --git a/src/routes/Recipes/Recipes.scss b/src/routes/Recipes/Recipes.scss index efefc15..bda2038 100644 --- a/src/routes/Recipes/Recipes.scss +++ b/src/routes/Recipes/Recipes.scss @@ -11,7 +11,7 @@ @extend .page-content; } -// Servers grid +// Recipes grid .recipes-grid { display: grid; justify-content: stretch; @@ -24,7 +24,7 @@ } } -// Server card +// Recipe card .recipe-card { @include card; @include card-dimensions(320px, 180px); diff --git a/src/routes/Recipes/Recipes.tsx b/src/routes/Recipes/Recipes.tsx index 27e1416..f19330a 100644 --- a/src/routes/Recipes/Recipes.tsx +++ b/src/routes/Recipes/Recipes.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Header } from '../../components/Header/Header'; import { apiService } from '../../services/api'; -import type { AbraApp, AppWithServer, AbraRecipe } from '../../types'; +import type { AbraApp, AbraRecipe, AppWithServer } from '../../types'; import RecipeForm from './RecipeForm.tsx' import './Recipes.scss'; diff --git a/src/routes/Servers/Server.tsx b/src/routes/Servers/Server.tsx index f7c06a8..952822f 100644 --- a/src/routes/Servers/Server.tsx +++ b/src/routes/Servers/Server.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { useParams, useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { Header } from '../../components/Header/Header'; import { Terminal } from '../../components/Terminal/Terminal'; import { apiService } from '../../services/api'; diff --git a/src/services/api.ts b/src/services/api.ts index 2f55c2d..90632f4 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -1,4 +1,4 @@ -import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types'; +import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types'; // Log entry type export type LogEntry = { diff --git a/src/services/mockApi.ts b/src/services/mockApi.ts index 71b776b..09a5cfb 100644 --- a/src/services/mockApi.ts +++ b/src/services/mockApi.ts @@ -1,4 +1,4 @@ -import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types'; +import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types'; import appsData from './mock-apps.json'; import serversData from './mock-servers.json'; import logsData from './mock-logs.json'; -- 2.49.0