DEV Community

Cover image for Configuración de un entorno de desarrollo web | Mac OS X
Khriztian Moreno
Khriztian Moreno

Posted on

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

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

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 — PreferencesiTerm2 — 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)"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)"
Enter fullscreen mode Exit fullscreen mode

Git

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

$ brew install git
Enter fullscreen mode Exit fullscreen mode

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

$ git --version
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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](https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh) | bash
Enter fullscreen mode Exit fullscreen mode

o Wget:

wget -qO- [https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh](https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh) | bash
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)