ShopApp (Angular frontend + Spring Boot backend)

This repository contains a full-stack sample e-commerce application:

• shopapp-angular/ — Angular frontend (client-side + server-side rendering files included)
• shopapp-backend/ — Spring Boot backend (Java, Maven)

This README explains how to set up, run, build and test both parts on a development machine (Windows with bash available).

Table of contents

• Project overview
• Directory layout
• Prerequisites
• Frontend (development, build, SSR)
• Backend (run, build, DB)
• Environment & configuration
• Uploads and static assets
• Tests
• Contributing

Project overview

ShopApp is a small e-commerce example app with an Angular SPA frontend and a Spring Boot REST backend. The frontend contains components, services, and server-side rendering (SSR) entry points. The backend provides APIs, data storage, and handles uploads.

Directory layout (top-level)

• shopapp-angular/ — Angular app source and configuration
• shopapp-backend/ — Spring Boot backend (Maven project)
• uploads/ — uploaded files used by the backend

See each subfolder for more detail.

Prerequisites

• Node.js (>= 16 recommended) and npm or yarn
• Angular CLI (optional for global dev tools)
• Java JDK 11+ (or the version required by the backend pom.xml)
• Maven (or use the included Maven wrapper mvnw/mvnw.cmd)

On Windows with bash (Git Bash / WSL), the commands below will work in a bash shell.

Frontend — shopapp-angular

1. Install dependencies

cd shopapp-angular
npm ci
# or: npm install

2. Development server (client-side)

cd shopapp-angular
npm run start
# Typically runs the dev server (check package.json scripts)

3. Server-Side Rendering (SSR) / Universal

This project contains server.ts and main.server.ts for SSR. To run SSR locally, build server bundle and run the server script.

Example (may vary depending on scripts in package.json):

cd shopapp-angular
npm run build:ssr   # build browser + server bundles
npm run serve:ssr   # start node server (server.ts)

4. Production build (static)

cd shopapp-angular
npm run build -- --configuration production
# outputs static files into the configured output path (check angular.json)

Notes

• Check angular.json, package.json, and server.ts to confirm available npm scripts and exact build targets.
• If you want to run the Angular app behind the backend or a proxy, configure the proxy settings or enable CORS on the backend.

Backend — shopapp-backend

1. Database

This project includes database.sql (top-level of shopapp-backend/) for schema and example data. Configure the datasource in src/main/resources/application.yml or the dev/ folder configuration.

2. Run locally using the Maven wrapper

cd shopapp-backend
./mvnw spring-boot:run
# On Windows (PowerShell / cmd) use mvnw.cmd; in bash ./mvnw works if executable

Or build a jar and run it:

cd shopapp-backend
./mvnw clean package -DskipTests
java -jar target/*.jar

3. Configuration

• Check src/main/resources/application.yml for DB connection, upload directory, logging, and other properties.
• There is a dev/ config folder for development overlays.

4. Uploads

Uploaded files are stored in the uploads/ folder at project root (used by the backend). Ensure the backend user has read/write permissions to that folder.

Environment & configuration

• Frontend environment files live under shopapp-angular/src/environments/ (e.g., environment.ts, environment.prod.ts). Update API base URLs and feature flags there.
• Backend configuration is in shopapp-backend/src/main/resources/application.yml and may use profiles (dev, prod).

Running full stack locally

1. Ensure DB is running and application.yml is configured to connect to it (or use an embedded DB if configured).
2. Start the backend:

cd shopapp-backend
./mvnw spring-boot:run

3. Start the frontend dev server (or SSR server) in another terminal:

cd shopapp-angular
npm run start

Adjust ports and CORS as needed. If the frontend is built for production, you can serve the static build from the backend or a CDN.

Tests

• Backend tests: run ./mvnw test in shopapp-backend/.
• Frontend tests: run npm test in shopapp-angular/ (verify script in package.json).

Contributing

1. Fork and create a branch for your feature or fix
2. Run and add tests where appropriate
3. Open a pull request with a clear description of changes

Troubleshooting

• If builds fail, check Node and Java versions match project expectations.
• Check application.yml and Angular environment files for correct API URLs and credentials.
• On Windows, if ./mvnw is not executable, use mvnw.cmd or run via installed mvn.

Useful files

• shopapp-angular/package.json — frontend npm scripts and dependencies
• shopapp-backend/pom.xml — backend dependencies and build
• shopapp-backend/database.sql — DB schema & sample data

License & contact

This project doesn't include a license file by default. Add one if you plan to publish.

If you want specific adjustments to the README (more detail in any section, added screenshots, or CI/CD instructions), tell me which sections to expand and I will update it.