https://github.com/r3zafa/ngx-app-starter-kit
angular v18 boilerplate with dockerFile, docker-compose and devcontainer config
https://github.com/r3zafa/ngx-app-starter-kit
Last synced: 6 days ago
JSON representation
angular v18 boilerplate with dockerFile, docker-compose and devcontainer config
- Host: GitHub
- URL: https://github.com/r3zafa/ngx-app-starter-kit
- Owner: r3zafa
- Created: 2024-10-09T13:27:33.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-06-11T23:40:05.000Z (9 days ago)
- Last Synced: 2025-06-12T00:34:09.491Z (9 days ago)
- Language: TypeScript
- Homepage:
- Size: 932 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-app-starter-kit - A modern Angular 18+ starter kit with Docker, devcontainer, and Angular Material integration for rapid, scalable web app development. (Table of contents / Angular)
README
# ngx-app-starter-kit
A modern Angular 18 starter kit with Docker, devcontainer, and Angular Material integration for rapid, scalable web app development.
> **Note:** This template will be migrated to Angular 19 and 20 soon to ensure compatibility with the latest Angular features and improvements.
[](https://github.com/r3zafa/ngx-app-starter-kit)
## Features
- **Angular 18**
- **Dockerized Development**: Includes Docker and Docker Compose for consistent development environments.
- **Devcontainer Support**: Optimized for GitHub Codespaces and VS Code Remote Containers.
- **Angular Material**: Pre-configured with Material 3 (M3) theming.
- **Translation Support**: Integrated with `@ngx-translate` for multi-language support.
- **Theming**: Dynamic light and dark theme toggling.
- **Component-Based Architecture**: Modular and reusable components for scalable development.
- **Quick Start Scripts**: Predefined scripts for building, testing, and serving the application.
## Using This Starter Kit via `npx`
You can quickly scaffold a new project using this template with `npx`:
```sh
npx create-app my-new-app
cd my-new-app
npm install
```
Replace `my-new-app` with your desired project name.
## Project Structure
The project is organized as follows:
- **`src/`**: Contains the main application code.
- **`app/`**: Core application components and configuration.
- `app.component.*`: Root component files.
- `app.config.ts`: Application-wide configuration.
- `app.routes.ts`: Application routing configuration.
- **`components/`**: Reusable UI components.
- **`content/`**: Content display component.
- **`navbar/`**: Navigation bar component.
- **`theme-toggler/`**: Component for toggling between light and dark themes.
- **`translation-button/`**: Component for switching languages.
- **`shared/`**: Shared utilities, services, and types.
- **`helpers/`**: Helper functions (e.g., `http-loader-factory.helper.ts`).
- **`interfaces/`**: Shared TypeScript interfaces.
- **`providers/`**: Dependency injection providers (e.g., translation module provider).
- **`services/`**: Application services (e.g., theme and sidenav services).
- **`types/`**: Shared TypeScript types.
- **`styles/`**: Global and component-specific styles.
- `_animation.scss`: Animation styles.
- `_palettes.scss`: Color palette definitions.
- `m3-theme.scss`: Material 3 theme configuration.
- `styles.scss`: Global styles.
- **`configs/`**: Configuration files for TypeScript, Karma, and polyfills.
- **`public/`**: Public assets such as icons and translation files.
- **`i18n/`**: Translation files (e.g., `en.json`, `de.json`).
- **`docker/`**: Docker and Docker Compose configuration.
- **`bin/`**: Custom scripts (e.g., `create-app.cjs` for scaffolding new projects).
- **`.devcontainer/`**: Devcontainer configuration for VS Code Remote Containers.
## Demo Components
The project includes demo components such as `content`, `navbar`, `theme-toggler`, and `translation-button`. These components are provided as examples and can be replaced or customized to suit your application's needs.
---
For more details, see [Angular CLI Docs](https://angular.io/cli), [Angular Material](https://material.angular.io/), and the [ngx-app-starter-kit GitHub repo](https://github.com/r3zafa/ngx-app-starter-kit).