Blog

Posts Tagged ‘development environment’

An alternative approach to setting up a development environment on Windows

Posted by battye in Development, Extensions with the tags , on May 29th, 2017

In the last article I looked at setting up a simple development environment on Windows using WAMP. If you would like to review that, please visit https://blog.phpbb.com/2017/02/28/how-to-set-up-a-development-environment-on-windows/

The longer you spend developing software, the more seriously you start to take setting up the perfect development environment. And the more seriously you start to take following best practices. One of these practices is setting up a development environment that matches the production environment that you are using. There are a couple of reasons why this is beneficial. Firstly, if multiple developers are working on a project then you can be sure that code written by one person will work for the other developers. And secondly, when that code is deployed to a production environment you know that it should theoretically work straight away seeing it was written in a matching development environment.

A simple example of failing to do this would be if a developer was using a PHP7 development environment and wrote a statement which included the spaceship operator. If this code was then deployed on a PHP5 environment, the code would not work. If the developer, knowing that the production environment runs PHP5, had set up their development environment accordingly this bug would have been noticed much sooner.

At first impression, it seems impossible that a developer writing and testing code on their Windows PC can set up a local development environment that matches their live web server which in the vast majority of cases is running on Unix. But this is actually not the case, it is possible – and in fact, not all that difficult – to do this.

It can be done using a couple of Windows programs that enable the creation of virtual Unix machines. Basically what this means is that you can set up a lightweight Unix server that runs within Windows, so you can still use your favourite Windows text editors and tools but when it comes to running the code it will be run in Unix. In this article I’ll be looking at Vagrant and VirtualBox.

Note: This article assumes basic knowledge of the command line on Windows and Unix.

 

SETTING UP VAGRANT, VIRTUALBOX and PUTTY

The first step is to install VirtualBox, which Vagrant supports out of the box. VirtualBox is a program which allows for the management of virtual machines and can be downloaded from: https://www.virtualbox.org/wiki/Downloads

Use the default set up options.

Now Vagrant needs to be installed. Vagrant runs alongside VirtualBox to allow users to quickly provision new and different types of development environments. It can be downloaded from https://www.vagrantup.com/downloads.html and once again the default installation options should be used.

You can confirm that it’s correctly installed by rebooting your PC, and then opening Command Prompt (cmd.exe) and running the command “vagrant”. This should return example usage options.

Note: Version 1.94 of Vagrant seems to have a couple of bugs, which I encountered trying to install this on a Windows 7 machine (I know, I know! But it’s the only Windows PC I had access to). The first resulted in a number of error messages when running the “vagrant” command. This was resolved by running “vagrant plugin install vagrant-share –plugin-version 1.1.8”. The second bug resulted in errors when running “vagrant up”, which I resolved by replacing 3 files – the procedure is explained at
https://github.com/mitchellh/vagrant/issues/8520#issuecomment-297792410 – it appears this will be resolved in v1.95.

With Vagrant now installed, create a folder on your PC where you want your Vagrant projects. I called mine VagrantProjects. In your command prompt window, “cd” into this folder. Then run this command: “vagrant init”. This will create a Vagrantfile. This is a file where development environment settings are stored.

Now run “vagrant box add ubuntu/xenial64” – this will add an Ubuntu 16.04 virtual box, a new release of Ubuntu. It is worth bearing in mind that there are plenty of other boxes you can choose from. Some even have the LAMP stack pre-installed which if you want to save time could be a good option. You can view a list at https://atlas.hashicorp.com/boxes/search

The download may take some time on slower connections. When it’s complete, open Vagrantfile and modify this variable to have the listed value:

config.vm.box = “ubuntu/xenial64”

Note: these steps can be combined if you simply run “vagrant init ubuntu/xenial64”
Then run “vagrant up” while still in that directory.

Watch the messages in the command prompt window for the SSH username and password. You will need to note these down so when the virtual machine is running you can log into it.

Once the VM (virtual machine) has booted, you can open the VirtualBox application to confirm that it has indeed been created. If you run “vagrant status” you will see that the state is running.

Next, run “vagrant ssh” – on Windows it likely won’t work. But it will provide some important information. The host/port/username will be shown again but so will “private key” – this path is important.

An SSH client needs to be installed now. This is a client that allows you to log in to a remote server – but in this case it can be used to log in to the virtual machine. Putty is a very lightweight and effective client, and can be downloaded and installed from https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html – download both Putty and PuttyGen.

Firstly, open PuttyGen, click load, and the choose the private key path specified a moment ago. Then using the default settings, click save private key. I called it pg_private_key.ppk. This key is later used merely to authenticate you and grant you access to the virtual machine.

Now open Putty. In the first screen fill out these details, which should match the information Vagrant displayed to you earlier:

Host name: 127.0.0.1
Port: 2222

Now go to Connections -> SSH -> Auth -> Private key file for authentication and select the ppk file.

Under Connections -> Data you can enter under “auto login username” the username shown in the command prompt earlier. Then go to Sessions, and under Saved Sessions type “Vagrant”. Click “Save”. Now you will not have to perform this step again, you can simply double click “Vagrant” in the future to quick-load your VM.

Finally click open, and a new command window will appear. But this time, it’s your new virtual server!

From the Putty window, type “logout” to leave the session. And in the Windows command prompt window type “vagrant halt” to shutdown the virtual machine. “vagrant status” will confirm that the state is powered off.

 

INSTALLING THE LAMP STACK

The “Linux” part has been handled now, but to continue setting up a local development environment Apache, MySQL and PHP is still required.

Firstly, Apache can be installed by running the following commands (once you have logged into the VM through Putty):

sudo apt-get -y update
sudo apt-get -y install apache2
sudo rm -rf /var/www/
sudo ln -fs /vagrant/ /var/www

So that development can take place in Windows, but run on the Linux virtual machine there needs to be some level of directory synchronisation. The final two commands create a symbolic link so you can store your files locally but also run on the webserver in the virtual machine.

On your local machine, inside the VagrantProjects folder create a new folder called html/ – this is important because of the way Apache is set up. In that folder, create a file called index.html and put this in it:

<html>
<body>
<h1>It works.</h1>
</body>
</html>

Note: A shortcut for this can be followed by creating a script like the one at https://www.vagrantup.com/intro/getting-started/provisioning.html

Now open Vagrantfile and add the following entry:

config.vm.network :forwarded_port, guest: 80, host: 4567

Now run “vagrant halt” followed up by “vagrant up” to restart the virtual machine.

Go to http://127.0.0.1:4567/index.html in your browser and you will see the file created above.

With Apache now running, let’s install MySQL:

sudo apt-get -y install mysql-server php7.0-mysql

When prompted, choose a password for the MySQL database.

You can test the connection from the command line (still using the Putty window, as it’s local to the virtual machine) by typing this command:

mysql -h 127.0.0.1 -u root -p

… and entering the password chosen above.

Pro tip: if you wanted to quickly run an SQL query, you can do it by typing the query after you’ve run the previous command. Type “CREATE DATABASE test;” to try it out. Enter “exit” to exit from the query window.

Now to install PHP7:

sudo apt-get -y install php libapache2-mod-php

phpBB requires the XML/DOM extension, so also run this:

sudo apt-get -y install php-xml

Now create a file called phpinfo.php in your html/ folder, and put this in it:

<?php
phpinfo();
?>

And then run http://127.0.0.1:4567/phpinfo.php and you will see that PHP is running correctly. As this demonstrates, any files or subdirectories you put in the /html directory become accessible through the web server.

By this point, you have everything you need to install phpBB and you can use the “test” database that was created in an earlier step.

 

INSTALLING PHPMYADMIN

To install phpMyAdmin – a fantastic tool for viewing database tables and running queries in a visually appealing way – do the following. Run:

sudo apt-get -y install phpmyadmin

Select apache2 by pressing enter, when prompted. Then select “yes” when shown the dbconfig-common prompt. Finally enter your MySQL password.

Now run the following database queries (on the command line, using the mysql command demonstrated in the previous section):

GRANT ALL ON test.* TO phpmyadmin@localhost IDENTIFIED BY ‘password’;
FLUSH PRIVILEGES;

This creates a database user called phpmyadmin (with a password of your choice, specified in the command above) with access to the test database created earlier.

Then run this command:

sudo vim /etc/apache2/apache2.conf

This will open the vim text editor. Press “i” to enter text edit mode. Then add the following line at the end of the file:

Include /etc/phpmyadmin/apache.conf

Press “Escape”, then “:wq” to save and exit the file.

With this done, you will now be able to log into phpMyAdmin by visiting this URL – http://127.0.0.1:4567/phpmyadmin/ – after logging in you can see the dashboard and view your tables and run queries.

With this complete, you now have a working development environment running on Linux with Apache, PHP and MySQL installed along with phpMyAdmin.

How to set up a development environment on Windows

Posted by battye in Development, Extensions with the tags , on February 28th, 2017

What you’ll need:

  • WAMP
  • QuickInstall
  • phpBB 3.2

As software developers the most important aspect of the development process is setting up a local development environment. The vast majority of web servers run on Linux systems, but most consumer operating systems use Windows. This doesn’t preclude Windows users from developing PHP applications though. There are a number of ways to do this, such as using an emulator like Vagrant to create a virtualised Linux environment or actually installing the Linux operating system on your computer. But the easiest approach is to simply install an application which will allow PHP, MySQL and Apache to run on a Windows machine and the application I most like for this is called WAMP.

WAMP is a free program which can be downloaded from http://www.wampserver.com/en/. Select your operating system type and click on the download link.

Once downloaded, open the installer and select your desired language (English or French are the only options at this time). From here, follow the prompts – the default options should be sufficient.

Once set up, navigate to the www directory that WAMP has created (usually C:\wamp\www). This is where the webserver files are served from. For the purposes of this tutorial I created a subdirectory in here called “demo”.

Firstly, download the latest version of the QuickInstall tool – QuickInstall is an invaluable tool for developers because it allows multiple boards to be created with pre-defined settings and later managed at just a few clicks. Why this is so important is if, for example, you are developing multiple extensions you can easily set up a different board – a vanilla, brand new board – to test and develop each one on individually.

Extract the QuickInstall zip file contents into the “demo” folder.

Now, download the latest phpBB version from https://www.phpbb.com/downloads/ – v3.2.0 at the time of writing. When you extract the contents from the zip file, copy the “phpBB” folder to your clipboard. Now, go to \www\demo\quickinstall-master\sources and paste the folder here. This will be the source board that QuickInstall will use to create a new forum.

Finally the “boards”, “cache” and “settings” directories in QuickInstall need to be writable by PHP. This is all that needs to be done to set up a basic congifiguration of QuickInstall. If you now navigate to http://localhost/demo/quickinstall-master/ in your browser the setup page will be displayed, automatically displaying the Profiles tab.

q_1

Under database settings, enter “root” as the user and leave the password blank (these are the default WAMP settings; if you used something different then it’s important that it’s reflected here). In a real world environment you would never want to have a blank database password, but as this is strictly a local set up that nobody else will be accessing it will not pose a security problem.

The rest of the settings can be left as-is. I would however recommend under the admin settings using an easily memorable username and password though, because you may be accessing this test board very regularly, and under the populate board settings checking the Yes option just so you have some test data to work with.

Once you Submit this form, the Boards tab will become visible.

q_2

You can modify some settings such as the board name if you wish (handy if, as mentioned above, you wanted to create a different board for each different extension you are developing) but the only field that needs to be explicitly defined is the database/directory name. In the past I have just used an incremental naming system (“test_board_1”, “test_board_2”, etc) so I will use test_board_1 for this example, but you can use any name you want.

Once you click Submit, the button will be hidden momentarily. This is okay – due to the test data being inserted into the database it might take a little time for the board to be created. It shouldn’t take more than about a minute, after which point you will be automatically redirected to your test board and logged in:

q_3

At this point the board has been created in www\demo\quickinstall-master\boards\test_board_1 and a database created called “qi_test_board_1”. A great feature of WAMP is that it comes with phpMyAdmin, a web-based tool for manipulating MySQL databases and running queries. This can be accessed at http://localhost/phpmyadmin and you will see the new database listed there:

q_4

By this point you have a fully functioning phpBB testing environment which you can modify as you desire. Most aspiring developers will already have a text editor of choice, but if you are new to extension development there are a number of tools you can start out with. Notepad++ (https://notepad-plus-plus.org/) is a simple but powerful text editor which has been on the scene for many years; and is free. It doesn’t have all the bells and whistles but it has syntax highlighting, auto-completion and a few other handy things which work well for PHP development. Another nice text editor which is a little more modern and feature-filled is Sublime (https://www.sublimetext.com). Technically it is a paid product, but you can download and use it for free if you can put up with periodic reminders to buy the program. Otherwise you can easily purchase a license on their site.

For more advanced developers a full-fledged IDE might be desirable and the best one I’ve used is PhpStorm. It’s the IDE of choice for a number of phpBB team members and has more features than you could possibly ever use; the highlights being powerful debugging capabilities, refactoring, testing facilities and version control integration (such as Git).

Now you can get started on your extension idea, or any other tweaks and modifications you wish to make to phpBB!