Learn Ruby on Rails Book

Installing Ruby on Rails and VSCode

Installing Ruby on Rails on Mac OS X

Check the version of your operating system. If your version number is 10.9 or higher, follow the next step. If your OS X version is less than 10.9, you should consider upgrading your operating system to 10.9 or higher. It's completely free.

Install XCode Command Line Developer Tools.

1xcode-select --install

Install Homebrew.

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

Install rbenv. Using rbenv we can install a specific version of Ruby.

1brew update
2brew install rbenv

If you don't know which shell you are using then refer to this answer.

If you are using bash shell then execute the following command.

1echo 'eval "$(rbenv init -)"' >> ~/.bashrc

If you are using Z shell then use the following command.

1echo 'eval "$(rbenv init -)"' >> ~/.zshrc

Now close the terminal and start a new terminal.

1rbenv install 2.7.2
2rbenv rehash

Setting default Ruby for our laptop.

1rbenv global 2.7.2

Installing Ruby on Rails gem.

1gem install rails --no-document -v 6.0.3.4

Flag --no-document disables document generation.

Installing Ruby on Rails on Windows or on Linux

At BigBinary we use Mac. Thus, we are not the best people to document how to install Ruby and Ruby on Rails on Windows/Linux. There are plenty of good materials on the internet and on youtube about installing Ruby on Rails and setting up the work environment on Windows/Linux.

Installing Node.js

Different applications use different versions of node. Just like rbenv helps us switch to the right version of Ruby, similarly Node Version Manager (nvm) helps us switch to the right version of node.

Installing nvm

Visit https://github.com/nvm-sh/nvm to see how to install nvm.

Installing a node version using nvm

1nvm install 14.13.1
2nvm alias default 14.13.1

Using VSCode

Installing VSCode

VSCode is short form of Visual Studio Code. VSCode can be downloaded and installed from here. VScode is an open source project.

Configuring indentation

Visual Studio Code is a text editor that allows us to develop applications for Windows, Mac and Linux. It has terrific support for extensions.

VSCode editor allows us to configure different indentations for different languages. The indentation for the Ruby code should be 2 spaces.

Adding .editorconfig

Having an .editorconfig at the root of the project will allow VSCode to use sane editor setting defaults, and it will remain the same way with all users.

Once you create the project in chapter 4, you can add an .editorconfig to the root of the project with the following content.

1touch .editorconfig

Open .editorconfig file and add following lines to the file.

1# VScode respects this. More info at editorconfig.org
2root = true
3
4[*]
5charset = utf-8
6end_of_line = lf
7indent_size = 2
8indent_style = space
9insert_final_newline = true
10trim_trailing_whitespace = true

Refer to https://github.com/bigbinary/wheel/blob/master/.editorconfig if needed.

Language specific editor settings

This is an optional step, since having an .editorconfig already does this for us.

Mac users need to hit (command + shift + P). Windows users need to hit (Ctrl + Shift + P). Now we will see a prompt with >. Start typing Preferences. The menu will show many preferences.

1Preferences: Configure Language Specific Settings

Scroll down and select Configure Language Specific Settings.

This opens the Language Picker and from the listed languages, select Ruby which then opens up the Settings editor with the language entry where we can add applicable settings. In the user settings json file, add the required settings and save the file.

1"[ruby]": {
2        "editor.insertSpaces": true,
3        "editor.tabSize": 2
4  }

The indentation for the language Ruby is now set to 2 spaces.

Now let's do the same for JavaScript.

1"[javascript]": {
2        "editor.insertSpaces": true,
3        "editor.tabSize": 2
4  }

Installing Prettier Plugin

This is an optional step, since we will be making use of eslint in later sections to run prettier before committing.

To make code more readable and consistent we need to install Prettier plugin. This tool integrates with Visual Studio Code so that code is automatically formatted every time changes are saved.

Installing the Prettier Visual Studio Code Plugin

  • Hit Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows.
  • Select "Extensions: Install Extensions".
  • Search for Prettier plugin.
  • Click "Install" and then "Reload" button after the installation.
Run Prettier every time a JavaScript file is saved

This is also an optional step.

  • Hit Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows.
  • Type "Preferences: Open Workspace Settings".
  • We will see two options.
  • Select the option that has the word JSON.
  • Paste the below content in Settings file.
1{
2  "folders": [],
3  "settings": {},
4  "[javascript]": {
5    "editor.formatOnSave": true
6  }
7}