amatis-core-frontend-v2

A reusable standard project structure and setup tool for Angular projects

Overview

amatis-core-frontend-v2 is a tool that allows you to create a standard folder structure for Angular projects. With this package, you don't have to repeatedly create the same folder structure when starting a new Angular project. It sets up your standard structure and all necessary dependencies with a single command.

Features

• ✅ Create standard Angular project structure
• ✅ Predefined folder and file structure
• ✅ Automatic installation of required Angular dependencies
• ✅ Bootstrap 5.3.2 integration
• ✅ Font Awesome and Google Fonts integration
• ✅ Centralized HTTP service for API requests
• ✅ Authentication and error handling interceptors

Installation

You need to follow two steps for installation:

# Step 1: Install the package
npm install amatis-core-frontend-v2

# Step 2: Run the setup command
npx amatis-core-frontend

Or with a single command:

npm install amatis-core-frontend-v2 && npx amatis-core-frontend

Note: Due to npm security policies, the file structure is not automatically created during package installation. Therefore, you need to manually run the npx amatis-core-frontend command.

Generated Project Structure

When the installation is complete, the following folder structure is created:

src/
├── app/
│   ├── core/
│   │   ├── http/
│   │   │   ├── interceptors/
│   │   │   │   ├── auth.interceptor.ts
│   │   │   │   └── http-error.interceptor.ts
│   │   │   ├── models/
│   │   │   │   └── api-response.model.ts
│   │   │   ├── api-config.service.ts
│   │   │   ├── http.service.ts
│   │   │   └── index.ts
│   │   └── services/
│   │       └── example.service.ts
│   ├── layout/
│   ├── main/
│   │   ├── components/
│   │   ├── constants/
│   │   ├── directives/
│   │   ├── pages/
│   │   ├── shared/
│   │   └── validators/
│   ├── pipes/
│   └── utils/
├── enums/
├── assets/
│   ├── css/
│   │   └── style.bundle.css
│   ├── i18n/
│   │   ├── en.json
│   │   └── nl.json
│   ├── js/
│   ├── media/
│   └── plugins/
└── environments/
    ├── environment.ts
    ├── environment.dev.ts
    ├── environment.test.ts
    ├── environment.staging.ts
    └── environment.prod.ts

Additionally, the following files are created:

• src/index.html: Basic HTML template (including Font Awesome and Google Fonts)
• src/main.ts: Main entry point
• src/main.server.ts: Server entry point
• src/styles.scss: Global style file
• package.json: Configuration file containing Angular 16 dependencies

Dependencies

The package automatically installs the following dependencies:

• Angular 16.0.0 core modules
• Bootstrap 5.3.2
• RxJS 7.8.0
• Other necessary Angular dependencies

HTTP Service Usage

This package includes a centralized HTTP service to standardize API requests:

// Inject the HttpService in your service
constructor(private httpService: HttpService) {}

// GET request
getAllUsers(): Observable<ApiResponse<User[]>> {
  return this.httpService.httpGet<ApiResponse<User[]>>('users');
}

// GET request with path params
getUserById(id: string): Observable<ApiResponse<User>> {
  return this.httpService.httpGet<ApiResponse<User>>('users', id);
}

// POST request
createUser(userData: User): Observable<ApiResponse<User>> {
  return this.httpService.httpPost<ApiResponse<User>>('users', userData);
}

// PUT request
updateUser(id: string, userData: User): Observable<ApiResponse<User>> {
  return this.httpService.httpPut<ApiResponse<User>>('users', userData, id);
}

// DELETE request
deleteUser(id: string): Observable<ApiResponse<void>> {
  return this.httpService.httpDelete<ApiResponse<void>>('users', id);
}

Usage

After the installation is complete, you can develop your project using standard Angular commands:

# Start the development server
ng serve

# Build the project
ng build

# Run tests
ng test

Supported Environments

The package includes configuration files for the following environments:

• Development
• Test
• Staging
• Production

License

MIT

Developer: Amatis