Configuración de un entorno de desarrollo web | Mac OS X

Cristian Moreno
5 min readJun 14, 2018

TL; DR Instalar lo siguiente: Oh My Zsh, Home Brew, Git, NVM, Alias.

khriztianmoreno’s Mac Setup

Si está buscando ingresar al desarrollo web y aún no has configurado tu Mac, este artículo es para ti. Pero si eres un desarrollador web pero eres nuevo en Mac y aún no has configurado tu entorno de desarrollo, este artículo igualmente es para ti.

Este documento describe cómo configuré mi entorno de desarrollador en una nueva MacBook. Configuraremos entornos Node (JavaScript), principalmente para el desarrollo de JavaScript. Mientras lee y sigue estos pasos, no dude en enviarme cualquier comentario o comentario que pueda tener.

Actualización del sistema

Lo primero que debe hacer, en cualquier sistema operativo, es actualizar el sistema. Para eso: Apple Icon > Software Update…

Preferencias del Sistema

Si se trata de una computadora nueva, hay algunas modificaciones que me gusta hacer a las Preferencias del sistema. Siéntete libre de seguirlas o ignorarlas, dependiendo de tus gustos personales.

En Apple Icon > System Preferences:

  • Trackpad > Tap to click
  • Keyboard > Key Repeat > Fast (todo el slide a la derecha)
  • Keyboard > Delay Until Repeat > Short (todo el slide a la derecha)
  • Dock > Automatically hide and show the Dock

Terminal (iTerm2)

Como vamos a pasar mucho tiempo en la línea de comandos, instalemos un terminal mejor que el predeterminado. Descargue e instale iTerm2 (la versión más nueva, incluso si dice “versión beta”).

iTerm2 — Preferences

Vamos a cambiar rápidamente algunas preferencias. En iTerm > Preferences…, en la pestaña General, desmarque Confirm closing multiple sessions y Confirme el comando “Quit iTerm2 (Cmd+Q)” en la sección Closing.

En la pestaña Profiles, cree uno nuevo con el ícono “+” y renómbrela con nombre. Luego, seleccione Other Actions… > Set as Default. Finalmente, en la sección Windows, cambie el tamaño a algo mejor, como Columns: 125 y Rows: 35.

Cuando termine, presione la “X” roja en la esquina superior izquierda (el guardado es automático en los paneles de preferencias de OS X). Cierra la ventana y abre una nueva para ver el cambio de tamaño.

Homebrew

Los administradores de paquetes hacen que sea mucho más fácil instalar y actualizar aplicaciones (para sistemas operativos) o bibliotecas (para lenguajes de programación). El más popular para OS X es Homebrew.

Instalar

Una dependencia importante antes de que Homebrew pueda funcionar es las herramientas de línea de comandos para Xcode. Estos incluyen compiladores que te permitirán construir cosas desde la fuente.

Ahora, Xcode pesa algo así como 2GB, y no lo necesita a menos que esté desarrollando aplicaciones para iPhone o Mac. Una buena noticia es que Apple ofrece una manera de instalar solo las herramientas de línea de comandos, sin Xcode. Para hacerlo, debe ir a http://developer.apple.com/downloads e iniciar sesión con su ID de Apple (la misma que usa para comprar iTunes y aplicaciones).

Una vez que llegue a la página de descargas, busque “Command Line Tools” y descargue las últimas herramientas de línea de comandos para Xcode. Abra el archivo .dmg una vez que haya terminado la descarga, y haga doble clic en el instalador .mpkg para iniciar la instalación. Cuando termine, puede desmontar el disco en Finder.

Finalmente, podemos instalar ¡Hombrew! En el terminal pegue la siguiente línea (sin $), presione Enter y siga los pasos en la pantalla:

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

Una cosa que tenemos que hacer es decirle al sistema que use programas instalados por Hombrew (en /usr/local/bin) en lugar del sistema operativo predeterminado. Hacemos esto, agregando /usr/local/bin a nuestra variable de entorno$PATH:

$ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile

Abra una nueva pestaña de terminal con Cmd + T (también debe cerrar la anterior), luego ejecute el siguiente comando para asegurarse de que todo funciona:

$ brew doctor

Alias y Shortcuts en la Terminal

Simplemente descargue los archivos .bash_profile, .bash_prompt, .aliases adjuntos a este documento en su directorio de inicio (.bash_profile es el que se carga, he configurado para llamar a los demás):

$ cd ~
$ curl -O https://raw.githubusercontent.com/khriztianmoreno/mac-dev-setup/master/.bash_profile
$ curl -O https://raw.githubusercontent.com/khriztianmoreno/mac-dev-setup/master/.bash_prompt
$ curl -O https://raw.githubusercontent.com/khriztianmoreno/mac-dev-setup/master/.aliases

Con eso, abra una nueva pestaña de terminal (Cmd + T) y vea el cambio! Pruebe los comandos de lista: ls, ls -lh (con alias a ll), ls -lha (con alias a la).

Para mayor información consultar sobre dotfiles

Oh-My-Zsh

Oh-My-Zsh es un marco de código abierto impulsado por la comunidad para administrar su configuración de ZSH. Viene incluido con un montón de útiles funciones, ayudantes, complementos, temas y algunas cosas que te hacen gritar, para instalar solo es necesario escribir la siguiente linea en tu terminal:

$ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Git

¿Qué es un desarrollador sin Git? Para instalar, simplemente ejecuta:

$ brew install git

Cuando termine, para probar que se instaló bien, puede ejecutar:

$ git --version

Y $ which git debería generar /usr/local/bin/git.

Vamos a configurar una configuración básica. Descargar el archivo .gitconfig a su directorio de inicio:

$ cd ~
$ curl -O https://raw.githubusercontent.com/khriztianmoreno/mac-dev-setup/master/.gitconfig

Se agregará algo de color a los comandos de status, branch, y diff, así como un par de alias. Siéntase libre de echar un vistazo a los contenidos del archivo y agregarlo a su gusto.

A continuación, definiremos su usuario de Git (debería ser el mismo nombre y correo electrónico que utiliza parar GitHub y Heroku):

$ git config --global user.name "Your Name Here"
$ git config --global user.email "your_email@youremail.com"

Se agregarán a su archivo .gitconfig

NVM: Node Version Manager

Simple bash script para gestionar múltiples versiones activas de node.js

Instalar

Para instalar o actualizar nvm, puede usar el [script de instalación] [2] usando cURL:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

o Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

El script clona el repositorio nvm en ~/.nvm y agrega la línea fuente a su perfile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Con esto listo, tenemos la base de nuestro ambiente de desarrollo, ahora el siguiente paso es instalar nuestro editor de código preferido, en mi caso es VS Code, algún motor de bases de datos (MongoDB, PostegreSQL) todo esto de acuerdo a tu stack de trabajo.

Pueden encontrar mayor información sobre otros elementos a instalar en tu ambiente en mi repositorio de github: mac-dev-setup

La mejor de las suertes!

--

--

Cristian Moreno

FullStack Javascript Developer and Community builder. Javascript Lover 👨🏻‍💻♥️👨🏻‍🏫 Co-Organize of @MedellinJS @avanet