{"id":14966601,"url":"https://github.com/chrisleekr/yii2-angular-boilerplate","last_synced_at":"2025-04-06T07:12:46.830Z","repository":{"id":37550040,"uuid":"84725429","full_name":"chrisleekr/yii2-angular-boilerplate","owner":"chrisleekr","description":"Yii2 REST API + Angular 12 Boilerplate (Frontend/Backend)","archived":false,"fork":false,"pushed_at":"2024-07-12T23:55:40.000Z","size":21480,"stargazers_count":226,"open_issues_count":45,"forks_count":101,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-03-30T05:08:29.893Z","etag":null,"topics":["angular-universal","angular10","backend","boilerplate","bootstrap4","dashboard","frontend","jwt","karma-jasmine","momentjs","protractor-e2e-test","registration","rest-api","server-side-rendering","staff-management","sweetalert","yii2","yii2-rbac"],"latest_commit_sha":null,"homepage":"https://yam-boilerplate.chrislee.kr/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisleekr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-12T12:55:31.000Z","updated_at":"2025-01-27T09:01:07.000Z","dependencies_parsed_at":"2024-09-14T02:54:46.415Z","dependency_job_id":null,"html_url":"https://github.com/chrisleekr/yii2-angular-boilerplate","commit_stats":{"total_commits":73,"total_committers":5,"mean_commits":14.6,"dds":0.4931506849315068,"last_synced_commit":"fa6a80ad5082601c04088b0a7b610c69704770c6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisleekr%2Fyii2-angular-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisleekr%2Fyii2-angular-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisleekr%2Fyii2-angular-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisleekr%2Fyii2-angular-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisleekr","download_url":"https://codeload.github.com/chrisleekr/yii2-angular-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445671,"owners_count":20939958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-universal","angular10","backend","boilerplate","bootstrap4","dashboard","frontend","jwt","karma-jasmine","momentjs","protractor-e2e-test","registration","rest-api","server-side-rendering","staff-management","sweetalert","yii2","yii2-rbac"],"created_at":"2024-09-24T13:36:40.362Z","updated_at":"2025-04-06T07:12:46.809Z","avatar_url":"https://github.com/chrisleekr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yii2 REST API + Angular 12 Boilerplate\n\n[![Build](https://github.com/chrisleekr/yii2-angular-boilerplate/workflows/.github/workflows/main.yml/badge.svg)](https://github.com/chrisleekr/yii2-angular-boilerplate/actions?query=workflow%3Amain)\n\nThis is a boilerplate project for future use. The project consists of REST API developed by Yii2 and backend/frontend\ndeveloped by Angular 12 with Bootstrap 4.\n\nThe project involves:\n\n- API\n  - Yii2 REST API, Yii2 RBAC, JWT (JSON Web Token), Memcached, _Basic Unit \u0026 Functional Test using Codeception_\n- Backend: Staff/Administrator dashboard to manage staffs, users and settings\n  - Angular 12, Bootstrap 4, JWT (JSON Web Token), _Basic Unit test using Karma+Jasmine_, Moment.js, Sweet Alert,\n    Underscore.js\n- Frontend: User website to support user registration, login and account management\n  - Angular 12, Bootstrap 4, JWT (JSON Web Token), _Basic Unit using Karma+Jasmine, Basic E2E test using\n    Protractor+Jasmine_, Moment.js, Sweet Alert\n\n## Demo\n\n| Service  | Endpoint                                                                                     |\n| -------- | -------------------------------------------------------------------------------------------- |\n| Frontend | [https://yam-boilerplate.chrislee.kr/frontend](https://yam-boilerplate.chrislee.kr/frontend) |\n| Backend  | [https://yam-boilerplate.chrislee.kr/backend](https://yam-boilerplate.chrislee.kr/backend)   |\n| API      | [https://yam-boilerplate.chrislee.kr/api](https://yam-boilerplate.chrislee.kr/api/ping)      |\n\n![Demo](https://user-images.githubusercontent.com/5715919/97081825-b4b6b680-1650-11eb-81c3-fe49b84e787e.gif)\n\n## Architecture Diagram\n\n![Architecture Diagram](https://user-images.githubusercontent.com/5715919/97081827-be401e80-1650-11eb-96ed-c192c842e530.png)\n\n## Features\n\n- API\n  - User Controller\n    - GET/POST/PUT/DELETE /v1/user\n    - POST /v1/user/login\n    - POST /v1/user/signup\n    - POST /v1/user/confirm\n    - POST /v1/user/password-reset-request\n    - POST /v1/user/password-reset-token-verification\n    - POST /v1/user/password-reset\n    - GET/POST /v1/me\n    - GET /v1/page/sse\n  - Staff Controller\n    - GET/POST/PUT/DELETE /v1/staff\n    - POST /v1/staff/login\n    - GET /v1/staff/get-permissions\n  - Setting Controller\n    - GET/POST/PUT/DELETE /v1/setting\n    - GET /v1/setting/public\n- Backend\n  - Staff Login/Logout\n    - API generates JWT(JSON Web Token) upon successful login.\n  - Dashboard\n    - Currently, dashboard is empty page.\n  - Staff Management\n    - Admin or staff who has a permission 'manageStaffs' can create/update/delete staff information.\n    - Staff role can configure permissions for managing staff, user and setting.\n  - User Management\n    - Admin or staff who has a permission 'manageUsers' can create/update/delete user information.\n  - Setting Management\n    - Admin or staff who has a permission 'manageSettings' can create/update/delete setting information.\n- Frontend\n  - User Login/Logout\n    - User can login with username and password.\n    - API generates JWT(JSON Web Token) upon successful login.\n    - Frontend will store JWT in local storage and use for all requests.\n    - API will validate submitted access token prior to process any request.\n  - User Registration\n    - User can register new account.\n    - API will submit verification email to the email. Note that current API system will use swift mailer component with\n      file transport. You can check the email content in debug module.\n  - User Email Confirmation\n    - Frontend will confirm the auth key and update account status if auth key is valid.\n  - User Reset Password\n    - User can reset their password.\n    - API will send password reset email to the requested email.\n    - Frontend will display the password reset page if password reset token is valid.\n  - User Account\n    - User can change email address. If change email address, the API will send confirmation email to verify email\n      address.\n    - User can change password.\n\n## How to start\n\nCurrently, the project is not ready for production use. Following steps are suitable for configuring development\nenvironment.\n\nTo run the application, you will need `docker` and `docker-compose` installed.\n\nOpen the console and execute following commands.\n\n```\n$ git clone https://github.com/chrisleekr/yii2-angular-boilerplate.git\n$ cd yii2-angular-boilerplate\n$ docker-compose up -d\n```\n\nWith `docker-compose`, following containers will be configured. Please make sure port 80, 443 are available.\n\n1. MySQL database will be configured by API migration.\n2. Memcached will be configured.\n3. REST API - Yii 2\n   - Database migration will be executed which are located in `/api/migrations`.\n   - PHP-FPM and nginx will be running.\n4. Backend - Angular\n   - By default, development mode will be running with nginx.\n5. Frontend - Angular\n   - By default, development mode will be running with nginx.\n\nOnce all containers are finished compiling, then open the browser.\n\n- **REST API - Yii 2**: [http://localhost/api/debug](http://localhost/api/debug)\n\n  - To make sure API is working, go to [http://localhost/api/ping](http://localhost/api/ping). You must see `pong`\n    message.\n\n  - To access docker container, use following command:\n\n    ```bash\n    docker exec -it api /bin/sh\n    ```\n\n  - To run code sniffer, use following command:\n\n    ```bash\n    docker exec api composer run sniff\n    ```\n\n  - To run unit test, use following command:\n\n    ```bash\n    docker exec api composer run test:unit\n    ```\n\n- **Backend - Angular**: [http://localhost/backend](http://localhost/backend)\n\n  - Administrator username: `admin`, password: `123456`\n\n  - Staff username: `staff`, password: `123456`\n\n  - To see compile process, use following command:\n\n    ```bash\n    docker logs backend --follow\n    ```\n\n  - To access docker container, use following command:\n\n    ```bash\n    docker exec -it backend /bin/sh\n    ```\n\n  - Note that the **live reloading feature has been disabled** due to restriction.\n\n  - Please open **Developer Tool** to prevent caching. The changes will be checked every 1s. Please refer\n    `/backend/image-files/usr/local/bin/docker-entrypoint-dev.sh`.\n\n  - To run unit test, use following command:\n\n    ```bash\n    $ cd frontend\n    $ npm run test\n    ```\n\n- **Frontend - Angular**: [http://localhost/frontend](http://localhost/frontend)\n\n  - Username: `user`, password `123456`\n\n  - To see compile process, use following command:\n\n    ```bash\n    $ docker logs frontend --follow\n    ```\n\n  - To access docker container, use following command:\n\n    ```bash\n    $ docker exec -it frontend /bin/sh\n    ```\n\n  - Note that the **live reloading feature has been disabled** due to restriction.\n\n  - Please open **Developer Tool** to prevent caching. The changes will be checked every 1s. Please refer\n    `/frontend/image-files/usr/local/bin/docker-entrypoint-dev.sh`.\n\n  - To run unit test, use following command:\n\n    ```bash\n    $ cd frontend\n    $ npm run test\n    ```\n\n  - To run E2E test, use following command:\n\n    ```bash\n    $ cd frontend\n    $ npm run e2e\n    ```\n\n## Files \u0026 Folders structures\n\n- **docker-compose.yml**: contains docker container specifications\n- **api**: Yii2\n  - `image-files`: contains nginx config, php.ini, composer and `docker-entrypoint.sh`\n- **backend**: Angular Backend\n  - `image-files`: contains nginx config, `docker-entrypoint-dev.sh` and `docker-entrypoint.sh`\n- **frontend**: Angular Frontend\n  - `image-files`: contains nginx config, `docker-entrypoint-dev.sh` and `docker-entrypoint.sh`\n- **nginx**: Load Balancer\n  - `image-files`: contains nginx config\n\n## Setup for production\n\nTo run production mode, update `docker-compose.yml` by changing `target: build-stage` to `target: production-stage` for\nbackend and frontend.\n\n## Troubleshooting\n\n**I changed backend/frontend code, but I cannot see changes in the browser.**\n\nAs mentioned earlier, you have to open `Developer Tool` to prevent cache if you are using Chrome. Or clear browser cache\nand reload again.\n\n## TODO\n\n- [x] Enhance user management - send confirmation email\n- [x] Enhance user authorization with Yii2 RBAC (Role Based Access Control)\n- [x] Develop new customer management section\n- [x] Apply JWT(JSON Web Token) for user authentication\n- [x] Upgrade Angular to latest\n- [x] Dockerize application\n- [ ] Develop file uploader\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisleekr%2Fyii2-angular-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisleekr%2Fyii2-angular-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisleekr%2Fyii2-angular-boilerplate/lists"}