Entorno de desarrollo web simple en MacOS

En esta guía muestro un entorno de desarrollo web simple,  una guía para configurar algo rápido y no necesitas estar editando archivos de configuración Nginx o Apache para tener un proyecto corriendo localmente.

Instalar Hombrew

Primeramente, vamos a instalar este administrador de paquetes muy popular ya que nos facilita instalar software que de otra manera, se nos haría más complicado.

Aviso: ten en cuenta que es necesario instalar Xcode para que no tengas problemas al momento de instalar Hombrew. Es posible solo instalar las herramientas de command line corriendo el siguiente código: `xcode-select –install`.

Vayamos al sitio oficial de Hombrew, y copiamos el código de instalación desde ahí por si hay alguna actualización en la forma de instalación, o simplemente copia el código abajo

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Solo hay que pegar este código en tu consola y presionar Enter varias veces.

Probemos la instalación de hombrew brew doctor

Confirmando con Brew Doctor
Confirmando la instalación de Hombrew

Instalemos zsh mediante Hombrew

Ya que hemos instalado Hombrew, voy a instalar también zsh. ZSH me va permitir tener un theme más bonito en mi terminal utilizando oh-my-zsh.

Ingresa en tu terminal la siguiente línea: brew install zsh

Instalemos de una vez oh-my-zsh:
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Ahora, lo que resta es elegir el theme que mejor te guste. Así ha quedado mi terminal después de aplicar un theme modificado llamado powerlevel9k:

Terminal utilizando un theme con oh-my-zsh
Terminal utilizando un theme con oh-my-zsh

Esta no es mi consola favorita, prefiero más iTerm2.

Instalar iTerm2

Descargar iterm2. Abrir el archivo comprimido y mover la aplicación a la carpeta Aplicaciones de Mac.
Ahora abre iTerm y cambia un poco la configuración.

Configuración

Configuración General

  • Update to beta test versions when available: me gusta tener siempre las adiciones más recientes, no importa sin son bugs.
  • Native full screen windows (desactivar): No me gusta la forma en que se anima la pantalla cuando a un nuevo espacio en Mac.

Configuración Appearence

  • Tab bar location Bottom
  • Theme Dark
  • Show tab bar even when there is only one tab (activar)
  • Show tab number (desactivar)
  • Show window number (desactivar)
  • Hide scrollbars (activar)

Profile

Acá voy a cambiar muchas cosas, incluyendo los colores de iTerm entre otras opciones de visualización como transparencia de la ventana. Al final mi terminal se ve así:

iTerm personalizado
iTerm personalizado

No utilizo ningún theme en particular, simplemente he modificado los colores a mi gusto del predeterminado.

Hasta ahora, nuestro entorno de desarrollo comienza a mejorar, aunque solo hemos instalado un par de herramientas que nos facilitarán el trabajo.

Instalar Laravel Valet como mi entorno de desarrollo web

Existen muchos otros softwares que te permiten tener un entorno de desarrollo web en tu mac, como por ejemplo: Vagrant, XAMPP, MAMP y muchos más. Yo elijo Laravel Valet porque es lo más simple que puedo instalar sin tener que estar configurando muchas cosas. Aparte, porque solo necesito PHP, MySQL Y Nginx para trabajar.

Instalando PHP

PHP para nuestro entorno de desarrollo web
Instalación de PHP mediante Hombrew

La instalación de PHP es sencilla usando brew. Yo voy a instalar la versión de PHP 7.2
brew update && brew install php@7.2

Ahora, si eres como yo, escribirás luego luego php -v devolviendote:

PHP 7.1.16 (cli) (built: Mar 31 2018 02:59:59) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

Por si no te has dado cuenta, estás usando una ventana de tu consola sin actualizar para que tome los cambios hechos. Solo abre una nueva pestaña y todo estará como queremos:

PHP 7.2.9 (cli) (built: Aug 23 2018 02:08:27) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.9, Copyright (c) 1999-2018, by Zend Technologies

Instalando MariaDB

MariaDB también se instala fácilmente:

brew install mysql

Yo prefiero que MySQL se inicie automáticamente en cada reinicio de mi maquina:
brew services start mariadb
Ahora ya puedes usar MySQL desde la consola usando mysql -uroot

Instalación de MySQL
Instalación de MySQL (MariaDB)

Finalmente instalamos NGINX

Este también es cuestión de preferencia y tú puedes instalar apache si así lo prefieres. Yo lo utilizo más ya que Laravel Valet viene preconfigurado con NGINX y no tengo que estar creando servidores virtuales para cada proyecto en mi computadora.

brew install nginx

La instalación es bastante rápida y no es necesario hacer más, a menos que vayas a utilizar NGINX por sí solo y no vayas a utilizar Laravel Valet.

Instalando Laravel Valet, nuestro entorno de desarrollo web

Laravel Valet es un entorno de desarrollo para Laravel, pero de igual forma podemos instalar un buen número de aplicaciones por si deseamos desarrollar algo para ellas, como por ejemplo:

  • CakePHP
  • Drupal
  • Joomla
  • Magento
  • OctoberCMS
  • Symfony
  • WordPress
  • Zend

Esto no significa que no puedas crear tus propias aplicaciones desde cero, o sea utilizando solo HTML, CSS y Javascript. Laravel Valet es perfecto para proyectos estáticos así como dinámicos con PHP.

Composer

Un requerimiento para poder instalar Laravel Valet, es instalar Composer. La formá más rápida sería utilizar Hombrew, ya que lo tenemos instalado:
brew install composer

Listo, Composer está instalado. Si prefieres instalarlo siguiendo las indicaciones en la web oficial, también puedes hacerlo. Ambas formas son equivalentes y la única diferencia es que brew lo hace automáticamente. Puedes leer más aquí.

Finalmente instalamos Valet.

composer global require laravel/valet
Esperamos unos segundos a que instale y seguidamente usamos el siguiente comando:
valet install
Valet va a installar valet en el sistema y otras dependencias y seguidamente va a configurarse para iniciar cada que el sistema inicie.

Si obtuviste algún error de comando no encontrado, asegurate de incluir en tu PATH la ruta ~/.composer/vendor/bin en mi caso he añadido PATH="$HOME/.composer/vendor/bin:$PATH" al final del archivo .zshrc, ya que estoy usando zsh como mi shell por defecto.

Ahora lo que resta es crear una carpeta donde vas a tener todos tus proyectos, yo la he llamado Sites, y dentro de ella he creado una llamada holamundo; he añadido un archivo index.html con el contenido:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hola mundo</title>
</head>
<body>
    ¡Hola mundo!.
</body>
</html>
Nuestro entorno de desarrollo con Laravel Valet
Nuestro entorno de desarrollo listo

Estando dentro de la carpeta holamundo corramos valet link esto creará un servidor virtual para que puedas visitar tu sitio en http://holamundo.test:

Página Hola Mundo
Página ¡Hola Mundo!

Visitamos la url holamundo.test y listo:

Ya tienes tu servidor de páginas web y y nuestro entorno de desarrollo web está listo. Ahora puedes comenzar a crear páginas utilizando Laravel o cualquier framework PHP de tu gusto. También puedes comenzar a desarrollar plugins o themes para WordPress, Magento y varios softwares más si así lo deseas.

Editores, Node, NPM, Yarn, y otras aplicaciones según tu requerimiento

Y los entornos de desarrollo no estarían completos si no incluyen nuestros editores de código más populares o los preferidos. Yo recomiendo las siguientes aplicaciones que para mi son esenciales para el desarrollo web, y nuestro entorno mejorará aún más.

Git:

Mac trae ya instalada una version de Git, pero para nuestro entorno de desarrollo web, prefiero tener la versión más reciente. brew install git. No olvides añadir tus detalles globalmente:

git config --global user.name "tu nombre"
git config --global user.email "tuemail@dominio.com"

Node y Yarn

Node
brew install node@8
Comprobamos que funcione con node -v y si no devuelve nada, hacemos symlink forzoso usando
brew link node@8 --force

Yarn
brew install yarn --without-node
le pasamos el flag –without-node porque yarn va a intentar instalar la versión más reciente de node, que es la 10.x pero yo necesito trabajar con la versión 8.

rbenv para instalar versiones de Ruby

brew install rbenv
y seguidamente
rbenv init
Sigue las instrucciones para configurar la integración con tu shell.
cerramos la consola y la volvemos a abrir para que tomen efecto los cambios.

Editores y otras aplicaciones

  • Visual Studio Code: Uno de mis favoritos por estar bastante completo y por su rapidez.
  • Sublime Text 3: Este no lo utilizo mucho para escribir código por periodos largos, pero si cuando quiero editar algo ya que es un editor muy rápido. Utilizo la versión gratuita que es indefinida pero muestra una ventana animándote a comprarlo de vez en cuando.
  • PHPStorm: Este es mi editor favorito, es de pago así que si quieres usarlo necesitas comprarlo pero puedes descargarlo y probarlo por 30 días.
  • Gitkraken: para manejar mis repos en github.
  • SequelPro: para administrar tus bases de datos.

Es todo lo que necesitamos por ahora, espero te sirva de algo esta lista. Es posible que haga cambios eventualmente, conforme instale otras aplicaciones que haya olvidado. Ahora que ya tienes un entorno de desarrollo web, solo resta ponerse a trabajar y crear algo bonito.

No olvides dejar tu comentario y dinos cuales otras instalas tú.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *