Skip to main content

​
Prerequisites

Before setting up the project, ensure you have the following installed:

.NET SDK

.NET 6.0 SDK or later

Node.js

Node.js 14.x or later with npm

SQL Server

SQL Server LocalDB or SQL Server Express

Code Editor

Visual Studio 2022, VS Code, or Rider

​
Project Structure

The project is organized into two main directories: 
workspace/source/
├── API/Locker/Locker.API/     # .NET Core Web API
└── UI/locker/                  # Angular 14 Application

​
Backend Setup (API)

​
1. Navigate to the API Directory

cd ~/workspace/source/API/Locker/Locker.API

​
2. Restore NuGet Packages

dotnet restore
This will install the following packages:
  • Microsoft.EntityFrameworkCore (6.0.8)
  • Microsoft.EntityFrameworkCore.SqlServer (6.0.8)
  • Microsoft.EntityFrameworkCore.Tools (6.0.8)
  • Swashbuckle.AspNetCore (6.2.3)

​
3. Configure Database Connection

The default connection string is configured in appsettings.json:
appsettings.json
{
  "ConnectionStrings": {
    "LockersDbConnectionString": "server=(LocalDB)\\MSSQLLocalDB;database=LockerDb;Trusted_Connection=true"
  }
}
If you’re using a different SQL Server instance, update the connection string accordingly. For SQL Server Express, use: server=.\\SQLEXPRESS;database=LockerDb;Trusted_Connection=true

​
4. Apply Database Migrations

Create or update the database schema using Entity Framework migrations: 
dotnet ef database update
This will apply the following migrations in order:
  1. 20220816105919_initial - Creates initial Lockers table
  2. 20220817035755_updateModels - Adds LockerNo and Size fields
  3. 20220817035954_addEmployeeModel - Adds Employees table
  4. 20221001042152_updateLockerModel - Sets LockerNo as primary key
The database will be created automatically if it doesn’t exist.

​
5. Run the API

Start the backend API server: 
dotnet run
The API will start on:
  • HTTPS: https://localhost:7281
  • HTTP: http://localhost:5281
  • Swagger UI: https://localhost:7281/swagger
Verify the API is running by navigating to the Swagger UI in your browser.

​
Alternative: Visual Studio

If using Visual Studio 2022:
  1. Open Locker.API.sln
  2. Press F5 or click “Run”
  3. The API will launch with Swagger UI

​
Frontend Setup (UI)

​
1. Navigate to the UI Directory

cd ~/workspace/source/UI/locker

​
2. Install npm Dependencies

npm install
This will install Angular 14 and all required dependencies:
  • @angular/core (^14.0.0)
  • @angular/common (^14.0.0)
  • @angular/forms (^14.0.0)
  • @angular/router (^14.0.0)
  • rxjs (~7.5.0)

​
3. Configure API Endpoint

The Angular service is configured to connect to the API at:
lockers.service.ts
export class LockersService {
  baseUrl = 'https://localhost:7281/api/lockers';
  // ...
}
Ensure this URL matches your API configuration. If you changed the API port, update this value accordingly.

​
4. Run the Angular Application

Start the development server: 
npm start
Or using Angular CLI directly: 
ng serve
The application will be available at:
  • Local: http://localhost:4200
The Angular app will automatically open in your browser at http://localhost:4200

​
Running Both Services

To run the full application, you need both the backend API and frontend UI running simultaneously.

​
Option 1: Two Terminal Windows

Terminal 1 - Backend: 
cd ~/workspace/source/API/Locker/Locker.API
dotnet run
Terminal 2 - Frontend: 
cd ~/workspace/source/UI/locker
npm start

​
Option 2: Using VS Code

  1. Open the workspace root in VS Code
  2. Use the integrated terminal to run both commands
  3. Split the terminal to view both outputs

​
Verifying the Setup

​
1. Test the Backend API

Open your browser and navigate to: 
https://localhost:7281/swagger
You should see the Swagger UI with the following endpoints:
  • GET /api/lockers - Get all lockers
  • GET /api/lockers/{lockerNo} - Get a specific locker
  • POST /api/lockers - Create a new locker
  • PUT /api/lockers/{lockerNo} - Update a locker
  • DELETE /api/lockers/{lockerNo} - Delete a locker

​
2. Test the Frontend

Navigate to: 
http://localhost:4200
You should see the Locker Management UI.

​
3. Test End-to-End Communication

  1. Open the Angular app at http://localhost:4200
  2. Try creating a new locker
  3. Verify the data appears in the list
If successful, the CORS configuration is working correctly.

​
Common Issues and Solutions

Problem: Unable to connect to SQL Server LocalDBSolution:
  • Verify SQL Server LocalDB is installed: sqllocaldb info
  • Start LocalDB: sqllocaldb start MSSQLLocalDB
  • Check connection string in appsettings.json
Problem: Browser shows CORS policy error when calling APISolution:
  • Ensure the API is running before starting the Angular app
  • Verify CORS policy in Program.cs includes AllowAnyOrigin()
  • Check that app.UseCors("default") is called in the middleware pipeline
Problem: Port 7281 or 4200 is already in useSolution:
  • For API: Edit launchSettings.json and change the applicationUrl ports
  • For Angular: Run ng serve --port 4300 to use a different port
  • Update the API URL in lockers.service.ts if you change the API port
Problem: dotnet ef database update failsSolution:
  • Ensure EF Core tools are installed: dotnet tool install --global dotnet-ef
  • Check that SQL Server is running
  • Verify the connection string is correct
  • Try creating the database manually first
Problem: npm install fails or shows vulnerabilitiesSolution:
  • Clear npm cache: npm cache clean --force
  • Delete node_modules and package-lock.json
  • Run npm install again
  • For vulnerabilities: npm audit fix

​
Development Workflow

Once both services are running:
  1. Make Backend Changes:
    • Edit C# files in API/Locker/Locker.API/
    • The API will automatically reload (hot reload in .NET 6)
    • Refresh Swagger UI to see changes
  2. Make Frontend Changes:
    • Edit TypeScript files in UI/locker/src/
    • Angular CLI will automatically recompile
    • Browser will auto-refresh
  3. Database Changes:
    • Modify models in Models/LockerInfo.cs
    • Create migration: dotnet ef migrations add MigrationName
    • Apply migration: dotnet ef database update

​
Next Steps

Architecture

Learn about the system architecture

Database

Explore the database schema

Build docs developers (and LLMs) love

Get started for freeTalk to us