Webird full application stack
Webird was created to merge the latest PHP and Node.js innovations into a single application stack, issues
The PHP foundation is comprised of Phalcon and Composer, which are used to create a HMVC foundation that offers everything that is expected of a modern PHP server side framework. The Javascript foundation is built with Webpack 4, Vue 2 and NPM, which when used together are able to produce highly efficient single page applications. Node.js is required for development only and is not required once a project has been built.
Key technologies of Webird:
- PHP 7.2
- Phalcon 3
- Webpack 4
- Vue 2
- Babel 7
- PostCSS
- nginx
- Composer
- Nodejs
- Ratchet
- gettext
- MariaDB 10.4
- Docker
Notable aspects of Webird:
- PHP CLI utilities for many tasks
- Manage all third party dependencies with Composer and NPM
- Bash provisioning and local installation scripts for configuring system (based on setupify)
- A single PHP command that starts development processes across PHP and Nodejs
- Live reloading ES6 module front end environment
- Google OAuth2 login
- Integrate gettext .po environment for both PHP and Webpack
- Vue 2 example integration
- Includes Dockerfile skeleton
Install Requirements:
- PHP >= 7.2
- Phalcon >= 3.4.0
- MariaDB >= 10.4
- Node.js >= 10.2
Installation Instructions:
# Ubuntu 18.04 Bionic
# System provisioning
sudo ./setup/install ubuntu1804
# mariadb setup
sudo mysqladmin --protocol=socket create webird
sudo mysql --protocol=socket webird < ./etc/schema.sql
# Create a Webird user. You can use this user to create more users via the web interface.
./dev/run useradd --activate --password 'openopen' 'Your Name' '[email protected]' Administrators
Poedit Localization editor:
In order to modify the localization messages you will need to configure the Poedit GNU gettext frontend since it does not come with the tools necessary to parse Volt and Vue templates. The provision script will have installed a node script called xgettext-template.
Poedit Configuration Instructions:
Go to File - Preferences... in Poedit and add a new parser in the Parsers tab:
- Volt
- Language:
Volt - List of extensions...:
*.volt - Parser Command:
xgettext-template -L Volt --force-po -o %o %C %K %F - An item in keywords list:
-k %k - An item in input files list:
%f - Source code charset:
--from-code=%c
- Language:
- Vue
- TODO
Development Usage:
- Run server processes:
./dev/run [server]and wait until webpack-dev-server has finished building - Visit http://dev.webird.io
If you see the local host file not configured page then add 127.0.0.1 dev.webird.io to your /etc/hosts file.
Production Usage:
Create prod (production) environment:
- Configure
./etc/prod.jsonto override settings from./etc/prod_defaults.json. These two files will be merged to form./build/etc/config.json. - Create the prod environment:
./dev/run build - Enter into prod directory
cd ./prod ./run nginx | sudo tee /etc/nginx/sites-available/prod.webird.io 1> /dev/nullsudo ln -fs /etc/nginx/sites-available/prod.webird.io /etc/nginx/sites-enabled/prod.webird.io
Run final prod environment:
Attention: At this point it will be assumed that you are inside of the portable prod directory wherever it is now located (or named).
- Import database schema located at
./etc/schema.sql - Run server processes:
./run(for websockets, beanstalkd loop, etc) - Visit https://prod.webird.io
The nginx configuration must be rebuilt if the production environment directory is moved or renamed. It is recommended to use the ./run nginx command to rebuild the configuration instead of manually editing the generated nginx configuration. If more advanced custom settings are required it is recommended to first modify the source ./app/phalcon/common/views/simple/nginx/prod.volt file and then rebuild the prod environment.
Note: Node.js is no longer a dependency at this point since it is only used to build the browser facing content into static bundles.
Project Structure:
./setup
├── install (takes a parameter $osName to provision system)
└── menu (provides a lightbar menu interface to installation)
./app
├── locale/ (contains the gettext locale .po files uses by Phalcon and Webpack)
├── theme/ (theme files to be read as-is and also processed by Webpack)
├── phalcon
│ ├── bootstrap_cli.php
│ ├── bootstrap_web.php
│ ├── common/
│ ├── config/
│ └── modules/
└── webpack
├── config.json (you can make this .json or .js)
├── entries (code entry points)
└── modules (application ES6 modules)
└── commons (common code to be run by multiple entry points)
./dev
├── run (CLI entry for dev environment)
├── public/
│ └── index.php (Web entry for dev environment)
├── cmd_overrides/ (dev specific command overrides for CLI interface)
└── webpack.js (Webpack script)
./prod
├── run (CLI entry for built system)
├── public/
│ ├── index.php (Web entry for built system)
│ └── static resources copied from app directory
├── etc/
├── cache-static/
│ ├── locale/ (localization files in machine readable .mo format)
│ └── volt/ (compiled Volt templates)
├── phalcon/
└── vendor/ (Composer packages)
Compare the ./app directory to a built ./prod directory to notice the differences between the app code and dev environment and the built system.
You may also view the build system routine at app/phalcon/modules/cli/tasks/DevTask.php
Note: The ./prod directory contains only optimized and uglified JS resources and if Ion Cube has been enabled then the build process will use it to protect the PHP code.
Note: A Vue template and single file component gettext extractor does not current exist as it has yet to be made.
10 Sep 7, 2022
12 Jun 16, 2023
15 Dec 30, 2022
1 Jan 23, 2022
10 Jun 13, 2022
11 Dec 28, 2022
199 Nov 23, 2022
1.5k Dec 25, 2022
213 Dec 15, 2022
3 Feb 22, 2022
372 Nov 21, 2022
1 Dec 2, 2021
22 Sep 28, 2020
593 Dec 30, 2022
1.7k Jan 8, 2023
900 Dec 22, 2022
18 Sep 8, 2022
5 Dec 14, 2021
0 Jul 16, 2022