The Complete Ruby on Rails 6 Web Development Course 2020 - notes

0 Sign up for AWS C9 IDE!

## AWS ##

# All AWS C9 envments
https://eu-central-1.console.aws.amazon.com/cloud9/home?region=us-east-1

# Instance management
https://console.aws.amazon.com/ec2/home?region=eu-central-1#Instances:sort=instanceId

# Create AWS C9 environment
https://eu-central-1.console.aws.amazon.com/cloud9/home/create

Setting - set tabs to 2
Ctrl+E to search file
Alt+T - new terminal
Alt+W - close current tab
Ctrl+] - next tab
Ctrl+[ - prev tab

1 Install RoR!

# install latest version of Ruby, Rails, Postgresql, Yarn, Webpacker
rails -v
ruby -v
rvm list
rvm install ruby-2.7.1
rvm --default use 2.7.1
rvm uninstall 2.7.0
rvm uninstall 2.6.3
rvm uninstall 2.6.5
gem install rails -v 6.0.3
# gem install bundler:2.1.4
gem update rails
gem update --system
# YARN for webpacker: https://classic.yarnpkg.com/en/docs/install/#debian-stable
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install postgresql libpq-dev redis-server redis-tools yarn
yarn
ruby -v
rails -v
pg_config --version

ALTERNATIVE APPROACH TO POSTGRESQL
https://medium.com/@hschin/developing-in-rails-on-aws-cloud9-c0ac7ef2431b
sudo vim /var/lib/pgsql96/data/pg_hba.conf

2 Create app, configure PostgreSQL!

# create rails app
rails new rubygems --database=postgresql
cd rubygems
bundle

# postgresql setup
sudo su postgres
createuser --interactive
ubuntu
y 
exit

# bundle exec rails webpacker:install
yarn
yarn upgrade
# config/webpacker.yml
    port: 8082
    public: https://2b8c1faf3a934c25b7e01d446161bfff.vfs.cloud9.us-east-1.amazonaws.com:8082
bundle exec rails s -p 8080
bin/webpack-dev-server

# to make the server work, add the url to development.rb
config.hosts << "2b8c1faf3a934c25b7e01d446161bfff.vfs.cloud9.us-east-1.amazonaws.com"

# start server
rails db:create 
rails db:migrate
# to run without depreciation warnings
# RUBYOPT='-W:no-deprecated -W:no-experimental' rails server 
rails s

3 github!

http://github.com/

git config --global user.name "Yaro"
git config --global user.email [email protected]

git init
git status
git add -A
git commit -m 'initialize app'
# https://github.com/new
git remote add origin https://github.com/yshmarov/rubygems.git
git push -u origin master

// delete last commit from github
git reset HEAD^ --hard
git push -f

// git uncheck last commit
git reset --soft HEAD~1

// git reset to specific commit
git reset --hard c14809fa

4 Install Heroku and push

http://heroku.com/

# creating the first page
rails g controller home index
# Add the following line to routes.rb
root 'home#index'

git add -A
git commit -m 'add home index controller'

# installing heroku
npm uninstall -g heroku-cli
sudo snap install heroku --classic
npm install -g heroku
heroku create
git remote -v
git push heroku master
heroku run rake db:migrate

# if you want to connect to an existing heroku app
heroku git:remote -a yourappnamegoeshere

# see logs
heroku logs --tail
# to run console activerecord commands
heroku run rails c
# restart
heroku restart

_navbar.html.haml!

%nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
  %a.navbar-brand{:href => "/"}
    Navbar
  %button.navbar-toggler{"aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#navbarSupportedContent", "data-toggle" => "collapse", :type => "button"}
    %span.navbar-toggler-icon
  #navbarSupportedContent.collapse.navbar-collapse
    - if current_user
      %ul.navbar-nav.mr-auto
        %li.nav-item{class: "#{'active font-weight-bold' if current_page?(root_path)}"}
          = link_to root_path, class: 'nav-link' do
            .fa.fa-home
            Home
      .form-inline.my-2.my-lg-0
        = form_tag(root_path, method: :get) do
          .input-group
            = text_field_tag :name, params[:name], autocomplete: 'off', placeholder: "Search", class: 'form-control-sm'
            %span.input-group-append
              %button.btn.btn-primary.btn-sm{:type => "submit"}
                %span.fa.fa-search{"aria-hidden" => "true"}
      %ul.navbar-nav.mr-right
        %li.nav-item{class: "#{'active font-weight-bold' if current_page?(root_path)}"}
          = link_to root_path, class: 'nav-link' do
            .fa.fa-home
            Another link
        %li.nav-item.dropdown
          %a#navbarDropdown.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
            %b= current_user.email
          .dropdown-menu.dropdown-menu-right{"aria-labelledby" => "navbarDropdown"}
            = link_to edit_user_registration_path, class: "dropdown-item #{'active' if current_page?(edit_user_registration_path)}" do
              .fa.fa-cog
              %b Account settings
            = link_to destroy_user_session_path, method: :delete, class: "dropdown-item" do
              .fa.fa-sign-out-alt
              %b Sign out
    - else
      %ul.navbar-nav.mr-auto
      %ul.navbar-nav.mr-right
        %li.nav-item{class: "#{'active font-weight-bold' if current_page?(new_user_registration_path)}"}
          = link_to 'Register', new_user_registration_path, class: 'nav-link'
        %li.nav-item{class: "#{'active font-weight-bold' if current_page?(new_user_session_path)}"}
          = link_to 'Login', new_user_session_path, class: 'nav-link'

action_text!

https://edgeguides.rubyonrails.org/action_text_overview.html

// Console
rails action_text:install

// application.js
require("trix")
require("@rails/actiontext")

// actiontext.scss
@import "trix/dist/trix";

// application.scss
@import "./actiontext.scss";

// app/models/course.rb
class Course < ApplicationRecord
  has_rich_text :description
end

// app/views/courses/_form.html.erb
<%= f.label :description %>
<%= f.rich_text_area :description %>

add alerts and notices

// application.html.haml
= render 'layouts/messages'

// _messages.html.haml
- flash.each do |name, msg|
  - if msg.is_a?(String)
    %div{:class => "alert alert-#{name.to_s == 'notice' ? 'success' : 'danger'}", :role => "alert"}
      %button.close{"aria-hidden" => "true", "data-dismiss" => "alert", :type => "button"} ×
      = content_tag :div, msg, :id => "flash_#{name}"

aws s3

create s3 bucket with default settings
create IAM role (no password, only console, AmazonS3FullAccess)

# production.rb : 
config.active_storage.service = :amazon_production

# storage.yml :
amazon_production:
  service: S3
  access_key_id: "XXX"
  secret_access_key: "XXX"
  bucket: "XXX"
  region: "XXX"

basic search in navbar

// courses_controller.rb

def index
  if params[:title]
    @courses = Course.where('title ILIKE ?', "%#{params[:title]}%") #case-insensitive
  else
    @courses = Course.all
  end
end

// _header.html.haml

.form-inline.my-2.my-lg-0
  = form_tag(courses_path, method: :get) do
    .input-group
      = text_field_tag :title, params[:title], autocomplete: 'off', placeholder: "Find a course", class: 'form-control-sm'
      %span.input-group-append
        %button.btn.btn-primary.btn-sm{:type => "submit"}
          %span.fa.fa-search{"aria-hidden" => "true"}

course belongs_to user

// Console

rails g migration AddUserToCourses user:belongs_to
rake db:drop db:create db:migrate db:seed

// seeds.rb:

User.create!(email: '[email protected]', password: '[email protected]', password_confirmation: '[email protected]')

30.times do
  Course.create!([{
    title: Faker::Educator.course_name,
    description: Faker::TvShows::GameOfThrones.quote,
    user_id: User.first.id
  }])
end

credentials

CREATE CREDENTIALS & EDIT

rails credentials:edit 
EDITOR=vim rails credentials:edit

WORKING WITH VIM

For inserting
Press i //Do required editing
For exiting
Press Esc
:wq //for exiting and saving
:q! //for exiting without saving

FIND A CREDENTIAL

rails c
Rails.application.credentials.dig(:aws, :access_key_id)
or if an env variable is used
Rails.application.credentials[Rails.env.to_sym][:aws][:access_key_id]

In production:
heroku config:set RAILS_MASTER_KEY=123456789
or
heroku config:set RAILS_MASTER_KEY=`cat config/master.key`

devise

- if current_user
  = current_user.username
  = link_to 'Account settings', edit_user_registration_path
  = link_to 'Sign out', destroy_user_session_path, method: :delete
- else
  = link_to 'Sign Up', new_user_registration_path
  = link_to 'Log In', new_user_session_path

faker & seeds!

https://github.com/faker-ruby/faker
// Gemfile
gem 'faker'

// seeds.rb
30.times do
  Course.create!([{
    title: Faker::Educator.course_name,
    description: Faker::TvShows::GameOfThrones.quote
  }])
end

// Console
rails db:seed

fontawesome!

https://fontawesome.com/icons
https://github.com/FortAwesome/font-awesome-sass
// Gemfile
gem 'font-awesome-sass', '~> 5.12.0'

// application.scss
@import "font-awesome-sprockets";
@import "font-awesome";

.fa.fa-flag

or a link
= link_to root_path, class: 'btn btn-success' do
  .fa.fa-flag
  Homepage

CORRECT WAY
source1 https://code-and-cookies.com/2020/01/new-rails-6-project/
source2 https://railsbytes.com/public/templates/VZgskX
//console
yarn add @fortawesome/fontawesome-free
// app/javascript/stylesheets/application.scss
@import '@fortawesome/fontawesome-free';
// app/javascript/packs/application.js
import "@fortawesome/fontawesome-free/js/all";
<i class="far fa-address-book"></i>

Alternative way:
//console
yarn add @fortawesome/fontawesome-free
//application.scss
import "@fortawesome/fontawesome-free/css/all.css";

gem bootstrap!

https://getbootstrap.com/
https://github.com/twbs/bootstrap-rubygem
// Gemfile.rb
gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'

// Console
bundle install

// application.scss
@import "bootstrap";
body { background: #f8f0e6; }


// Console
yarn add [email protected] jquery popper.js
OR
yarn add jquery popper.js bootstrap

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment

// packs/application.js
import "bootstrap"

// good documentation on this:
// https://www.mashrurhossain.com/blog/rails6bootstrap4
#### ALTERNATIVE ####
https://railsbytes.com/public/templates/x9Qsqx
+
//app/views/layouts/application.html.erb
 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+
//app/javascript/packs/application.js
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'


_________________BETTER WAY WITHOUT GEM__________________
console:

yarn add jquery popper.js bootstrap
environment.js:

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment
rename application.css to application.scss and add:

@import "bootstrap/dist/css/bootstrap";
application.js:

import 'bootstrap/dist/js/bootstrap'

get more free space!

#CLEAN UP SPACE
docker image prune -a
docker container prune --filter "until=24h"

haml-rails!

https://github.com/haml/haml-rails

// Gemfile
gem "haml-rails", "~> 2.0"

// Console
rails haml:erb2haml

http://htmltohaml.com
https://haml2erb.org

installing Rails5!

#Ruby on Rails
rvm install ruby-2.7.1
rvm --default use 2.7.1
rvm uninstall 2.6.5
rvm uninstall 2.6.6
rvm uninstall 2.6.3
gem install rails -v 5.2.4.3

#Postgresql
sudo apt install postgresql libpq-dev
sudo su postgres
createuser --interactive
ubuntu
y 
exit

scaffold Course!

*Console*
rails generate scaffold Course title:string description:text
rake db:migrate
// course.rb
validates :title,  presence: true
validates :description, presence: true, length: { :minimum => 5 }

search by an attribute!

// courses_controller.rb

def index
  if params[:name]
    @courses = Course.published.approved.where('name ILIKE ?', "%#{params[:name]}%") #case-insensitive
    #@courses = Course.where('name LIKE ?', "%#{params[:name]}%") #case-sensitive
    #@courses = Course.where('LOWER(name) LIKE LOWER(?)', "%#{params[:name]}%") #make lowercase
  else
    @courses = Course.published.approved.all
  end
end

// in any view:

.form-inline.my-2.my-lg-0
  = form_tag(posts_path, method: :get) do
    .input-group
      = text_field_tag :name, params[:name], autocomplete: 'off', placeholder: "Find a post", class: 'form-control-sm'
      %span.input-group-append
        %button.btn.btn-primary.btn-sm{:type => "submit"}
          %span.fa.fa-search{"aria-hidden" => "true"}

selectize js tags

1. Migrations & configuration

rails g migration create_tags name course_tags_count:integer

	, null: false, default: 0

rails g migration create_course_tags course:references tag:references

course.rb
	has_many :course_tags, inverse_of: :course, dependent: :destroy
	has_many :tags, through: :course_tags

tag.rb

class Tag < ApplicationRecord
	has_many :course_tags
	has_many :courses, through: :course_tags
	validates :name, length: {minimum: 1, maximum: 25}, uniqueness: true
	def to_s
		name
	end
	def popular_name
	  "#{name.to_s}: #{course_tags_count.to_s}"
	end

course_tag.rb
  #Tag.find_each { |tag| Tag.reset_counters(tag.id, :course_tags) }
  belongs_to :tag, counter_cache: true
  belongs_to :course

routes.rb

  resources :tags

courses_controller.rb

, course_tag_ids: []

_course.html.haml

  = link_to tag.name, tag_path(tag), class: 'text-white'
  /= link_to tag.name, courses_path(courses_search: {s: 'enrollments_count desc'})

rails c

Tag.create(name: "Programming")
Tag.create(name: "English")
Tag.create(name: "Literature")

2. Select tags with selectize js

yarn add selectize

app/assets/stylesheets/application.scss:

@import "selectize/dist/css/selectize";
@import "selectize/dist/css/selectize.default";

javascript/packs/application.js

require("selectize")
require("packs/tags")

javascript/packs/tags.js

$(document).on("turbolinks:load", function() {
  if ($('.selectize')){
      $('.selectize').selectize({
          sortField: 'text'
      });
  }

  $(".selectize-tags").selectize({
    create: function(input, callback) {
      $.post('/tags.json', { tag: { name: input } })
        .done(function(response){
          console.log(response)
          callback({value: response.id, text: response.name });
        })
    }
  });
});

course/form.html.haml

	= f.select :tag_ids, Tag.all.pluck(:name, :id), {}, { multiple: true, class: "selectize-tags" }

simple_form!

https://github.com/plataformatec/simple_form
// Gemfile
gem 'simple_form'

// Console
bundle install
rails generate simple_form:install
or
rails generate simple_form:install --bootstrap

// Any form
= simple_form_for @course do |f|
  = f.error_notification
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?
  = f.input :title
  = f.label :description
  = f.rich_text_area :description
  /= f.submit 'Save'
  = f.button :submit

wicked_pdf heroku

gemfile:

gem 'wicked_pdf' #PDF for Ruby on Rails
gem 'wkhtmltopdf-binary', group: :development
gem 'wkhtmltopdf-heroku', group: :production

config/wicked_pdf.rb

WickedPdf.config ||= {}
WickedPdf.config.merge!({
  #YOUR CONFIG HERE
})