GithubHelp home page GithubHelp logo

webird's Introduction

Webird full application stack

Webird was created to merge the latest PHP and Node.js innovations into a single application stack.

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:

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
  • Vue
    • TODO

Development Usage:

  1. Run server processes: ./dev/run [server] and wait until webpack-dev-server has finished building
  2. 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:

  1. Configure ./etc/prod.json to override settings from ./etc/prod_defaults.json. These two files will be merged to form ./build/etc/config.json.
  2. Create the prod environment: ./dev/run build
  3. Enter into prod directory cd ./prod
  4. ./run nginx | sudo tee /etc/nginx/sites-available/prod.webird.io 1> /dev/null
  5. sudo 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).

  1. Import database schema located at ./etc/schema.sql
  2. Run server processes: ./run (for websockets, beanstalkd loop, etc)
  3. 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.

webird's People

Contributors

dodwmd avatar dschissler avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webird's Issues

Upgrade to Babel 6

Babel 6 is out and it has a different configuration design. Integrate this when issues are resolved.

Improve OAuth2 support

The Webird OAuth2 integration is not super great because the Composer package is out of date and the OAuth authentication is instantiated directly in the auth service and it should be defined normally as a service that can be injected within the auth (Auth class) service. The OAuth2 client should be The League - oauth2-client.

Add nginx upload progress module example

I noticed that implementing upload progress with nginx is more involved than with Apache. It would sure be nice if Webird included an example for this. Additionally it would be really swell if it included modern Javascript for uploading with form data. Better yet would be if the Webpack upload module was separated from the View drag and drop upload area and file selection picker. This way the example could be moved over into any JS side MVC framework without requiring another library. This would require IE10+.

Implement 2-3 testing frameworks for both Webpack and PHP

Currently Webird has no integrated testing environment. These should be explored and a variety of example tests should be provided along with ./dev/webird.php CLI support. It should be possible to test PHP (server side), Webpack (JS side) or both at the same time from a single command.

Implement HappyPack for Webpack

HappyPack Webpack plugin will allow the build time to be significantly decreased for both the development and production build by using parallel execution. However, since I'm currently having difficulties upgrading to Webpack 2 then this should be delayed until that can be achieved in order to prevent a situation in which a niche product is not compatible in some way.

Add soft delete to user

Currently it is not possible to delete a user because the user will always have linked records in other tables. The models need to be reviewed for soft deletion.

Fix ACL permisions updating code to not delete most of the entries on an unhandled exception

Currently the way that the ACL updating code is designed it will cause most of the permissions entries to be deleted in the case of there is an unhandled exception in that area of code. This was exposed when I updated to Phalcon 2.1 and an interface was changed which caused a non-fatal exception to be thrown. This is not a security issue since the authorization system is deny and then accept. This need to be fixed before Webird can be considered beta.

Upgrade league oauth2 composer packages

The packages league/oauth2-client and league/oauth2-google need to be updated to version 2 and this will require manual testing since some methods changed in version 2.

Upgrade Ratchet to 0.4 development branch

Current Ratchet 0.3 is very old and uses a very old Guzzle package. This can be fixed by upgrading the Ratchet Composer package to the 0.4 branch. The code will need go be changed as the way of accessing the cookies has changed to use Symfony tech.

Complete Docker integration

The Dockerfile is currently not complete. It currently installs all of the dependencies but fails to start relevant services and it is not yet configuring an initial user.

Define babel corejs version for useBuiltIns

For example:

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

Implement Webpack hot module loading for CSS

Webpack supports hot module loading and this should be investigated to at least provide hot module loading for being able to instantly see CSS changes on the webpage without reloading.

Fix email related code

Fix app/phalcon/common/models/ResetPasswords.php, app/phalcon/common/models/EmailConfirmations.php and app/phalcon/modules/cli/tasks/UserTask.php. I needed to break email related features due to the mailparse extension being crap.

Properly set process.env.NODE_ENV

The node ecosystem has settled on using process.env.NODE_ENV to determine the environment. So this needs to be properly exported throughout the system and the build system needs to set this to production.

Improve quality of development tool

Much of the polish was lost during the migration from the purely Volt debug tool to the new Vue Development Tool. This should be added back.

Upgrade postcss to 5 and cssnext

Currently npm package postcss is stuck on version 4 because cssnext is figuring out how to redesign their structure to work as a preset (like Babel 6 now does) and they have not released a new compatible version.

[Build] Route admin/permissions has a Volt layout issue

Route path admin/permissions works on the development environment but the built system has a Volt layout issue where only the following is displayed:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <h2>Role Permissions</h2>
      <div class="text-warning">
              </div>
    </div>
  </div>

  <form class="form-horizontal" autocomplete="off" role="form" method="post">
    <div class="form-group">
      <div class="col-md-6 col-md-offset-3">
        <select id="roleId" name="roleId" class="form-control">
    <option value="">...</option>
    <option value="1">Administrators</option>
    <option value="2">Users</option>
    <option value="3">Read-Only</option>
</select>      </div>
    </div>

    <div class="form-group">
      <div class="col-md-6 col-md-offset-3">
        <input type="submit" name="search" value="Search" class="btn btn-primary" />      </div>
    </div>

Fix error with incorrect password

When the incorrect password is entered the error message "PHP message: Exception: SQLSTATE[22003]: Numeric value out of range: 1264 Out of range value for column 'attempted' at row 1" is logged.

Refactor convoluted dev/cmd_overrides.php

The dev/cmd_overrides.php creates a convoluted design.

<?php
return [
    'build'  => 'build',
    'nginx'  => 'dev::nginx',
    'server' => 'dev::server',
];

Its not worth it. If a task/command should differ depending on the environment then just check in the task itself.

To remedy this the environment specific tasks should be refactored to the task at hand.

ACL needs caching for webscale support

In order to be webscale Webird needs to be able to cache the ACL.

This is complicated by the fact that the ACL permissions can be changed through the admin module and that the current dist environment caching is pointed at a read only cache directory (where precompiled Volt templates are stored).

Work will need to be done to make Webird use the temporary folder for ACL data instead of the cache. This is trivial in itself but it does expose a weakness in the semantics of the tmp and cache folders. So perhaps Webird needs an official tmp, cache and cache-static designation that allows a more easily understandable difference between the dev and dist environment.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.