Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.PHONY: dev dev-backend dev-frontend help

help:
@echo "MythAPI Development Commands"
@echo ""
@echo "Usage:"
@echo " make dev - Run both backend and frontend concurrently"
@echo " make dev-backend - Run only the backend API"
@echo " make dev-frontend - Run only the frontend"
@echo ""

dev-backend:
dotnet run --project src/MythApi.csproj

dev-frontend:
cd src/frontend && npm run dev

dev:
@echo "Starting backend and frontend..."
@echo "Backend will be available at http://localhost:5280"
@echo "Frontend will be available at http://localhost:3000"
@echo "Press Ctrl+C to stop both services"
@echo ""
@make -j2 dev-backend dev-frontend
73 changes: 73 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -488,6 +488,79 @@ app.UseSwaggerUI();
app.Run();
```

# Frontend

The project includes a Next.js frontend application for interacting with the MythAPI backend.

## Prerequisites

- **Node.js 18+** (https://nodejs.org/)
- **npm** (comes with Node.js)

## Setup Instructions

1. **Install Dependencies**

Navigate to the frontend directory and install the required packages:

```bash
cd src/frontend
npm install
```

2. **Run the Development Server**

Start the frontend development server:

```bash
npm run dev
```

The frontend will be available at **http://localhost:3000**

3. **Backend Connection**

The frontend expects the backend API to be running at **http://localhost:5280**.
Make sure the backend is running before using the frontend.

## Running Both Services

To run both the backend and frontend simultaneously during development, you have two options:

### Option 1: Two Terminal Sessions

Open two terminal windows:

**Terminal 1 - Backend:**
```bash
dotnet run --project src/MythApi.csproj
```

**Terminal 2 - Frontend:**
```bash
cd src/frontend
npm run dev
```

### Option 2: Using Make (Convenience Script)

If you have `make` installed, you can use the provided Makefile:

```bash
# Run both backend and frontend
make dev

# Or run them separately:
make dev-backend
make dev-frontend
```

## Accessing the Applications

- **Frontend:** http://localhost:3000
- **Backend API:** http://localhost:5280
- **Swagger Documentation:** http://localhost:5280/swagger

# Future work

- Improve Bicep scripts
Expand Down