Yii2 REST API + Angular 4 Boilerplate

This is a boilerplate project for future use. The project consists of REST API developed by Yii2 and backend/frontend developed by Angular2 with Core UI.

The project involves:

API
- Yii2 REST API, Yii2 RBAC, JWT (JSON Web Token), SSE (Server Send Event)
Backend: Staff/Administrator dashboard to manage staffs, users and settings
- Angular 4, CoreUI Bootstrap Template, JWT (JSON Web Token), Moment.js, Sweet Alert, Underscore.js
Frontend: User website to support user registration, login and account management
- Angular 4, CoreUI Bootstrap Template, JWT (JSON Web Token), Moment.js, Sweet Alert, SSE (Server Send Event)

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
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.
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.

Usage

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

To run the application, create new database.

host: localhost
db: boilerplate
username: root
password: root

Open the console and execute following commands.

$ git clone https://github.com/chrisleekr/yii2-angular2-boilerplate.git
$ cd yii2-angular2-boilerplate 
$ cd api
$ composer install
$ ./yii migrate --migrationPath=@yii/rbac/migrations
$ ./yii migrate/up

Note that if you have different database connection information, you will need to update API db.php before you running ./yii migrate/up

Open ~/yii2-angular2-boilerplate/api/config/db.php
Update db config as new database connection credentials

The API is running under LAMP environment. Setup API as following configuration.

document root: ~/yii2-angular2-boilerplate/api/web
host: api.boilerplate.local

Note that you will need to update /etc/hosts if required.

127.0.0.1       api.boilerplate.local

Once setup api, then run npm to start backend

$ cd backend
$ npm install
$ npm start

And open new console and start frontend

$ cd frontend
$ npm install
$ npm start

If you get an error message like below, then you need to upgrade Angular CLI to a new version.

You have to be inside an angular-cli project in order to use the serve command.

$ sudo npm uninstall -g @angular/cli
$ sudo npm cache clean
$ sudo npm install -g @angular/cli@latest

And wait for it is up and running. Once npm is finished compiling, then open the browser.

REST API: http://api.boilerplate.local/debug
Backend: http://localhost:4200
- Administrator username: admin, password: 123456
- Staff username: staff, password: 123456
Frontend: http://localhost:4201
- Username: user, password 123456

Note that if you change API address, then you will need to update frontend global configuration for pointing new API address.

Open following files
- ~/yii2-angular2-boilerplate/backend/src/app/model/global.service.ts and
- ~/yii2-angular2-boilerplate/frontend/src/app/model/global.service.ts
Update apiHost to new backend/frontend address
```
this.apiHost = 'http://new.address.local/v1';
```
Make sure you append /v1 after the API address.