Front-end Setup with Ubuntu 18

Karen Menezes on May 12, 2018

Code

To cut a long story short, I've been working on a 2013 Dell machine that's been on its last legs since a long time, broken hinge and missing LCD bevel included. The hardware storm finally escalated four days ago, when the hard disk revealed bad sectors.

I've replaced the faulty disk with a brand new 5400RPM 1TB HDD, as I narrow down on my next laptop. I like to use a laptop for at least 5-7 years, and take a long time to choose a new one. I'm looking at either an Intel i5/i7 8th Generation lightweight machine, with hybrid storage and at least 8GB of RAM. In the interim, I'm setting up my projects, and downloading all the packages and softwares I need to work on my beautiful, broken laptop.

I've been working on design and front-end projects for seven years, and have amassed projects with complicated configurations, since I've been freelancing on the front-end for several of those years.

I switched over to Linux about five years ago, and couldn't be happier. Inkscape and Gimp aren't too bad if you get used to the quirks. I now use the excellent cross-platform design tool, Gravit, which makes working with vectors, rasters and web design a breeze. Between all the companies, projects and developers I've worked with, I've accumulated PHP, Python / Django, Ruby on Rails, and Node projects. For front-end tooling, Gulp, Sass, and Autoprefixer are what I commonly encounter nowadays. I generally install Javascript tools like Webpack locally per project, so I haven't mentioned it in the list below.

My go-to strategy is to install the following first, after the essentials: Version control via Git and version management for Python, Ruby and Node.

Frankly, it's quite painful to set up from scratch, so I've documented the process this time round, and hope it will come in handy for someone out there.

The code below should work for Ubuntu 18.04 installations. Replace what's in curly braces with appropriate names, version numbers, etc.

Essentials

# Update Packages
sudo apt update

# Upgrade Packages
## Upgrade Packages: Fetch new versions of packages
sudo apt upgrade

# Curl
sudo apt install curl

# LibSSL
sudo apt install libssl1.0-dev

# C Compiler
sudo apt install build-essential

# Libreadline-dev
sudo apt install libreadline-dev zlib1g-dev

Version Control

# Git
sudo apt install git

## Git: Set Username
git config --global user.name "{add_your_username_here}"

## Git: Set Email
git config --global user.email "{add_your_email_address_here}"

## Git: Show branch name by default in CLI: Add the following to .bashrc file
parse_git_branch() {
     git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
export PS1="\u@\h \[\033[32m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\] $ "

Apache Webserver

# Apache
sudo apt install apache2

Database: MySQL

# MySQL
sudo apt install mysql-server

ImageMagick

sudo apt install imagemagick

Database: PostgreSQL

# Postgres
sudo apt install postgresql

# Libpq-dev
## Libpq-dev: PostgresSQL Binaries and Headers
sudo apt install libpq-dev

PHP

## PHP
sudo apt install php{add_version_you_want_here} libapache2-mod-php{add_version_you_want_here}

# Apache: Restart Apache Server
sudo /etc/init.d/apache2 restart

phpMyAdmin

## Phpmyadmin
sudo apt install phpmyadmin php-mbstring php-gettext

Python

# Python
sudo apt install python

sudo apt install python-pip

sudo apt install python3-pip

## Python: VirtualEnv: For creating isolated Python Environments
pip install virtualenv

## Python: VirtualEnv: VirtualEnvWrapper
pip install virtualenvwrapper

## Python: VirtualEnv: VirtualEnvWrapper: Add these lines to .bashrc file
export WORKON_HOME=$HOME/.virtualenvs
source ~/.local/bin/virtualenvwrapper.sh

## Python: VirtualEnv: VirtualEnvWrapper: Reload startup file
source ~/.bashrc

## Python: VirtualEnvWrapper: Example Usage: Create VirtualEnv with specific Python version
mkvirtualenv {make_up_a_virtualenv_name_here}

## Python: VirtualEnvWrapper: Example Usage: Create VirtualEnv with specific Python version
mkvirtualenv  {make_up_a_virtualenv_name_here} -p python{Version}
 or
mkvirtualenv --python=/usr/bin/python3 {make_up_a_virtualenv_name_here}

## Python: VirtualEnvWrapper: Example Usage: Activate Virtualenv on a project
workon {virtual-env-name}

## Python 3 may need another package
sudo apt install python3-distutils

NODE & NVM (For Node version management)

## NVM: Reference Link:
## https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04

## NVM: Download installation script from Github
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
nano install_nvm.sh
bash install_nvm.sh
source ~/.profile

## NVM: Checks which versions of Node are available
nvm ls-remote

## NVM: Install current version
nvm install {add_version_you_want_here}

## NVM: Set node version to default
nvm alias default {add_version_you_want_here}

## NVM: Example Usage: Use a particular node version for a project
nvm use {add_version_you_want_here}

Node-sass

npm install -g node-sass

Autoprefixer

# Autoprefixer
## Autoprefixer: Example Usage: postcss --watch {input-file} -o {output file} --use autoprefixer
npm install -g postcss-cli autoprefixer

Gulp

# Gulp
npm install -g gulp

Ruby & Rbenv (For Ruby version management)

## Rbenv: Reference Link: 
## https://www.digitalocean.com/community/tutorials/how-to-install-ruby-on-rails-with-rbenv-on-ubuntu-16-04

## Rbenv: Install dependencies for rbenv and Ruby
sudo apt install autoconf bison libyaml-dev libncurses5-dev libffi-dev libgdbm3 libgdbm-dev

## Rbenv: Install from Github
git clone https://github.com/rbenv/rbenv.git ~/.rbenv

## Rbenv: Add to Path
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc

## Rbenv: Source
source ~/.bashrc

## Rbenv: Check if set up properly
type rbenv

## Rbenv: Add ruby-build
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build

## Rbenv: List Ruby Versions
rbenv install -l

## Rbenv: Install version of Ruby
rbenv install {add_version_you_want_here}

## Rbenv: Set global version
rbenv global {add_version_you_want_here}

## Rbenv: Example Usage: Use a particular Ruby version for a project
rbenv local {add_version_you_want_here}

## Ruby Gems: Turn off documentation
echo "gem: --no-document" > ~/.gemrc

Bundler

# Bundler
gem install bundler

Rails

gem install rails

GIMP

# Gimp: Install via Ubuntu Software

Inkscape

# Inkscape
## Inkscape: Install via Ubuntu Software

Gravit

# Gravit
## Gravit: Install via Ubuntu Software

Credits

Image by Ubuntubuzz.com

Related Tags

Ubuntu ALL TAGS

karen.menezes@gmail.com