Category Archives: Web Development

Web Development Tools, Tips and resources for beginner developers!

deploying-rails-app to vps

How to Deploy Rails Application to VPS

It seems like your cool rails application is ready to go wild, That’s great! sooner the better. Before you made up your mind for deploying rails application to a VPS – you should know that it’s not a very easy (and only) process. You could have deployed using some other way e.g Heroku, probably much faster.

Manually deploying your rails application to a VPS can be very frustrating for beginners but if you’re willing to learn all those stuffs (GNU/Linux, terminal commands, server administration stuffs and more) or may be you want full control over the things – then probably you made the best choice.

deploying-rails-app to vps

“step by step” guide for deploying a Rails application to VPS

1. get a VPS and install Ubuntu 12.04 LTS

If you don’t already own a VPS then buy one. I recommend Linode (I’ve been using it for my blog as well as for other rails applications, I absolutely love their service). They’ve plans starting at $20/month for 512MB 1024MB 2048 RAM. (which should be sufficient for testing and launch, you can upgrade easily so start with small one, unless you’re sure how much memory you need).

Checkout Linode VPS plans (starting @ $20/month)

Another Great Option – Digital Ocean (starting @$5/mo, 20 GB SSD, 1TB Data, 512 MB RAM, free backups and more!) You can use promo code DEPLOY2DO to get $10 credit (worth two months of free hosting), so you can give it a try without any risk.

I’ve written more about it recently – Digital Ocean Hosting Review.

After getting a VPS ready (usually within few minutes), choose an operating system – I recommend Ubuntu (unless you’ve some specific choice, due to some previous experience with a GNU/Linux distribution such as ArchLinux, Debian etc) – select latest LTS release, ie Ubuntu 12.04 LTS (precise pangolin).

Update! Now, Ubuntu 14.04 LTS is out and available. So, you should choose that. You may need to change few commands below. Although, if you go with 12.04, you can always upgrade.

2. Setting up the Server

When, the vps is ready (within few minutes, after you deploy and boot the server), SSH into the server and use your root account to login (you would get the root password from vps provider’s panel, while deploying the OS, in the above step #1).

 ssh root@vps_ip_address

Now, first update the repository cache and the packages.

apt-get -y update
apt-get -y upgrade

Creating a user

Using root account is not a good idea (of course for security reasons, that’s why there is something called sudo, that would allow you to execute commands with root privilages). So lets create a user, e.g mrhuman, add him to sudo group (so that he can execute commands with root power).

adduser mrhuman --ingroup sudo

(it will ask you to enter some details, as well as the password for the user)

Using password authentication is not secure and it’s also not very efficient. Logout from the current session or switch to the newly created user with su user_name command. In next step, we will be setting up the ssh-authentication.

setup ssh authentication

If you’ve not already generated public/private keys (most likely you already have a pair of public/private keys, e.g you might have generated it for github or bitbucket), then generate one and upload your public key to the vps server.

Type the command(on your local computer)

ssh-keygen
scp ~/.ssh/id_rsa.pub mrhuman@vps_ip_address:

Login to the remote server with newly created user(mrhuman, in this case) and type

mkdir .ssh
mv id_rsa.pub .ssh/authorized_keys

3. Install nginx server

In this guide I assume you’re using nginx server, Apache is another great option. Before installing nginx, first install the utility – python-software-properties, for installing packages via PPA, sometimes the packages available in repository are very outdated.

sudo apt-get -y install python-software-properties

Then install nginx from the PPA.

apt-add-repository -y ppa:nginx/stable
apt-get -y update
apt-get -y install nginx

After installing nginx you can type

sudo service nginx start

to start the nginx and visit the IP address your server, you should see the default page there.

4. Install ruby and other dependencies/gems

For managing ruby versions you should choose RVM or rbenv. In this guide I’m going with rbenv.

Before installing rbenv, lets install some common dependencies such as curl, git version control system, javascript runtime such as nodejs etc.

Installing nodejs

sudo apt-add-repository -y ppa:chris-lea/node.js
sudo apt-get -y update
sudo apt-get -y install nodejs

Installing curl and git

sudo apt-get -y install curl git-core

Now, install rbenv using an installer

curl https://raw.github.com/fesplugas/rbenv-installer/master/bin/rbenv-installer | bash

Add rbenv to your path variable

After installing rbenv, Just add the following lines to the top of your ~/.bashrc file.

export RBENV_ROOT=\"\${HOME}/.rbenv\"
if [ -d \"\${RBENV_ROOT}\" ]; then
  export PATH=\"\${RBENV_ROOT}/bin:\${PATH}\"
  eval \"\$(rbenv init -)\"
fi

Now, reload the shell by tying the command –

source ~/.bashrc

Install dependencies with rbenv-installer script

rbenv bootstrap-ubuntu-12-04

Installing Ruby

rbenv install 1.9.3-p327
rbenv rehash
rbenv global 1.9.3-p327

Installing Bundler & Rake

gem install bundler --no-ri --no-rdoc
gem install rake --no-ri --no-rdoc
rbenv rehash

Install MySQL and Create database/user

I assume you’re using MySQL in production (or whatver like Postgresql, MongoDB etc, you need to install the required packages/dependenices and create database/user).

Installing MySQL

sudo apt-get -y install mysql-server libmysql++-dev

Now, create database and users (enter the root password, as entred in above step)

mysql -u root -p
create database YOUR_DB_NAME;
grant all on YOUR_DB_NAME.* to DB_USER@localhost identified by 'your_password_here';
exit

5. Setting up Capistrano for Deployment

Now, it’s time to set up capistrano for automating the deployment process. You would also need to have the source code hosted on a private repository (unless you want the source code to be available public) such as on github or bitbucket and add the remote repository to list of identified hosts (to avoid some error during deployment). Simply, ssh into the remote host (remote repository) e.g ssh github.com or ssh bitbucket.org(if you’re using bitbucket) from the remote server.

add following gems into your Gemfile.

gem 'mysql2'
gem 'unicorn'
gem 'capistrano'

and install those gems, by running bundle install.

Now, type the command(of course, in root of your application directory)

capify .

It will create few files that you need to change. First update your Capfile (for the assets section), it should look like this:

Then, update database.yml file (!warning, you shouldn’t put this kind of file in git repository).

Next, add unicorn.rb and unicorn_init.sh (make it executable by running chmod +x unicorn_init.sh) file to config directory.

Next unicorn_init.sh,

Then update config/deploy.rb file.

Don’t forget to change the variable names in above files (e.g replace YOUR_APP_NAME by your application name, git repository URL by your_repository address and more!)

6. Deploy!

That’s all, now it’s time to deploy!

I assume you’re already using git, so commit the latest changes and push it to master branch.

git add .
git commit -am "add deployment configs"
git push master

First setup the deployment configurations using the command –

cap deploy:setup

Then deploy it,

cap deploy

If things look OK (in fact, it may take a while and you may get some errors, just read the messages and act accordingly, rather than freaking out) then open the browser and visit the IP address (or domain, now you can set up DNS for the VPS)

Run the database migrations and start.

cap deploy:migrate
cap deploy:start

Now, Your Rails app should be running fine, any problem? Drop a comment here, we’ll look into that.

Reference(s) and Recommended Link(s)

Use CSS Frameworks to speed up the Web design process!

You know CSS but can’t get the work done on time or maybe you don’t want to write the same code(basic grids, buttons, form styles etc) again and again. Then you should try a CSS framework/toolkit as it helps in getting things done, much quickly. With a CSS framework, you can create prototypes/MVP very fast as compare to scratch work.

When you get a solid foundation to begin, just with few lines of code, you can create nice looking UI for your website/apps/whatever. You can customize it further for a unique look/feel (recommended because default is not enough in most cases).

Here are some of the best free and open source CSS frameworks/toolkits/grids you must give it a try.

grid is enough for me!

1.susy

susy is an amazing grid for those who want complete control over the grid generation, mostly popular among compass/sass programmers. Susy is responsive (yeah! if you use susy your website will look cool on every devices), but you can get fixed structure if you want.

susy-grid

Installing Susy

susy depends on ruby, so you must have ruby installed. Then you can install susy –

gem install susy

If you want to try susy in rails project, then simply add gem "susy" to the Gemfile and run bundle install.

Finally, add susy using the sass import.

@import "susy";

Update! If you prefer Bourbon over Compass, then you should check out Neat.

2. 960 grid system

Another lightweight grid, with 960px width (with 12/16 columns by default, but you can easily customize it according to your need), a very popular rapid prototyping tool for designers.

Download 960 grid system

3. 1Kb grid

It’s a very simple and super-light (that’s why it’s called 1 Kb) grid system for designers. You can easily customize the number of columns, gutter width, column width before download (default is 12 columns, 60px wide, 20px gutter width; which leads to the total width of 960px).

Download 1Kb grid

grid + some cool stuffs

4. Blueprint CSS

blueprint is another popular css framework with fixed grid system and nice styles for buttons, forms, tables, tabs, sprites and more. It’s easily customizable.

Download Blueprint

grid + lot of cool stuffs

5.Foundation

Foundation is an advanced and feature rich front end framework. it’s responsive, it has flexible grid system, with lots of styles for various components (like tables, buttons, tabs), icons, templates and more. So, you can rapidly create nice mockups , probably in minutes. It uses SASS, so customization is very easy, specifically for ruby/sass.

Download Foundation

6.Twitter Bootstrap

Twitter Bootstrap is the most popular front-end framework , Most of the features look very similar to Foundation but it uses LESS, so more popular among javascript programmers. Although, sass version is also available, for Ruby/Rails developers (as a gem). Customization is very simple due to the various free tools and themes available (I’ll write a post about it), like bootswatch, where you can find a lot of free and open source bootstrap templates to begin with.

Download Twitter Bootstrap

Update! You should also check out some lightweight CSS frameworks such as PureCSS (recently launched) or Skeleton (mature and well tested, under 10KB). Both are responsive (mobile friendly) and provide a nice boilerplate to begin with.

nginx

How to Install Nginx web server on Ubuntu 12.04/12.10

Nginx is a lightweight web server (HTTP, SMTP, IMAP, POP3 ..). It has very low memory footprints with higher degree of concurrency. It’s a free and open source software, runs on all major OS (Unix, Linux, BSD, Mac OS X, Microsoft Windows and more).

nginx

Setup Nginx on Ubuntu (12.04) LTS Server

Nginx is already available in Ubuntu repository, but it’s very outdated (it may be ok for development or testing but not for deployment) so for production environment you should install the newer version – either from the source or PPA.

1. Update

sudo apt-get -y update
sudo apt-get -y upgrade

2. Dependencies

For adding ppa you need to install the python-software-properties package.

sudo apt-get -y install python-software-properties

3. Install nginx

sudo apt-add-repository -y ppa:nginx/stable
sudo apt-get -y update
sudo apt-get -y install nginx

4. Start the server!

sudo service nginx start

Now, move on to the address (IP address of your VPS or the domain name or the localhost(in case of development environment)). You should see the default page served by nginx.

5. setup server configs

For editing file over the ssh, you can use a command line editor such as Vi or Nano. I recommend nano if you want a text editor without any learning curve.

Install Nano, a lightweight text editor

sudo apt-get -y install nano

Then create a server configuration file for your app/site. (you could also just edit the global config(/etc/nginx/nginx.conf), it’s fine if you’ve only one app/site running on a virtual private server but if you plan to deploy multiple apps/websites to a single VPS – then you should create seperate configs for each website)

sudo nano /etc/nginx/sites-available/example.com

After creating the config file (if you don’t know how – then read the official tutorials), create a symlink

sudo ln -nfs /etc/nginx/sites-available/example.com  /etc/nginx/sites-enabled/example.com

Now, restart the server!

sudo service nginx restart
style-editor

Top 10 Firefox add-ons for web developers

Mozilla Firefox has some cool developer tools (Style Editor, Scratchpad, Debugger, Responsive Design View, Inspect(3D view) and more) by default, but you can further extend them with some of the great add-ons/extensions listed here.

1. Firebug

Firebug has lot of useful features (edit, debug, monitor your code in live mode) that makes web development much easier. It’s a must have add-on for web developers.

Download Firebug

2. Rainbow Color Tools

it provides a bunch of color tools for web development – easy to use color picker, color library, inspector, analyzer(to analyze the color scheme of a website)etc.

Download Rainbow Color Tools

3. Wappalyzer

It tells you about the softwares(libraries, frameworks, server etc) used by a website.

Download Wappalyzer

4. ShowIP

It shows the IP address of the website, in status bar; additionally, you can also query whois, hostname, netcraft etc.

Download ShowIP

5. fontinfo

It’s good for exploring the fonts used on a website (with the font panel or show fonts section in right click menu)

Download fontinfo

6. Web Developer

add some cool web development tools.

Download Web Developer

7. User Agent Switcher

Using this extension, you can easily switch the user agent of the browser.

Download User Agent Switcher

8. Greasmonkey

To customize the web page (how it behaves or displays content), using small bits of javascript.

Download Greasmonkey

9. Modify Headers

To modify the http request headers sent to servers.

Download Modify Headers

10. FireFTP

It’s a cross-platform FTP/SFTP client for Mozilla Firefox.

Download FireFTP

buy and sell bootstrap themes

BootstrapThemes.me : a marketplace for Twitter Bootstrap Themes!

What is Twitter Bootstrap ?

Twitter Bootstrap is a front end framework (free and open source) for web designers/developers. With bootstrap you can easily create cool looking awesome designs with HTML5, CSS3 and jQuery (cool? yeah!).

If you’re a web designer/developer, then bootstrap may save you a lot of time, instead of working from scratch, you can start working on the top of a solid foundation (960 px grid, styles for buttons, tables, forms etc, jquery plugins, responsive etc comes along with Twitter Bootstrap).

BootstrapThemes.me – where you can buy or sell “bootstrap themes and templates”

 

Twitter Bootstrap gives you a solid foundation to begin, by default it looks cool for mockups and prototypes but the default look is not good for final release. That’s where bootstrap themes comes in.

BootstrapThemes.me

 

There are already few marketplaces for Twitter Bootstrap Themes ? Why another one ?

The problem with the available marketplaces (like ThemeForest) is that – they cut a large percentage of sale (as the service charge). They pay somewhere between 50-70%. All designers start with 50% (until he cross some cut-offs, e.g after 18.75k, he will get 55%, after $75k, he will receive 70%). I didn’t like that, so I created another marketplace for Twitter Bootstrap Themes. They are over-crowded too,

at, BootstrapThemes.me, designers get 70-80% of the sale.

buy and sell bootstrap themes

so whether you’re a designer want to develop themes for bootstrap or a developer looking for bootstrap themes,

visit BootstrapThemes.me for Bootstrap goodies!

 

UPDATE! It’s closed now. But you can checkout my other site about portfolio templates.