/yii2-angular4-boilerplate

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

Primary LanguageCSS

Yii2 REST API + Angular 4 Boilerplate

Build Status

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.

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

Frontend - Homepage Frontend - Sample Page Frontend - Server Send Event Sample Page Frontend - Registration Frontend - Registration Completion API - Email content for registration Frontend - Account Confirmation Frontend - Login Frontend - Password Reset Request Frontend - Password Reset Request Completion API - Email content for resetting password Frontend - Reset Password Form Frontend - Password Updated Frontend - Account Page Frontend - Account Edit Page Backend - Login Backend - Dashboard Backend - Staff Management Backend - Staff Management Backend - Staff Management Backend - User Management Backend - User Management Backend - User Management Backend - Setting Backend - Setting

Thanks to

@ihormartyniuk