This project is a skeleton of a Yii 2 api with Angular, Reactjs and Vuejs frontends
To install project and all dependencies, we need 2 dependencies managers:
-
npm needs to be globaly installed for js dependencies.
-
composer needs to be globaly installed for php dependencies.
You can test your installations by running: npm -v for checking npm and: composer -V for composer
Run flowing command to create project and load all necessary dependencies:
composer create-project --stability=dev claudejanz/yii2-js-frontends your-folder
Don't forget to change your-folder to your desired destination folder
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
Run following scripts to migrate and populate your database:
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 your .hosts file to access api and frontends. Only the first one is required for development. the three others are for production tests.
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
Set your vhosts on Apache Server to access api and frontends.
Only the first one is required for development. the three others are for production tests
<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
To run vuejs in dev mode go to vuejs folder and run
npm run dev
You can access front-end through http://localhost:8082
- angular
- reactjs
- vuejs
- vuejs - token access
- yii2