Prepare Ubuntu (or another distro) for web development

Beyond the myths, beliefs or the opinion that GNU / Linux is complicated to use, I consider it to be an excellent Operating System for those who are developers, especially web developers.

I have had the opportunity to converse with many people who prefer OS X and even Windows to develop, as they say, because of its ease and its tools, and although it is a very individual opinion of each person, I believe that any GNU / Linux distribution or at least the most popular ones, offer everything you need to install and work.

[quote] The most popular distributions offer all the necessary packages in their repositories for a web developer. [/ quote]

Now, on the development issue there is a dilemma, is a very updated distribution like Antergos or one that maintains a balance between stable and up-to-date as Ubuntu?

I put a very simple example, while in Ubuntu Trusted the latest version of Netbeans is 7.0.1, in ArchLinux version 8.0.2 is available. The same thing happens with NodeJS and other packages that we will see below that are widely used by front end.

Anyway, it is everyone's decision to choose the distribution of their preference according to the work to be carried out. For this article, we will start from an Ubuntu installation, and since it is focused on new users, we will show the process step by step.

Install Ubuntu 14.04

The first thing we will do is download the Ubuntu installation image from its official website. The link below will allow you to choose whether to download a 32-bit or 64-bit iso.

Once we download it, we must "burn" a DVD with the downloaded iso or prepare a Flash memory to boot and install from it. In Windows we can do it by following this guide and on Mac This other. Once this is done, we restart the PC and start through the memory or the DVD.

Ubuntu 14.04 installation steps

The first thing is to select the language with which we want to install Ubuntu:

Later we will see if we have all the necessary requirements for the installation:

Later we go to partitioning the hard drive. If you are not experienced with this, it is preferable that you leave everything as default once you have backed up your data.

We choose the time zone:

We choose the language of our keyboard:

We define our username, the name of our computer, our password:

And we wait for it to finish:

Once the installer finishes, we restart the computer and enter our session. We can run the Update Manager or open a terminal and put:

$ sudo apt update && sudo apt upgrade

And if there is nothing to update, we can start.

Preparing our workspace for testing

So, as we are developers, we only want to focus on what we know how to do: develop. We are not interested in knowing how to configure a web server, or how a database works, we just want something that works and is easy to implement to start writing code.

If we only had to write in HTML, CSS, JS, everything would be simpler, but sometimes we must have a test server for code in PHP, Ruby, DJango, etc. Therefore, it is best to set up our own web server. Luckily for us we have this facility in two different ways:

1. Using the installer XAMPP what provides us Apache.
2. Using LAMP Bitnami.

Installing Bitnami

The LAMP installation via Bitnami we already saw it in a previous article, therefore it will not be necessary to address it in this article. Once Bitnami is installed, we can manage our test server through the web browser.

All the necessary documentation on how Bitnami works can be found at his wiki.

XAMPP installation

The XAMPP installer also comes from Bitnami, but the installation process is somewhat different, so we will see it step by step. The first thing of course is to download the file that interests us according to the architecture of our processor:

Once downloaded, we open a terminal and access the folder where the file is, to which we will give execution permissions. In the case of the 64 Bit file it would be:

$ sudo chmod a+x xampp-linux-x64-5.5.19-0-installer.run

Now in the same terminal we execute it:

$ sudo ./xampp-linux-x64-5.5.19-0-installer.run

And we follow the following steps.

In the previous image it asked us if we wanted to install the files for developers and in the later one, if we agree with the selection we chose.

Now it asks us the path where we want to install (by default it is in / opt / lampp), and although we can change it, I recommend leaving it as is.

One more step of verification before starting to install

Installing XAMPP

Installation completed.

Now, to start XAMPP we just have to execute:

$ sudo / opt / lampp / lampp start Starting XAMPP for Linux 5.5.19-0 ... XAMPP: Starting Apache ... ok. XAMPP: Starting MySQL ... ok. XAMPP: Starting ProFTPD ... ok.

And this way we already have our Apache + MySQL + PHP + Perl server running. If you have a problem, I recommend that you visit the FAQ.

Custom DNS and Virtual Host with XAMPP

Assuming that we have several sites hosted on our test server, we can set each of them to be viewed locally in the file / Etc / hosts. Let's take an example, let's say we have the site dev.tests.com, what we do is open the file / Etc / hosts with our favorite text editor (and as root) and add it in the following way:

$ sudo vim /etc/hosts

and we add the line:

127.0.0.1   dev.prueba.com

But of course this is not enough, because we have to tell Apache that when someone makes a request to dev.test.com For 127.0.0.1, you have to return our test site.

We edit the file /opt/lampp/etc/httpd.conf

$ sudo vim /opt/lampp/etc/httpd.conf

and uncomment (removing the pound sign) the line that says:

# Include etc/extra/httpd-vhosts.conf

and we leave it like this:

Include etc/extra/httpd-vhosts.conf

Now we go to the file /opt/lampp/etc/extra/httpd-vhosts.conf which should have something like this:

# use only name-based virtual hosts so the server doesn't need to worry about # IP addresses. This is indicated by the asterisks in the directives below. # # Please see the documentation at # # for further details before you try to setup virtual hosts. # # You may use the command line option '-S' to verify your virtual host # configuration. # # VirtualHost example: # Almost any Apache directive may go into a VirtualHost container. # The first VirtualHost section is used for all requests that do not # match a ServerName or ServerAlias ​​in any block. # ServerAdmin webmaster@dummy-host.example.com DocumentRoot "/opt/lampp/docs/dummy-host.example.com" ServerName dummy-host.example.com ServerAlias ​​www.dummy-host.example.com ErrorLog "logs / dummy -host.example.com-error_log "CustomLog" logs / dummy-host.example.com-access_log "common ServerAdmin webmaster@dummy-host2.4.example.com DocumentRoot "/opt/lampp/docs/dummy-host80.example.com" ServerName dummy-host80.example.com ErrorLog "logs / dummy-host2.example.com-error_log" CustomLog "logs / dummy-host2.example.com-access_log" common

We modify it and leave it this way:

# use only name-based virtual hosts so the server doesn't need to worry about # IP addresses. This is indicated by the asterisks in the directives below. # # Please see the documentation at # # for further details before you try to setup virtual hosts. # # You may use the command line option '-S' to verify your virtual host # configuration. # # VirtualHost example: # Almost any Apache directive may go into a VirtualHost container. # The first VirtualHost section is used for all requests that do not # match a ServerName or ServerAlias ​​in any block. # DocumentRoot "/ home / path / folder / project /" ServerName my_blog.dev Require all granted

Obviously, the path to our project folder must be specified when replacing "/ Home / path / folder / project /".

Manual LAMP Installation

Now, although it may not seem like it, I think it is more cumbersome to do the installation in the previous way than installing the packages directly from our repositories. To have the same Stack on our PC we just have to open a terminal and put:

$ sudo apt install apache2 mysql-server-5.5 phpmyadmin

With these 3 packages only, the necessary dependencies will be installed to start working with the minimum required when developing.

Custom DNS and Virtual Host with LAMP

On the part of the DNS (Domain Name Server) we keep everything the same, that is, we add the names of our test sites in the file / Etc / hosts. Now, in the case of Apache, the path of the VHost (Virtual Hosts) is different.

Normally what is done is to place what we put in the file /opt/lampp/etc/extra/httpd-vhosts.conf in the route /etc/apache2/sites-available/vhostname.conf, and then a symbolic link is made to that file in the folder / etc / apache2 / sites-enabled / but we are not going to complicate. We will directly put the file in / etc / apache2 / sites-enabled / with the following configuration:

$ sudo vim /etc/apache2/sites-enabled/dev.pruebe.com.conf DocumentRoot "/ home / path / folder / project /" ServerName my_blog.dev Require all granted

I think it is valid to clarify that when we install manually, the default path of the website folders is / var / www / http /.

NodeJS and Ruby installation

If we use NodeJS o Ruby (instead of PHP and Perl) we can manually install the packages by running in the console:

$ sudo apt install nodejs ruby

And if they need any more packages, they just have to search for it by running the package manager or in the console:

$ sudo apt search paquete a buscar

Until this part we already have the server-side part ready for our sandbox, now let's see some of the applications that we can use.

Web development tools

In the repositories we have some applications that will allow us to work comfortably when it comes to HTML, CSS, JS and others. Among them we have:

• Bluefish
• geany
• Gedit
• Kate

Being bluefish (in my opinion) the most complete when it comes to work front end, but I recommend installing third-party applications that offer us much more functionality. We have for example brackets, SublimeText o Komodo-Edit. All these applications have their own installation package for Ubuntu, except for Komodo-Edit, which you only have to unzip and run a .sh file.

(… in process …)