chrisleekr/yii2-angular-boilerplate

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

Yii2 REST API + Angular 12 Boilerplate

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
Backend	https://yam-boilerplate.chrislee.kr/backend
API	https://yam-boilerplate.chrislee.kr/api

Architecture Diagram

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

  • To make sure API is working, go to http://localhost/api/ping. You must see pong message.

  • To access docker container, use following command:

    docker exec -it api /bin/sh

  • To run code sniffer, use following command:

    docker exec api composer run sniff

  • To run unit test, use following command:

    docker exec api composer run test:unit

• Backend - Angular: http://localhost/backend

  • Administrator username: admin, password: 123456

  • Staff username: staff, password: 123456

  • To see compile process, use following command:

    docker logs backend --follow

  • To access docker container, use following command:

    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:

    $ cd frontend
    $ npm run test

• Frontend - Angular: http://localhost/frontend

  • Username: user, password 123456

  • To see compile process, use following command:

    $ docker logs frontend --follow

  • To access docker container, use following command:

    $ 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:

    $ cd frontend
    $ npm run test

  • To run E2E test, use following command:

    $ 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

• 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 to latest
• Dockerize application
• Develop file uploader

yii2-angular-boilerplate's Issues

Problem on starting frontend

When I run the npm start. Shows me this. I don't know how to fix it!
Thanks!
The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
at Object. (/Users/mateoalpuy/yii2-angular2-boilerplate/frontend/node_modules/@ngtools/webpack/src/index.js:14:11)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/mateoalpuy/yii2-angular2-boilerplate/frontend/node_modules/@angular/cli/tasks/eject.js:10:19)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)

Login error

Hey,

This project is really great, I'm appreciate you put it online.

1. I fund a small error on API.
   Path: \api\vendor\bower-asset did't exist.
   I had to change folder name bower-asset --> bower and now it working correct.

2. When i try to login or register for any account on Frontend or Backend, appears the communique "[object Object]" :

This is my project: https://wetransfer.com/downloads/8888e95e63e95420a5d03d40cbabb28c20171218113942/49b46cf6168a75df5e8adcc24f095aaf20171218113942/3232f3

I would be very grateful if you could help me fix it.

Thx Pawel

ERROR: Service 'frontend' failed to build: Error parsing reference:

I'm getting this error. Please help to resolve.

pageSizeLimit

In UserSearch model:
'pageSizeLimit' => [10, 50, 100]
[10, 50, 100] - wrong value and pageSizeLimit don't work at all, if I set per_page=0 ActiveDataProvider show ALL rows
From Yii2 manual:

$pageSizeLimit public property
The page size limits. The first array element stands for the minimal page size, and the second the maximal page size. If this is false, it means $pageSize should always return the value of $defaultPageSize.
public array|false $pageSizeLimit = [1, 50]

setup the app without docker

Can you provide a guide to set up the app without docker?

frontend and backend Dockerfile for production not working

frontend build success but not working, the logs:

/usr/local/bin/docker-entrypoint.sh: line 4: nginx: not found

backend build error:

Service 'backend' failed to build : The command '/bin/sh -c npm install' returned a non-zero code: 228

Server Send Events

Hi. I use your yii2-angular2-boilerplate rest API. I have problem with realization of SSE(Server Send Events) feature on backend side of project. I loged in angular2 app, the authorization is successfully, all urls are accessible, but when i try to do request for my SSE action have error - 415 (Unsupported Media Type). May you provide any example of using SSE in your project, please?
It is necessary for me!!!)))

Thanks a lot for any answer!

Getting No 'Access-Control-Allow-Origin' exception

Hey,

i really like what you are creating!

After installation and running npm start in backend directory i am not able to log in via http://localhost:4200/.

it throws:

Failed to load http://api.boilerplate.local/v1/setting/public: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Do you have a hint what it could be?
Maybe routing in the yii2 api?

Please Add PHPmyadmin

Please Add PHPmyadmin

API Bad Request

{"name":"Bad Request","message":"The system could not process your request. Please check and try again.","code":0,"status":400,"type":"yii\web\BadRequestHttpException"}

current php 7.2

i need tutorial video how this project working properly on localhost

@chrisleekr please advice us,

BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

In my angular 7 i have face error like this.after lot of R&D code side all are correct.while i replace old node_modules to current node_modules.its working fine.Really i cant find exact error.please help me as soon as possible

AuthHttp Not working in request

public login(username, password) {
let headers = new Headers();
headers.append('Content-Type', 'application/json; charset=UTF-8');

    return this._authHttp
        .post(
            this._globalService.apiHost + '/user/login',
            JSON.stringify({
                "LoginForm": {
                    "username": username,
                    "password": password
                }
            }),
            {headers: headers}
        )
        .map(response => response.json())
        .map((response) => {
            if (response.success) {
                localStorage.setItem('frontend-token', response.data.access_token);
                this.loggedIn = true;
            } else {
                localStorage.removeItem('frontend-token');
                this.loggedIn = false;
            }
            return response;
        })
        .catch(this.handleError);
}

In this code authhttp not working when i replace authhttp to http it's working fine
can you please tell what is the processor of angular-jwt ?

BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

Run App without docker

How to install app without docker setup?

is there any way to install app without setup docker. i want to install app with default xampp config.

Is possible to install without docker and nginx?using xampp and composer.

How to Open Yii2 Gii

How to Open Yii2 Gii

ERROR: Service 'api' failed to build:

I'm getting the below error, please help me to resolve this -

ERROR: Service 'api' failed to build: The command '/bin/sh -c curl -sS https://getcomposer.org/installer | php -- --filename=composer.phar --install-dir=/usr/local/bin && composer global require --optimize-autoloader "fxp/composer-asset-plugin:${VERSION_COMPOSER_ASSET_PLUGIN}" "hirak/prestissimo:${VERSION_PRESTISSIMO_PLUGIN}" && composer global dumpautoload --optimize && composer clear-cache' returned a non-zero code: 127

401 Unauthorized Error

I have uploaded the api on to my web server but when i send an get request to the api it gives me back 401 Unauthorized error. When i debug i can see the headers i sent from the frontend are missing in the api. This scenario works well without any issue in my local server with xampp. I have googled for a solution but none of them worked. I think this has to do something with the .htaccess file.

Error When `docker-compose up -d`

I tried this boilerplate for first time for learning how to use yii2.
Then I followed How to Start, until I met this error.

When I read, it has error at ./api/Dockerfile. Then I change some code to try if that works.

from this,

RUN chmod 700 \
    /usr/local/bin/docker-entrypoint.sh \
    /usr/local/bin/composer

# Install composer
RUN curl -sS https://getcomposer.org/installer | php -- \
    # FIXME: Composer 2.0.0 is not compatible with fxp/composer-asset-plugin for now. Set version until it is fixed.
    --version=1.10.16 \
    --filename=composer.phar \
    --install-dir=/usr/local/bin && \
    composer global require --optimize-autoloader \
    "fxp/composer-asset-plugin:${VERSION_COMPOSER_ASSET_PLUGIN}" \
    "hirak/prestissimo:${VERSION_PRESTISSIMO_PLUGIN}" && \
    composer global dumpautoload --optimize && \
    composer clear-cache

to this,

# Install composer from the official image
COPY --from=composer:1 /usr/bin/composer /usr/local/bin/composer

RUN chmod +x \
        /usr/local/bin/docker-entrypoint.sh \
        /usr/local/bin/composer && \
    cd ~ && \
    composer global require --optimize-autoloader \
        "fxp/composer-asset-plugin:${VERSION_COMPOSER_ASSET_PLUGIN}" \
        "hirak/prestissimo:${VERSION_PRESTISSIMO_PLUGIN}" && \
    composer global dumpautoload --optimize && \
    composer clear-cache

Then It works.

But something happened. In my docker, only mysql, nginx, and memcached are running.

in api container it show

standard_init_linux.go:228: exec user process caused: no such file or directory

in backend container it show

standard_init_linux.go:228: exec user process caused: no such file or directory

in frontend container it show

standard_init_linux.go:228: exec user process caused: no such file or directory

I dont know what happen. Anybody can explain me why and how to solve it?
Thank you so much.

btw, my OS is Windows 10 and I am using Docker Desktop for Windows.

How to use production mode on server ??

How to use production mode on server ??
And server name ??

And send demo link frontend & backend

Windows installer

It's possible have a fix for windows installation,

Error when running docker-compser up -d

I Get the following error after when i run docker-compose up -d command. I'm on windows.

Composer (version 1.6.5) successfully installed to: /usr/local/bin/composer.phar
Use it: php /usr/local/bin/composer.phar

': No such file or directory
Service 'api' failed to build: The command '/bin/sh -c curl -sS https://getcomposer.org/installer | php -- --filename=composer.phar --install-dir=/usr/local/bin && composer global require --optimize-autoloader "fxp/composer-asset-plugin:${VERSION_COMPOSER_ASSET_PLUGIN}" "hirak/prestissimo:${VERSION_PRESTISSIMO_PLUGIN}" && composer global dumpautoload --optimize && composer clear-cache' returned a non-zero code: 127

How to install materialize ?

Please let me know how to change present theme to materialize theme

After ignore composer platform-reqs, i got bad request error

Hi,

I would like to try this application, however, I tried to install this I got below error.

After that, i found something from the internet and tried composer install --ignore-platform-reqs

Now application installed successfully and migration steps and localhost configured.

But now I got error while running in browser http://api.boilerplate.local/
{"name":"Bad Request","message":"The system could not process your request. Please check and try again.","code":0,"status":400,"type":"yii\\web\\BadRequestHttpException"}

please advise

Regards
Nishant

Your version of PHP, 5.4.12, is affected by CVE-2013-6420 and cannot safely perf
orm certificate validation, we strongly suggest you upgrade.
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Installation request for symfony/http-foundation v3.3.2 -> satisfiable by
symfony/http-foundation[v3.3.2].
- symfony/http-foundation v3.3.2 requires php >=5.5.9 -> your PHP version (5
.4.12) does not satisfy that requirement.
Problem 2
- Installation request for phpdocumentor/reflection-common 1.0 -> satisfiabl
e by phpdocumentor/reflection-common[1.0].
- phpdocumentor/reflection-common 1.0 requires php >=5.5 -> your PHP version
(5.4.12) does not satisfy that requirement.

Do you plan to setup a dockerized version

Hey,

like the boilerplate! Do you plan to integrate it with docker?

Thx Philipp

How to run project witout docker

@chrisleekr i have to run yii2 and angular6 project without docker compose,please share any sample templates .
thanks & regards.

Need brief explain about docker and nginx

Login error - Username and Password cannot be blank.

When I try to login for any account on Frontend or Backend I got errors - "Username cannot be blank." and "Password cannot be blank."

Error with " composer install --prefer-dist" when run docker-compose up -d

I followed all the setup instruction, I have php 7.4 and composer installed on my machine

Tutorial Page

Hello

This is awesome project. Will be any tutorials website about this project and will you update this project?

Ngix won't start in docker-composer up -d

When installing

everything else seemed to install fine after using docker-composer up -d

I encountered following error.

ERROR: for nginx Cannot start service nginx: b'Mounts denied: \r\nThe paths /Applications/MAMP/htdocs/yii2-ngx-boilerplate/nginx/image-files/etc/nginx/nginx.conf and /Applications/MAMP/htdocs/yii2-ngx-boilerplate/nginx\r\nare not shared from OS X and are not known to Docker.\r\nYou can configure shared paths from Docker -> Preferences... -> File Sharing.\r\nSee https://docs.docker.com/docker-for-mac/osxfs/#namespaces for more info.\r\n.'