Skip to content

Step by Step Guide to Setting up the PHPHub Development Environment

Nabil Kadimi edited this page Aug 15, 2015 · 3 revisions

Project folder structure

Basic Structure

Create a new folder, which will use to contain the source code and Homestead Config Folder, something like this:

mkdir phphub.org
cd phphub.org

Clone the project

Clone the project into the preview step created phphub.org folder:

git clone https://github.com/summerblue/phphub

Virtual Machine

For Unified Development Environment, This project is using Laravel Homestead , which is base on VirtualBox and Vagrant.

Installing Virtualbox and Vagrant

First make sure you have VirtualBox and Vagrant installed.

Add homestead box To Vagrant

Execute the following command:

vagrant box add laravel/homestead

Another way to speed up downloading homestead box

If you the command line download is too slow for you, you can use download tool for speeding up the download, add the following link.

https://vagrantcloud.com/laravel/homestead/version/8/provider/virtualbox.box 

After the download is finish, using the following command to add local box to vagrant, please make sure /path/to/virtualbox.box is the real path for you condition.

vagrant box add laravel/homestead /path/to/virtualbox.box 

Clone The homestead Project

Clone Homestead project into the phphub.org folder:

git clone https://github.com/laravel/homestead.git Homestead

Modify homestead Setting

In the Homestead folder we just cloned, there is file named Homestead.yaml , it is quite Self-explanatory, change it acording to your situation:

ip: "192.168.10.10"
memory: 2048
cpus: 1

authorize: /Users/charliejade/.ssh/id_rsa.pub

keys:
    - /Users/charliejade/.ssh/id_rsa

folders:
    - map: /Users/charliejade/Projects/phphub.org/phphub
      to: /home/vagrant/phphub

sites:
    - map: phphub.app
      to: /home/vagrant/phphub/public

variables:
    - key: APP_ENV
      value: local

Config the hosts file

sudo vi /etc/hosts 

Append the following line:

127.0.0.1    phphub.app

Initialize homestead virtual machine

At the phphub.org folder:

cd Homestead
vagrant up 

It will out put something like this:

➜  Homestead git:(master) ✗ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'laravel/homestead'...
==> default: Matching MAC address for NAT networking...
==> default: Setting the name of the VM: Homestead_default_1407410586606_38332
==> ... etc....
==> default: php5-fpm stop/waiting
==> default: php5-fpm start/running, process 1945

After it booting up, we can test it by connect to it, and see the ~/phphub in the Virtual Machine is the same as the Local Machine.

vagrant ssh 
cd ~
cd phphub
ll

Open this link -> http://phphub.app:8000/ to see it in the browser.

Other settings

As of now, the phphub.org folder should have two subfolder inside it.

➜ ls
Homestead  phphub

We can add a alias to the .bashrc file for quick connect to the VM:

alias vm="ssh [email protected] -p 2222"

Remember to source ~/.bashrc to reopen the command line tool for it to take effect.

The software inside the Homestead box VM

PHP

Using the command vm to get into the Virtual Machine, check out the php version:

vagrant@homestead:~$ php -v
PHP 5.5.15RC1 (cli) (built: Jul 15 2014 11:14:55)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
    with Zend OPcache v7.0.4-dev, Copyright (c) 1999-2014, by Zend Technologies
    with Xdebug v2.2.5, Copyright (c) 2002-2014, by Derick Rethans

MYSQL

Check out the mysql version:

vagrant@homestead:~$ mysql --version
mysql  Ver 14.14 Distrib 5.5.38, for debian-linux-gnu (x86_64) using readline 6.3

In the virtual machine, using the user homestead and password secret to connnect to the mysql server.

mysql -uhomestead -p 

By default Homestead already create a database name homestead for us:

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| homestead          |
| mysql              |
| performance_schema |
+--------------------+
4 rows in set (0.00 sec)

But we want to create our own phphub:

mysql> create database phphub;
Query OK, 1 row affected (0.00 sec)

Set up phphub's database connect

laravel 4.1 Have a very sweet function, which allow us to set Environment Variabe through a php file, here to doc .

We will make use of this function by changing the app/config/database.php file like following:

'mysql' => array(
	'driver'    => 'mysql',
	'host'      => getenv('DB_HOST'),
	'database'  => getenv('DB_NAME'),
	'username'  => getenv('DB_USERNAME'),
	'password'  => getenv('DB_PASSWORD'),
	'charset'   => 'utf8',
	'collation' => 'utf8_unicode_ci',
	'prefix'    => '',
),

In the project root folder, create a .env.local.php file, see the env.example.php for reference:

<?php

return [
	'DB_HOST'     => 'localhost',
	'DB_NAME'     => 'phphub',
	'DB_USERNAME' => 'homestead',
	'DB_PASSWORD' => 'secret',
];

本机连接 vm 里面的 mysql 方法是:

Local machine can using the following infomation to connect to the Mysql Server inside Virtual machine.

host: 127.0.0.1
port: 33060
user: homestead
pass: secret

The following ports are forwarded to your Homestead environment:

SSH: 2222 -> Forwards To 22
HTTP: 8000 -> Forwards To 80
MySQL: 33060 -> Forwards To 3306
Postgres: 54320 -> Forwards To 5432

Install phphub

Composer Install packages

vm to the virtual machine

cd ~/phphub
composer install --prefer-dist

Note: --prefer-dist make the downloading process little bit fast.

Migration the database

php artisan migrate --seed 

Testing with Codeception

This project using Codeception for writing test.

Create a .env.testing.php as like .env.local.php.

By running the following command, you can get the basic codecept usage:

vendor/bin/codecept

Runing the test:

vendor/bin/codecept run

Assets management

We using the Gulp task runner for scss compile and stuff. Gulp project page.

installing gulp

Homestead already have nodejs npm gulp installed.

We just have to make some configuration.

vm
cd ~/phphub
npm install

and then run gulp to monitoring the css and js changes.

vagrant@homestead:~/phphub$ gulp
[05:13:11] Using gulpfile ~/phphub/Gulpfile.js
[05:13:11] Starting 'watch'...
[05:13:11] Finished 'watch' after 8.76 ms
[05:13:11] Starting 'default'...
[05:13:11] Finished 'default' after 6.37 μs

NOTE: /public/css and public/js folder are automatically generated by gulp script, so please modify the file inside app/assets/ folder.

Some other thing

Using the following package

view blade template structure.

All the template are put into app\view folder:

➜  tree
.
├── auth
│   ├── loginrequired.blade.php
│   └── signupconfirm.blade.php
├── emails
│   └── auth
│       └── reminder.blade.php
├── layouts
│   ├── default.blade.php
│   └── partials
│       ├── errors.blade.php
│       ├── nav.blade.php
│       └── sidebar.blade.php
├── pages
│   ├── about.blade.php
│   ├── home.blade.php
│   ├── partials
│   └── wiki.blade.php
├── topics
│   ├── create.blade.php
│   ├── edit.blade.php
│   ├── index.blade.php
│   ├── partials
│   │   ├── filter.blade.php
│   │   ├── replies.blade.php
│   │   └── topics.blade.php
│   └── show.blade.php
└── users
    └── index.blade.php
  • layouts for basic layout file;
  • Subfolder partials use for decomposition a big template into more readable , more clean code;

Git Version Control

The reason for removing .gitignore from composer.lock

  1. Sometimes, when you do a composer update, some package update to a newer version, and sadly, it breaks the code. In this situation, it helps to know what package was updated, maybe you can do a quick fix by specifying the last working version in the composer.json file.

  2. Often time, it is a good idea to make sure that the production code is the same as the development code, by adding the composer.lock file, you can use the composer install command the make sure that the production code uses the same package version as the local development one.