yii2-angular-boilerplate

KO | EN

gitlite — search

#hacktoberfest #typescript #golang #deep-learning #docker #macos #nodejs #java #windows #awesome #awesome-list #pytorch #mcp #open-source

yii2-angular-boilerplate

(★ 226)

Yii2 REST API + Angular 12 Boilerplate (Frontend/Backend)

File Explorer

Download Latest Version (.zip)

- - main.yml
- - extensions.json
  - settings.json
- - AppAsset.php
- - RbacController.php
- - console.php
  - db.php
  - params.php
  - test.php
  - test_db.php
  - web.php
- - SiteController.php
- - email-confirmation-html.php
  - password-reset-token-html.php
  - signup-confirmation-html.php
  - signup-success-html.php
- - m170125_081951_create_setting_table.php
  - m170125_082006_create_user_table.php
  - m170506_004517_init_rbac.php
- - LoginForm.php
  - PasswordResetForm.php
  - PasswordResetRequestForm.php
  - PasswordResetTokenVerificationForm.php
  - Setting.php
  - SignupConfirmForm.php
  - SignupForm.php
  - User.php
  - UserEditForm.php
  - UserSearch.php
- - .gitignore
- - _bootstrap.php
  - acceptance.suite.yml.example
  - functional.suite.yml
  - unit.suite.yml
- - .htaccess
  - favicon.ico
  - index-test.php
  - index.php
  - robots.txt
- .bowerrc
- .dockerignore
- .editorconfig
- .gitignore
- codeception.yml
- composer.json
- composer.lock
- Dockerfile
- LICENSE.md
- phpcs.xml.dist
- requirements.php
- yii
- yii.bat
- - settings.json
- - tsconfig.e2e.json
- - favicon.ico
  - index.html
  - main.ts
  - polyfills.ts
  - test.ts
  - tsconfig.app.json
  - tsconfig.spec.json
  - typings.d.ts
- .browserslistrc
- .dockerignore
- .editorconfig
- .eslintrc.json
- .gitignore
- .prettierignore
- .prettierrc.js
- angular.json
- Dockerfile
- karma.conf.js
- package-lock.json
- package.json
- README.md
- tsconfig.json
- tslint.json
- - settings.json
- - tsconfig.e2e.json
- - favicon.ico
  - index.html
  - main.ts
  - polyfills.ts
  - test.ts
  - tsconfig.app.json
  - tsconfig.spec.json
  - typings.d.ts
- .browserslistsrc
- .dockerignore
- .editorconfig
- .eslintrc.json
- .gitignore
- .prettierignore
- .prettierrc.js
- angular.json
- Dockerfile
- karma.conf.js
- package-lock.json
- package.json
- README.md
- tsconfig.json
- tslint.json
- - my.cnf
- robots.txt
.gitignore
.gitlab-ci.yml
docker-compose.actions.yml
docker-compose.yml
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Yii2 REST API + Angular 12 Boilerplate

[![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)

This is a boilerplate project for future use. The project consists of REST API developed by Yii2 and backend/frontend
developed by Angular 12 with Bootstrap 4.

The project involves:

- API
  - Yii2 REST API, Yii2 RBAC, JWT (JSON Web Token), Memcached, _Basic Unit & Functional Test using Codeception_
- Backend: Staff/Administrator dashboard to manage staffs, users and settings
  - Angular 12, Bootstrap 4, JWT (JSON Web Token), _Basic Unit test using Karma+Jasmine_, Moment.js, Sweet Alert,
    Underscore.js
- Frontend: User website to support user registration, login and account management
  - Angular 12, Bootstrap 4, JWT (JSON Web Token), _Basic Unit using Karma+Jasmine, Basic E2E test using
    Protractor+Jasmine_, Moment.js, Sweet Alert

## Demo

| Service  | Endpoint                                                                                     |
| -------- | -------------------------------------------------------------------------------------------- |
| Frontend | [https://yam-boilerplate.chrislee.kr/frontend](https://yam-boilerplate.chrislee.kr/frontend) |
| Backend  | [https://yam-boilerplate.chrislee.kr/backend](https://yam-boilerplate.chrislee.kr/backend)   |
| API      | [https://yam-boilerplate.chrislee.kr/api](https://yam-boilerplate.chrislee.kr/api/ping)      |

![Demo](https://user-images.githubusercontent.com/5715919/97081825-b4b6b680-1650-11eb-81c3-fe49b84e787e.gif)

## Architecture Diagram

![Architecture Diagram](https://user-images.githubusercontent.com/5715919/97081827-be401e80-1650-11eb-96ed-c192c842e530.png)

## Features

- API
  - User Controller
    - GET/POST/PUT/DELETE /v1/user
    - POST /v1/user/login
    - POST /v1/user/signup
    - POST /v1/user/confirm
    - POST /v1/user/password-reset-request
    - POST /v1/user/password-reset-token-verification
    - POST /v1/user/password-reset
    - GET/POST /v1/me
    - GET /v1/page/sse
  - Staff Controller
    - GET/POST/PUT/DELETE /v1/staff
    - POST /v1/staff/login
    - GET /v1/staff/get-permissions
  - Setting Controller
    - GET/POST/PUT/DELETE /v1/setting
    - GET /v1/setting/public
- Backend
  - Staff Login/Logout
    - API generates JWT(JSON Web Token) upon successful login.
  - Dashboard
    - Currently, dashboard is empty page.
  - Staff Management
    - Admin or staff who has a permission 'manageStaffs' can create/update/delete staff information.
    - Staff role can configure permissions for managing staff, user and setting.
  - User Management
    - Admin or staff who has a permission 'manageUsers' can create/update/delete user information.
  - Setting Management
    - Admin or staff who has a permission 'manageSettings' can create/update/delete setting information.
- Frontend
  - User Login/Logout
    - User can login with username and password.
    - API generates JWT(JSON Web Token) upon successful login.
    - Frontend will store JWT in local storage and use for all requests.
    - API will validate submitted access token prior to process any request.
  - User Registration
    - User can register new account.
    - API will submit verification email to the email. Note that current API system will use swift mailer component with
      file transport. You can check the email content in debug module.
  - User Email Confirmation
    - Frontend will confirm the auth key and update account status if auth key is valid.
  - User Reset Password
    - User can reset their password.
    - API will send password reset email to the requested email.
    - Frontend will display the password reset page if password reset token is valid.
  - User Account
    - User can change email address. If change email address, the API will send confirmation email to verify email
      address.
    - User can change password.

## How to start

Currently, the project is not ready for production use. Following steps are suitable for configuring development
environment.

To run the application, you will need `docker` and `docker-compose` installed.

Open the console and execute following commands.

```
$ git clone https://github.com/chrisleekr/yii2-angular-boilerplate.git
$ cd yii2-angular-boilerplate
$ docker-compose up -d
```

With `docker-compose`, following containers will be configured. Please make sure port 80, 443 are available.

1. MySQL database will be configured by API migration.
2. Memcached will be configured.
3. REST API - Yii 2
   - Database migration will be executed which are located in `/api/migrations`.
   - PHP-FPM and nginx will be running.
4. Backend - Angular
   - By default, development mode will be running with nginx.
5. Frontend - Angular
   - By default, development mode will be running with nginx.

Once all containers are finished compiling, then open the browser.

- **REST API - Yii 2**: [http://localhost/api/debug](http://localhost/api/debug)

- To make sure API is working, go to [http://localhost/api/ping](http://localhost/api/ping). You must see `pong`
    message.

- To access docker container, use following command:

```bash
    docker exec -it api /bin/sh
    ```

- To run code sniffer, use following command:

```bash
    docker exec api composer run sniff
    ```

- To run unit test, use following command:

```bash
    docker exec api composer run test:unit
    ```

- **Backend - Angular**: [http://localhost/backend](http://localhost/backend)

- Administrator username: `admin`, password: `123456`

- Staff username: `staff`, password: `123456`

- To see compile process, use following command:

```bash
    docker logs backend --follow
    ```

- To access docker container, use following command:

```bash
    docker exec -it backend /bin/sh
    ```

- Note that the **live reloading feature has been disabled** due to restriction.

- Please open **Developer Tool** to prevent caching. The changes will be checked every 1s. Please refer
    `/backend/image-files/usr/local/bin/docker-entrypoint-dev.sh`.

- To run unit test, use following command:

```bash
    $ cd frontend
    $ npm run test
    ```

- **Frontend - Angular**: [http://localhost/frontend](http://localhost/frontend)

- Username: `user`, password `123456`

- To see compile process, use following command:

```bash
    $ docker logs frontend --follow
    ```

- To access docker container, use following command:

```bash
    $ docker exec -it frontend /bin/sh
    ```

- Note that the **live reloading feature has been disabled** due to restriction.

- Please open **Developer Tool** to prevent caching. The changes will be checked every 1s. Please refer
    `/frontend/image-files/usr/local/bin/docker-entrypoint-dev.sh`.

- To run unit test, use following command:

```bash
    $ cd frontend
    $ npm run test
    ```

- To run E2E test, use following command:

```bash
    $ cd frontend
    $ npm run e2e
    ```

## Files & Folders structures

- **docker-compose.yml**: contains docker container specifications
- **api**: Yii2
  - `image-files`: contains nginx config, php.ini, composer and `docker-entrypoint.sh`
- **backend**: Angular Backend
  - `image-files`: contains nginx config, `docker-entrypoint-dev.sh` and `docker-entrypoint.sh`
- **frontend**: Angular Frontend
  - `image-files`: contains nginx config, `docker-entrypoint-dev.sh` and `docker-entrypoint.sh`
- **nginx**: Load Balancer
  - `image-files`: contains nginx config

## Setup for production

To run production mode, update `docker-compose.yml` by changing `target: build-stage` to `target: production-stage` for
backend and frontend.

## Troubleshooting

**I changed backend/frontend code, but I cannot see changes in the browser.**

As mentioned earlier, you have to open `Developer Tool` to prevent cache if you are using Chrome. Or clear browser cache
and reload again.

## TODO

- [x] Enhance user management - send confirmation email
- [x] Enhance user authorization with Yii2 RBAC (Role Based Access Control)
- [x] Develop new customer management section
- [x] Apply JWT(JSON Web Token) for user authentication
- [x] Upgrade Angular to latest
- [x] Dockerize application
- [ ] Develop file uploader

yii2-angular-boilerplate

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

yii2-angular-boilerplate

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README