claudejanz/yii2-js-frontends

boilerplate of yii2 back-end with angular, reactjs and vuejs front-ends

Yii2-js-frontends

This project is a skeleton of a Yii 2 api with Angular, Reactjs and Vuejs frontends, _(*1)

, _(*2)

Installation

Dependencies managers

To install project and all dependencies, we need 2 dependencies managers:, _(*3)

• npm needs to be globaly installed for js dependencies., _(*4)

• composer needs to be globaly installed for php dependencies., _(*5)

You can test your installations by running: npm -v for checking npm and: composer -V for composer, _(*6)

Install project

Run flowing command to create project and load all necessary dependencies:, _(*7)

composer create-project --stability=dev claudejanz/yii2-js-frontends your-folder

Don't forget to change your-folder to your desired destination folder, _(*8)

Install database

Configure your database name and access in ./yii-server/config/db.php or simpliy create a mysql database called "yii2-js-frontends" with "root" and no password access, _(*9)

Run following scripts to migrate and populate your database:, _(*10)

cd ./yii2-server/      # go to yii-server root
./yii migrate           # database schema for users, topics, posts and comments - press entre at prompt
./yii migrate --migrationPath=@yii/rbac/migrations  # database schema for role based access(RBAC) - press enter at prompt
./yii rbac              # generate RBAC permissions, rules and roles - press enter at prompt
./yii content           # generate First users - press enter at prompt

Set hosts file

Set your .hosts file to access api and frontends. Only the first one is required for development. the three others are for production tests., _(*11)

127.0.0.1     api.yii2-js-frontends.local
127.0.0.1     angular.yii2-js-frontends.local
127.0.0.1     reactjs.yii2-js-frontends.local
127.0.0.1     vuejs.yii2-js-frontends.local

You can change api baseUrl in ./config/config.json shared by all front-end framworks, _(*12)

Set virtial host

Set your vhosts on Apache Server to access api and frontends., _(*13)

Only the first one is required for development. the three others are for production tests, _(*14)

<VirtualHost *:80>
    ServerName api.yii2-js-frontends.local
    DocumentRoot c:/GitDepot/yii2-js-frontends/yii2-server/web
    <Directory  "c:/GitDepot/yii2-js-frontends/yii2-server/web/">
        Options All
        AllowOverride All
        Require all granted
        <IfModule mod_rewrite.c>
             RewriteEngine On
             RewriteBase /
             RewriteRule ^index\.php$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . /index.php [L]
        </IfModule>
     </Directory>
</VirtualHost>
<VirtualHost *:80>
    ServerName angular.yii2-js-frontends.local
    DocumentRoot "c:/GitDepot/yii2-js-frontends/angular/dist/"    
    <Directory  "c:/GitDepot/yii2-js-frontends/angular/dist/">
        Options All
        AllowOverride All
        Require all granted
        <IfModule mod_rewrite.c>
             RewriteEngine On
             RewriteBase /
             RewriteRule ^index\.html$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . /index.html [L]
        </IfModule>
     </Directory>
</VirtualHost>
<VirtualHost *:80>
    ServerName reactjs.yii2-js-frontends.local
    DocumentRoot "c:/GitDepot/yii2-js-frontends/reactjs/public/"    
    <Directory  "c:/GitDepot/yii2-js-frontends/reactjs/public/">
        Options All
        AllowOverride All
        Require all granted
        <IfModule mod_rewrite.c>
             RewriteEngine On
             RewriteBase /
             RewriteRule ^index\.html$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . /index.html [L]
        </IfModule>
     </Directory>
</VirtualHost>
<VirtualHost *:80>
    ServerName vuejs.yii2-js-frontends.local
    DocumentRoot "c:/GitDepot/yii2-js-frontends/vuejs/dist/"
    <Directory  "c:/GitDepot/yii2-js-frontends/vuejs/dist/">
        Options All
        AllowOverride All
        Require all granted
        <IfModule mod_rewrite.c>
             RewriteEngine On
             RewriteBase /
             RewriteRule ^index\.html$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . /index.html [L]
        </IfModule>
     </Directory>
</VirtualHost>

Don't forget to restart server after setting your vhosts, _(*15)

Run in development

Vuejs

To run vuejs in dev mode go to vuejs folder and run, _(*16)

npm run dev

You can access front-end through http://localhost:8082, _(*17)

TODO

• [ ] angular
• [ ] reactjs
• [x] vuejs
• [ ] vuejs - token access
• [x] yii2