HOWTO: Web Development in Ubuntu

[kingzasz]

This guide is taken from my site, zimmertech.com at this URL:
http://www.zimmertech.com/tutorials/...evelopment.php

Web Development in Linux
Tips and Tricks about designing web sites in Linux

The purpose of this guide is to help Linux users be better and more efficient web developers without running Windows.

Advantages of Linux

Linux has many advantages over Windows. For me, it is much more stable then Windows. I can keep my machine running without a reboot for an average of 4 months. That said, Windows XP is much more stable than ME or 98, which I had been running before. Another advantage is multiple workspaces. When I work, I can usually have over a dozen programs running--a few Firefox windows, IE, Photoshop, Email, FTP, local terminal, SSH, a coding program, a billing program, a bunch of directories, etc. This can quickly fill up a Windows taskbar. In Linux, I can keep everything organized. All coding windows in one workspace. All server windows in another (SSH and FTP). Last, if you use a LAMP environment (Linux/Apache/MySQL/PHP), then you can easily test on your own server before ever uploading to the web. Windows cannot perfectly emulate this.

Program Installatoin

Almost all of the programs that I listed can easily be installed through System | Administration | Synaptic Package Administrator) or at the command line through "sudo apt-get install programname". For the Windows programs, install wine, then download the Windows executable. Then type "wine programname.exe" in the terminal to install. So whenever you see a program name in this guide, try installing the package through Ubuntu's Synaptic Package Manager.

Coding

There are many options for coding in linux. Emacs, vim and a host of other editors such as gedit work fine. I prefer programs specifically built for web development such as Bluefish for Gnome or Quanta for KDE. These programs provide a lot of added functionality such as project management, tag help, table/form builders, syntax checking, and many useful plugins (such as tidy to beautify your code). Another option that I like is the internal preview. I can hit f5 to preview the current document in a inline browser without changing windows. Unfortunately, this will not run PHP code, so sometimes it is not very useful. Regexxer is a great GUI program that will let you do universal search and replaces. So you can search all of the files on your hard drive for a certain text string, then replace it with something else. It uses Perl style regular expressions so it's power is almost endless.

FTP

I have not found a great FTP program for Linux yet. gFTP is the best I found, but I don't like its interface and I've had problems with it. So for most jobs, I run my favorite FTP program Filezilla under Wine.

SSH

When I look for hosting, one of my requirements is SSH access. Because I use a lot of content management systems, SSH is incredibly valuable. Instead of extracting Exponent locally then spending all day FTPing the files up, I upload the compressed version and then uncompress it using SSH on the other end, saving a ton of time. Or if there are permission problems on files, I can use a recursive chmod (chmod -R 644). If you are reading this guide, I'm sure you know the advantages of the linux command prompt. The "ssh" command works fine from Linux, or Putty runs perfectly under Wine if you want an easier to use program with more options.

Graphics Design

Linux is weak in graphics design. Almost all graphics design programs are meant to run on Windows. Luckily, there are a few options.

VNC

The first option is to not run your graphics design program on Linux at all. This is the most problem free solution because your graphics program (probably Photoshop or Paint Shop Pro) will be running on a Windows machine. The downside is speed. You can forget using brushes. But this option worked for me for almost a year. First, you need to have a windows machine on the network. On that machine, install TightVNC, and start up the TightVNC server. Then on your Linux box, install a program such as krdc to connect to this VNC machine. Just type in the servers IP address, followed by a ":0". So for me, I enter "192.168.1.105:0".

Wine / Crossover

Wine and Crossover are Windows emulators that run on Linux. They allow you to run many Windows programs in Linux. Wine is free and can run many Windows programs including Photoshop 7.0. But it still has problems with many programs. A slightly better product is Crossover. Crossover Office is not free, but costs about $40. But it will run many popular programs almost perfectly--including the entire Microsoft Office suite, and Photoshop 7.0. Unfortunately, even Wine and even Crossover cannot run Paint Shop Pro, or Photoshop CS (and CS2), so you have to use older software. Another downside to this option is that there are bugs and glitches.

GIMP

GIMP is an open source graphics design program built for Windows. It is a very capable program. In my opinion, it is not as good as Photoshop for a variety of reasons--more difficult interface, less options, and less tutorials on the internet. But if the other options do not work, consider GIMP.

Local Server

There are many advantages to designing locally. Mainly, you don't have to FTP every file that you change each time you want to test something.
To install, follow these instructions. These are taken from a great guide to installing a public Ubuntu server.

MySQL

Type the following in the command line

 apt-get install mysql-server mysql-client libmysqlclient12-dev

Then to set your mysql root password:

mysqladmin -u root password yourrootsqlpassword

Apache and PHP

apt-get install apache2 apache2-common apache2-doc apache2-mpm-prefork apache2-utils libapr0 libexpat1 apt-get install autoconf automake1.4 autotools-dev libapache2-mod-php4 libkrb53 php4 php4-common php4-dev php4-imagick php4-mcrypt php4-rrdtool php4-sqlite php4-curl php4-domxml php4-gd php4-imap php4-ldap php4-mcal php4-mhash php4-mysql php4-odbc php4-pear php4-xslt

Now place your web files in "/var/www/" or "~/public_html/". Make sure that your files are chmoded to at least 644 (owner read/write, group and other read). Now open up your browser. For files in "/var/www/", type "http://localhost/" and for files in "~/public_html/", type "http://localhost/~username/".

Unless you love editing your mysql database through the command line, I would recommend using a GUI program to create/edit databases. My favorite is phpMyAdmin. It is web based, so install it in /var/www or ~/public_html/. This is a package in Ubuntu that will automatically install in your /var/www, so to use it, just type in your browser "http://localhost/var/www/phpmyadmin/" (http://localhost/phpmyadmin/ also works)

There are a few things you want to do to configure apache. You probably want to enable .htaccess. To do this, type "sudo gedit /etc/apache2/apache2.conf", then add this at the end:

<Directory />
AllowOverride None
</Directory>
<Directory "/var/www">
AllowOverride Options
</Directory>

#copy and paste this to allow .htaccess in specific directories
<Directory /var/www/directorytoallowhtaccess>
AllowOverride All
</Directory>


# Include the virtual host configurations:
Include /etc/apache2/sites-enabled/[^.#]*

Before this will work, you need to restart apache. In the command line, type "sudo apache2ctlrestart".

Thats it! You have a working Linux server

Testing

IE runs well under Wine. To ease your install, use "winetools".

Other

Karm is a great billing program. You can easily record the time you work on each project, then easily print out a invoice with your total time and history
Another idea that you might want to consider is to get dual monitors (using 2 monitors at once). This saves the time from switching between desktops--you can code for a Window and review the result without minimizing or maximizing anything.

Thats it! If you have any other tips and advice, please comment below.

Thanks!

[kingzasz]

Does anyone have any suggestions?

For example, I cannot get OpenType fonts to work in Photoshop7 under Wine. Has anyone fixed this?

[JimmyJazz]

I would really reccomend just learning the Gimp (v3.6) and not wasting time with PS or any windows application. Designers have been a bit brainwashed into the Photo Shop method over the years and I think its time that stopped. I do all my design in GIMP and use Bluefish for CSS, PHP and HTML

[pinballkid]

inkscape is definitely worth mentioning. I've been a photoshop junkie for years, and I'm new to inkscape, but I think it has a lot of promise.

[curtis]

Instead of using VNC to use photoshop, you should try FreeNX.
I'm not sure if you can do it GNU/Linux -> Windows though...

[endersshadow]

inkscape is definitely worth mentioning. I've been a photoshop junkie for years, and I'm new to inkscape, but I think it has a lot of promise.

It should be noted that Inkscape is a vector based graphics program, and it's proprietary counterpart is Adobe Illustrator. Inkscape is a phenomonal program, and I use it a lot, but it is not ideal for web based graphics because web graphics must be rastorized. While it is true that you can go to File>Export Bitmap in Inkscape, it is necessary to understand that from an OSS software solution for web based graphics, GIMP is the way to go.

However, if you're going to cough up hundreds of dollars for Photoshop or Paint Shop Pro, I urge you to try out Pixel. You can also download the demo for free to test it out. It is supposed to be much more advanced than the GIMP, and it includes the one window interface. I actually just downloaded it now, and I will play with it a bit later.

Moreover, it's also important to note that graphics design and editting, by its nature, are not easy tasks, and nobody should expect a decent graphics program to be easy or simplified by any means. Graphics editting is a very complex task, and the programs that are designed to do it reflect that in their complexity. I feel that I had to include that disclaimer because many times people who don't have Photoshop experience, and try out the GIMP often complain of the level of difficulty in using it.

[steffen]

You'll be happy to know that FileZilla 3 will be available for Linux as well. You can test a nightly build by visiting http://filezilla-project.org/nightly.php. Simply unpack to a directory and click on the filezilla icon in Nautilus to run it. Works great for me so far, even though it's only a nightly build. Don't expect it to work yet, though

[kingzasz]

Filezilla for Linux.. thats awesome!

It turns out that Linux and Photoshop under wine do run opentype fonts... I was just having problem with one font and assumed that it applied to all opentype fonts.

[soma]

I am very surprised this thread does not mention the Eclipse IDE. It is my tool of choice for any platform at the moment, and I would label myself being a web developer at the scripting side. I currently use Eclipse for developing Ruby on Rails webapps, with the amazing new plugin RadRails.

I have previously done developing in both PHP and J2EE, both in this IDE, and for java, its outstanding. For PHP there is the phpeclipse plugin.

For my development projects, from the coding side of it, I would consider Linux, and Ubuntu specifically, to be the platform to develop in. My second choice would be Mac OS X, but I personally rather use Linux because of the ease of apt and the control over the OS. Linux is programmer-friendly, and I love it!

- albert
http://albert.delamednoll.se

[Kremonte]

Good HOWTO,
In the 'installing mySQL' portion, mysqladmin package does not exist in repos for me (with uni/multiverse) Maybe you meant mysql-admin?
In the 'installing apache/PHP' portion, you have an apt-get install right in the middle of the line. Maybe you meant to leave it out or for it to be in it's own code block?

Also, this is just a personal preference but the -u root password in apt-get seemed akward. I prefer sudo

All in all though, helped me get my box set up quickly, so I can stop using my windows system for web development

EDIT: Just re-read it, wanted to make a few comments;
Wine can run Photoshop CS and CS2, the former works much better, and both can run (nearly?) flawlessly with a few Wine hacks. I personally have not tested Wine with CS2 (doesn't have many improvements over CS1 )
Also, for Photoshop users who cannot get it to work well enough, you can try GimpSHOP. It's nowhere near Photoshop still, but the menus and trees are very well placed to some-what emulate Photoshop. Although it's mostly aesthetic, it helps...