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

1. Open ~/yii2-angular2-boilerplate/api/config/db.php
2. 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.

1. Open following files
   • ~/yii2-angular2-boilerplate/backend/src/app/model/global.service.ts and
   • ~/yii2-angular2-boilerplate/frontend/src/app/model/global.service.ts
2. Update apiHost to new backend/frontend address

   this.apiHost = 'http://new.address.local/v1';
   

   Make sure you append /v1 after the API address.

TODO

• Enhance user management - send confirmation email
• Enhance user authorization with Yii2 RBAC (Role Based Access Control)
• Develop new customer management section
• Apply JWT(JSON Web Token) for user authentication
• Upgrade Angular 2 to Angular 4
• Develop file uploader
• Develop more test code
• Dockerize application

Screenshots

Thanks to

@ihormartyniuk