Giter Club home page Giter Club logo

webapp-skeleton's Introduction

Webapp Skeleton

Slim + Twig + Idiorm + SAML2 Skeleton app with login, applog and localization

Objective

Create a basic Slim Micro PHP Framework with Twig, Idiorm and SAML2 to bootstrap a web application with the following components:

  • Site stylesheet definition uses less and grunt tasks to generate css.
  • Data models for User and Application Logs
  • Localization and Translations prepared for Twig
  • Singleton File Logger using Monolog

Project Structure

/

  • app (application libs and core files)
  • conf (application configurations)
    • apache (apache config files)
  • html (holds html assets)
    • assets (use this folder to store images, icons and fonts)
    • css (location of the css stylesheet originated from compiling less. do not place css stylesheets here, use the less folder for that)
  • js (use this folder to store application specific javascripts)
  • less (template for the page stylesheet)
  • locale (translations)
  • models (php classes for database models)
  • templates (twig templates for the webpages)
  • utilities (programs and utilities)

Install

Prepare for development environment

  1. Install this code tree on a directory at your choice
  2. Validate that all the needed PHP extensions are installed
  3. Configure the project to your own settings
  4. Change application name in app config files package.json and composer.json
  5. Add project specific dependencies to package.json and composer.json
  6. Create and customize configuration file in app/config.php using app/config-dist.php as reference
  7. Customize html/.htaccess file 1. Define application environment in SetEnv SLIM_MODE
  8. Create an apache configuration file (.conf) using conf/apache/webapp.conf.sample as reference 1. Define port, server name and home variables in this file
  9. Install composer
  10. Go to composer download page and folow the instructions to download composer.
  11. On the project root run ./composer.phar install to install composer dependencies.
  12. Install npm
  13. On CentOS run yum instal npm to install npm
  14. Run npm install -g grunt-cli to install grunt client
  15. Run npm install to install grunt and required project dependencies
  16. Run grunt init tasks
  17. run grunt bootstrap for preparing app css styles
  18. run grunt& for listening for changes in less folder and updating application stylesheet
  19. Configure apache using the configuration file in conf/apache/webapp.conf
  20. Create and configure database for application. Define dabase access in app/config.php.
  21. Create tables for models defined in models folder. Script in utils/db/gen_mysql.php shows how this can be done with the sample models for User and AppLog. The code in utils/db/gen_mysql.php is directed for MySQL databases.
  22. start coding your app
  23. Use the templates folder for developing the webpages. Use twig as templating engine.
  24. Use the less folder for developing the site style.
  25. In html/assets/ico folder there is a set of favicons that can be changed with the site brand. Use favicon generator to generate the required files from a single image.
  26. If you need debug info, set the environment variable "deploy_mode" to "development".

Prepare for deployment

  1. Install project dependencies
  2. Run ./composer.phar update to install composer dependencies
  3. Run npm install to install npm dependencies
  4. Run grunt dist to prepare final stylesheet for
  5. Configure SimpleSAML authentication

Prepare for testing

The project uses the Codeception test framework to verify the integrity of the application. Codeception is included as a development component.

To initialize the testing component in your project run the following command on the root of the project folder: codecept bootstrap. This will create the codeception.yml file and populate the tests folder with the basic configuration.

Acceptance tests may require the phantomjs webdriver to interact with javascript pages. You need to install phantomjs in your development server to be able to run the acceptance tests. Please check the phantomjs website for information on how to install.

After installing phantomjs please check the port where phantomjs is running and set it accordingly in the ./tests/acceptance.suite.yml file. You can start the phantomjs server with the default configuration (port 4444) using the script in ./bin/start_phantomjs.sh.

To run all tests execute ./vendor/bin/codecept run in the project folder. To run just the acceptance tests execute ./vendor/bin/codecept run acceptance in the project folder.

webapp-skeleton's People

Contributors

racr-fccn avatar coostax avatar

Watchers

Ivo Branco avatar Pedro Oliveira avatar James Cloos avatar Fabricio avatar  avatar Rui Martins avatar Nelson Dias avatar Caio Nakai avatar  avatar

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.