Tag Archives: Codio

Develop PHP in Codio Web IDE: Symfony2

I recently discovered Codio, a Web IDE that runs right in your browser. You can have unlimited public and open source projects for free. Private projects and boxes only cost $8 a month (there are also educational discounts).

You can signup with your email or connect with a Github account: Signup here.

In this post I’ll describe the process to create a Symfony2 project in Codio. It’s almost the same as configuring an usual Symfony2 project but the way you install and configure Apache2, PHP and MySQL is a little bit different from an standard GNU/Linux box.

First signup in Codio, go to your account and click “+ Create Project” tab. Give your project a name, select “Template” and then “Empty project”:

template-empty

Now open the terminal by selecting Tools->Terminal from the top menu or by pressing Shift+Alt+T. Here is how it looks like:

terminal

TL;DR

If you don’t want the long answer here you have a script with all the input you should write in bold text (<enter> means you only have to press the enter key):

$ parts install php5 php5-apache2 mysql composer
$ rm -Rf * .* 2> /dev/null
$ composer create-project symfony/framework-standard-edition ./
Installing symfony/framework-standard-edition (v2.4.2)
...
Creating the "app/config/parameters.yml" file
Some parameters are missing. Please provide them.
database_driver (pdo_mysql): <enter>
database_host (127.0.0.1): <enter>
database_port (null): <enter>
database_name (symfony): symfony
database_user (root): symfonyuser
database_password (null): password
mailer_transport (smtp): <enter>
mailer_host (127.0.0.1): <enter>
mailer_user (null): <enter>
mailer_password (null): <enter>
locale (en): <enter>
secret (ThisTokenIsNotSoSecretChangeIt): <enter>
...
$ sed -i 's/;date.timezone =/date.timezone = '"$(cat /etc/timezone  | sed s/\//\\\//g)"'/g' /home/codio/.parts/etc/php5/php.ini
$ sed -i 's//home/codio/workspace//home/codio/workspace/web/g' /home/codio/.parts/etc/apache2/httpd.conf
$ parts start apache2 mysql
$ mysql -u root -e "CREATE DATABASE symfony;"
$ mysql -u root -e "CREATE USER symfonyuser@localhost;"
$ mysql -u root -e "SET PASSWORD FOR symfonyuser@localhost=PASSWORD('password');"
$ mysql -u root -e "GRANT ALL PRIVILEGES ON symfony.* TO symfonyuser@localhost IDENTIFIED BY 'password';"
$ mysql -u root -e "FLUSH PRIVILEGES;"
$ sed -i '/.*HTTP_CLIENT_IP.*/ s/^//*/' web/app_dev.php
$ sed -i '/You are not allowed/{n;s/.*/&*//;}' web/app_dev.php

Now at the top right of the screen click at the arrow that points down besides “Project Index (static)” and select “Box URL”. You’ll see a 404 error because you are trying to access the production front controller and there is still nothing there. Add “/app_dev.php” to that URL and you should see the default Symfony2 welcome page.

If you want the longer answer continue reading:

Install PHP, Apache and MySQL

Just run this command:

$ parts install php5 php5-apache2 mysql

Once the installation process finishes (which only takes some seconds) you’ll see this message explaining how to start/stop the services and where the configuration files are located:

============ apache2 ============
To start the Apache server:
  $ parts start apache2

To stop the Apache server:
  $ parts stop apache2

Apache config is located at:
  $ /home/codio/.parts/etc/apache2/httpd.conf

Default document root is located at:
  $ /home/codio/workspace

============ php5 ============
PHP config file is located at:
  $ /home/codio/.parts/etc/php5/php.ini

If Apache2 httpd is already running, you will need to restart it:
  $ parts restart apache2

============ mysql ============
To start the server:
  $ parts start mysql

To stop the server:
  $ parts stop mysql

To connect to the server:
  $ mysql

Install Symfony2

At this moment you have several ways to install Symfony2 in Codio:

1.- Download Symfony2 with wget

Once you are in the terminal tab execute those commands to clean the workspace, download Symfony2 with vendors and extract it on the workspace root folder:

$ rm -Rf * .* 2> /dev/null
$ wget http://symfony.com/download?v=Symfony_Standard_Vendors_2.4.2.tgz -O Symfony_Standard_Vendors_2.4.2.tgz
$ tar xpf Symfony_Standard_Vendors_2.4.2.tgz --strip-components=1 Symfony
$ rm Symfony_Standard_Vendors_2.4.2.tgz

2.- Using Composer

If you want to use composer to create your Symfony2 project you have to install it first:

$ parts install composer

Then clean the workspace and install a fresh Symfony2 project:

$ rm -Rf * .* 2> /dev/null
$ composer create-project symfony/framework-standard-edition ./

Symfony2 comes with a postinstall script that makes composer ask you for the applications parameters: database, mailer and locale. If you want to use the default value for any of them just press enter:

parameters

In your recently created project you’ll see a tree shaped explorer on the left with something like this:

file_explorer

Enable access to Symfony2 development front controller outside localhost

Symfony2 has 2 front controllers: one for production and another one for development. The development front controller, by default, can only be accessed from localhost. As we are going to access our app in Codio’s servers we have to edit the web/app_dev.php file and comment (or delete) those lines:

if (isset($_SERVER['HTTP_CLIENT_IP'])
    || isset($_SERVER['HTTP_X_FORWARDED_FOR'])
    || !in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', 'fe80::1', '::1'))
) {
    header('HTTP/1.0 403 Forbidden');
    exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');
}

You can use those commands to do this on the terminal:

$ sed -i '/.*HTTP_CLIENT_IP.*/ s/^//*/' web/app_dev.php
$ sed -i '/You are not allowed/{n;s/.*/&*//;}' web/app_dev.php

If you know your IP you can also add it to the array in line 3 of the above code.

Configure Apache and PHP

The first thing we need to do is configure a default time zone for PHP because this is mandatory for Symfony2. Edit /home/codio/.parts/etc/php5/php.ini (you can use vi or nano for example) and set your default time zone:

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = "Europe/Madrid"

Apache2 defaults document root does not point to our Symfony2 web folder so we have to edit /home/codio/.parts/etc/apache2/httpd.conf and change the DocumentRoot and the Directory:

DocumentRoot "/home/codio/workspace/web"
<Directory "/home/codio/workspace/web">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Those 2 steps can be done in the terminal this way:

$ sed -i 's/;date.timezone =/date.timezone = '"$(cat /etc/timezone  | sed s/\//\\\//g)"'/g' /home/codio/.parts/etc/php5/php.ini
$ sed -i 's//home/codio/workspace//home/codio/workspace/web/g' /home/codio/.parts/etc/apache2/httpd.conf

Now it’s time to start Apache2 and MySQL:

$ parts start apache2 mysql

Create a database in MySQL

You can use Symfony2 without a database but that won’t be the usual scenario. To create and configure a MySQL database log to MySQL shell with this command (using an empty password):

mysql -u root -p

Inside that shell (you’ll see a ‘>‘ prompt) you have to:

  1. Create a database
  2. Create a user
  3. Create a password for that user
  4. Grant privileges for the user
  5. Flush privileges
  6. Exit the shell
CREATE DATABASE symfony;
CREATE USER symfonyuser@localhost;
SET PASSWORD FOR symfonyuser@localhost= PASSWORD("password");
GRANT ALL PRIVILEGES ON symfony.* TO symfonyuser@localhost IDENTIFIED BY 'password';
FLUSH PRIVILEGES;
EXIT

Running the Symfony2 app

We are ready to run our app. At the top right of the screen click at the arrow that points down besides “Project Index (static)” and select “Box URL”. You’ll see a 404 error because you are trying to access to the prod front controller and there is still nothing there. Add “/app_dev.php” to that URL and you should see the default Symfony2 welcome page:

welcome

If you see this 502 error you probably forgot to start the servers:

502

If you see this text:

You are not allowed to access this file. Check app_dev.php for more information.

You didn’t enable the development front controller correctly.

Configure Symfony2

If you didn’t use composer to install Symfony2 the application parameters can be configured in the app/config/parameters.yml file. These are the default values:

parameters:
    database_driver: pdo_mysql
    database_host: 127.0.0.1
    database_port: null
    database_name: symfony
    database_user: root
    database_password: null
    mailer_transport: smtp
    mailer_host: 127.0.0.1
    mailer_user: null
    mailer_password: null
    locale: en
    secret: ThisTokenIsNotSoSecretChangeIt

You can also use the Symfony2 configure script by clicking the middle green buttom of the welcome screen:

welcome

step1

step2

well_done

Further Codio tunning

At the top right corner click the arrow that points down besides “Project Index (static)” and select “Configure…”. You have to change the default Box URL option so it points to the development front controller app_dev.php:

configure

{
// Configure your Run and Preview buttons here.

// Run button configuration
  "commands": {
        "Node version": "node --version"
  },

// Preview button configuration
  "preview": {
        "Project Index (static)": "https://{{domain}}/{{index}}",
        "Current File (static)": "https://{{domain}}/{{filepath}}",
        "Box URL": "http://{{domain}}:3000/app_dev.php",
        "Box URL SSL": "https://{{domain}}:9500/"
  }
}

You can add for example the Symfony2 cache:clear command in the “Run button configuration” section of your projects configuration. Just add the command (with the -c option of php executable pointing to the location of php.ini or it will complain again saying that the default time zone is not configured):

"Cache clear": "php -c /home/codio/.parts/etc/php5 app/console cache:clear",

commands

At this moment I have added those handy commands:

{
// Configure your Run and Preview buttons here.

// Run button configuration
  "commands": {
        "Start servers": "parts start apache2 mysql",
        "Restart servers": "parts restart apache2 mysql",
        "Stop servers": "parts stop apache2 mysql",
        "Dev Cache clear": "php -c /home/codio/.parts/etc/php5 app/console cache:clear",
        "Dev Assets": "php -c /home/codio/.parts/etc/php5 app/console assets:install web --env=dev --symlink && php -c /home/codio/.parts/etc/php5 app/console assetic:dump --env=dev && php -c /home/codio/.parts/etc/php5 app/console bazinga:js-translation:dump web/js/",
        "Load Fixtures": "php -c /home/codio/.parts/etc/php5 app/console doctrine:fixtures:load",
        "Drop & Create DB": "php -c /home/codio/.parts/etc/php5 app/console doctrine:database:drop --force && php -c /home/codio/.parts/etc/php5 app/console doctrine:database:create",
        "Update DB": "php -c /home/codio/.parts/etc/php5 app/console doctrine:schema:update --force",
        "Prod Cache clear": "php -c /home/codio/.parts/etc/php5 app/console cache:clear --env=prod --no-debug",
        "Node version": "node --version"
  },

// Preview button configuration
  "preview": {
        "Project Index (static)": "https://{{domain}}/{{index}}",
        "Current File (static)": "https://{{domain}}/{{filepath}}",
        "Box URL": "http://{{domain}}:3000/app_dev.php",
        "Box URL SSL": "https://{{domain}}:9500/"
  }
}

More about Codio

Those are the available packages in Codio. You can get the list by running parts search. As you can see it is not only a LAMP stack: MongoDB, MySQL, MariaDB, PostgreSLQ, Apache2, nginx, PHP5, PHPUnit, Composer and many more:

$ parts search
ack (2.12) Ack: A tool like grep, optimized for programmers
ant (1.9.3) Ant: A pure Java build tool, simpler and easier to use than GNU Make
apache2 (2.4.7) Apache Web Server: A cross-platform open-source HTTP server for modern operating systems
apr (1.5.0) Apache Portable Runtime: Software libraries that provide a predictable and consistent interface to underlying platform-specific implementations
apr_util (1.5.3) Apache Portable Runtime Utilities: Utilities that provide a predictable and consistent interface to underlying platform-specific implementations
cloudfoundry (v6.0.1) Cloud Foundry: An open CLI for managing cloud services
cmake (2.8.11.2) CMake: A cross-platform, open-source build system
composer (1.0.0-alpha8) Composer: PHP5 Dependency management
dart (1.2.0) Dart is a new platform for scalable web app engineering
erlang (R16B03-1) Erlang is a programming language used to build massively scalable soft real-time systems with requirements on high availability.
freepascal (2.6.2) Free Pascal: An open source Pascal compiler for Pascal and Object Pascal
geos (3.4.2) GEOS: C++ port of the Java Topology Suite (JTS)
ghc (7.6.2) GHC is a state-of-the-art, open source, compiler and interactive environment for the functional language Haskell
go-lang (1.2) Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.
googleappengine (1.8.9) Google App Engine Python/PHP: A CLI for managing Google App Engine cloud services for Python and PHP
haskell-platform (2.0.0) Haskell is an advanced purely-functional programming language.
heroku-cli (3.3.0) The Heroku CLI is used to manage Heroku apps from the command line.
image_magick (6.8.8-3) ImageMagick: a software suite to create, edit, compose, or convert bitmap images.
leiningen (2.3.2) Leiningen: A build automation and dependency management tool for Clojure
libmcrypt (2.5.8) Libmcrypt: A uniform interface to several symmetric encryption algorithms
lua (5.2.2) Lua: A powerful, fast, lightweight, embeddable scripting language
mariadb (5.5.36) MariaDB: An enhanced, drop-in replacement for MySQL.
maven (3.1.1) Maven: A software project management and comprehension tool
memcached (1.4.15) Memcached: An open-source, high-performance memory object caching system
meteor (0.7.1.2) Meteor: A real-time web development platform
mongodb (2.4.6) MongoDB: A cross-platform document-oriented NoSQL database system
mysql (5.6.15) MySQL: The world's most popular open-source relational database
nginx (1.4.4) The High Performance Reverse Proxy, Load Balancer, Edge Cache, Origin Server
phantomjs (1.9.1) PhantomJS: A headless WebKit scriptable with a JavaScript API
php5 (5.5.8-2) PHP 5.5: A popular general-purpose scripting language that is especially suited to web development. Prebuild extensions default + mysql, pdo_mysql, pgsql, pdo_pgsql, readline, curl, iconv, gd, soap, mbstring, zip, zlib
php5-bcmath (5.5.8) BC Math module for php5
php5-bz2 (5.5.8) BZ2 module for php5
php5-exif (5.5.8) Exif module for php5
php5-ftp (5.5.8) ftp module for php5
php5-imagick (3.1.2) ImageMagick module for php5
php5-imap (5.5.8) IMAP module for php5
php5-intl (5.5.8) Intl module for php5
php5-ldap (5.5.8) ldap module for php5
php5-lzf (1.6.2) LZF module for php5
php5-mongo (1.4.5) Mongo driver for php5
php5-mysqli (5.5.8) mysqli module for php5
php5-oauth (1.2.3) OAuth module for php5
php5-pcntl (5.5.8) Process Control support module for php5
php5-ssh2 (0.12) SSH2 module for php5
phpmyadmin (4.1.7) phpMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the Web
phpunit (3.7.32) PHPUnit: A programmer-oriented testing framework for PHP.
postgresql (9.2.4) PostgreSQL: The world's most advanced open-source database system
rabbitmq (3.2.3) AMQP server written in Erlang
redis (2.6.16) Redis: An open-source, in-memory, key-value data store
rust (0.9) Rust: A safe, concurrent, practical language
s3cmd (1.0.1) s3cmd: Command line tool for managing Amazon S3 and CloudFront services
scala (2.10.2) Scala: An object-functional programming language
sqlite3 (3.8.2) SQLite is an in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine.
swig (2.0.11) Swig: An interface compiler that connects programs written in C and C++ with scripting languages such as Perl, Python, Ruby, and Tcl.
tee-clc (12.0.0) Command-line Client for Team Foundation Server
the_silver_searcher (0.18.1) The Silver Searcher: A code-searching tool similar to ack, with focus on speed
tig (1.2.1) Tig: An ncurses-based text-mode interface for git
tmux (1.9a) Tmux: a terminal multiplexer that lets you switch easily between several programs in one terminal.