Forem: Allan

How To Set Up A Ruby On Rails CI Workflow Using Github Actions.

Allan — Tue, 18 Jan 2022 04:11:16 +0000

Continuous Integration(CI) is a development practice that enables developers to integrate code regularly into a central repository, where builds and tests run. The rationale behind this is that it helps development teams detect bugs quickly, improves code quality and security.

There are several tools we can use to automate tests. Examples of such tools are GitHub Actions, CircleCI, and many more.

This guide covers how you can set up a CI workflow for a Ruby on Rails app using GitHub Actions.

PREREQUISITES

Ruby On Rails app
Git
GitHub Account

WHAT IS GITHUB ACTIONS?

GitHub Actions is an automation platform that helps developers to automate workflow. Since GitHub Actions come included in your GitHub projects, it is pretty easy to set up a CI workflow without relying on any third-party integrations.

COMPONENTS OF GITHUB ACTIONS

WORKFLOW

Workflow is an automated steps that is made up of one or more jobs that can be scheduled or triggered by an event. They are defined by a YAML file in the .github/workflows directory and can be used to build, test, package, release or deploy a project on GitHub.

EVENTS

Events are specific tasks that trigger the execution of a workflow. An example is when you push a commit to a repository or create a pull request.

JOBS

A job is a series of steps that executes on the same runner.

STEPS

Steps consist of individual tasks to run a job. They group actions that are carried out on the runner.

ACTIONS

Actions are the smallest building blocks of a workflow that are combined into steps to create a job.

RUNNERS

A runner is a server on which our jobs will be executed.

CREATING A RUBY ON RAILS WORKFLOW

I. Create a repository on GitHub.
II. Create a new rails application, navigate to the directory, and push it to GitHub.
III. Go to the repository, and in the Actions tab, click on setup a workflow yourself. By default, this will create folder .github, a sub-folder workflow, and a main.yml file.
IV. Commit this and run git pull in the terminal to pull this.

Now let's follow these steps to set up a CI workflow using GitHub Actions.

1. Name the workflow.

name: CI

2. Set the events.

on:

  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

In this code snippet, the events will trigger the action to run whenever we push a code to the master branch or we perform a pull request. Note: The branch is set to the master branch by default, but you can configure it for different branches as well.

3. Define The Job.

 jobs:
  test:
    runs-on: ubuntu-latest

We define a job, give it a name and tell it to run on the latest version of ubuntu.

4. Define The Services.

  services: 
      postgres:
        image: postgres:12
        env:
          POSTGRES_PASSWORD: postgres
        ports: ['5432:5432']

Here, we specify the services we need to run the job and the database we need to run the tests.

5. Define the steps and Setup Dependencies

steps:
      - uses: actions/checkout@v2
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1.80.0
        with:
          ruby-version: 2.6.6

      - uses: Borales/actions-yarn@v2.3.0
        with:
          cmd: install

      - name: Install Dependencies
        run: |
          sudo apt install -yqq libpq-dev
          gem install bundler

      - name: Install Gems
        run: |
          bundle install

The code above checkouts the source code, sets up ruby with version 2.6.6, install gems, and Postgres dependencies.

6. Set up the database

  - name: Setup database
        env:
          PG_DATABASE: postgres
          PG_HOST: localhost
          PG_USER: postgres
          PG_PASSWORD: password
          RAILS_ENV: test
          WITH_COVERAGE: true
          DISABLE_SPRING: 1
        run: |
          bundle exec rails db:prepare
          bundle exec rake test

Here we specify the database required for rails to create, run and connect to Postgres.

7. Add Rspec Test.

  - name: Build and test with RSpec
        env:
          PG_DATABASE: postgres
          PG_HOST: localhost
          PG_USER: postgres
          PG_PASSWORD: password
          RAILS_ENV: test
        run: |
          bundle exec rspec spec

Since we don't have RSpec included in the gemfile when we push the changes to GitHub we will have a failing workflow. Now, let's add gem 'rspec-rails' to the gemfile like so:

 group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: %i[mri mingw x64_mingw]
  gem 'rspec-rails'
end

Add some models and controllers to your app and write tests against them.

8. Add Code Coverage.

  - name: Create Coverage Artifact
        uses: actions/upload-artifact@v2
        with:
          name: code-coverage
          path: coverage/

and in the gemfile add gem 'simplecov', require: false

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  gem 'webdrivers'
  gem 'simplecov', require: false
end

This will generate a coverage report from the testing environment.

Here is the complete workflow file.

name: CI
on:

  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  test:
    runs-on: ubuntu-latest

    services: 
      postgres:
        image: postgres:12
        env:
          POSTGRES_PASSWORD: postgres
        ports: ['5432:5432']

    steps:
      - uses: actions/checkout@v2
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1.80.0
        with:
          ruby-version: 2.6.6

      - uses: Borales/actions-yarn@v2.3.0
        with:
          cmd: install

      - name: Install Dependencies
        run: |
          sudo apt install -yqq libpq-dev
          gem install bundler

      - name: Install Gems
        run: |
          bundle install

      - name: Setup database
        env:
          PG_DATABASE: postgres
          PG_HOST: localhost
          PG_USER: postgres
          PG_PASSWORD: password
          RAILS_ENV: test
          WITH_COVERAGE: true
          DISABLE_SPRING: 1
        run: |
          bundle exec rails db:prepare
          bundle exec rake test

      - name: Build and test with rspec
        env:
          PG_DATABASE: postgres
          PG_HOST: localhost
          PG_USER: postgres
          PG_PASSWORD: password
          RAILS_ENV: test
        run: |
          bundle exec rspec spec

      - name: Create Coverage Artifact
        uses: actions/upload-artifact@v2
        with:
          name: code-coverage
          path: coverage/

Now, commit this to the repository and push the file to GitHub. Go to the Actions tab, and in the Actions logs click on the latest build that outputs the name of each step in the workflow file. Be sure that the test runs successfully when you push a code to GitHub.

CONCLUSION

In this guide, we demonstrated how to set up a CI workflow using GitHub Actions. I hope you learned a lot, and thanks for following along.

REFERENCES

A Simple Authentication with Ruby On Rails

Allan — Thu, 29 Jul 2021 11:46:32 +0000

When building a web app, you don't want every user to have access to every single part of the app, so you will want to restrict access. That's why we add authentication to our app. In this tutorial, we will create a simple authentication for your Ruby On Rails app.

PREREQUISITES

To follow along with this tutorial, you will need:

Some basic knowledge of Ruby On Rails
A text editor(I am using sublime text)
Ruby, Rails, Node and Yarn installed on your computer.

SET UP

To get started, create a new rails application and navigate to the directory:

rails new authentication
cd authentication

Next, create a welcome page and set the root to index action in WelcomeController.

WELCOME PAGE

To do this, run the following command:

rails g controller welcome index

Now, let's set up the route in config/routes.rb like so:

Rails.application.routes.draw do

  get 'welcome', to: 'welcome#index'
  root to: 'welcome#index'
end

The generator creates a welcome_controller.rb file in app/controllers

class WelcomeController < ApplicationController

  def index
  end

end

It also creates an index.html.erb file in app/views/welcome. By default, rails render a view that corresponds with the name of the controller. Now, add some content for that page in the file:

<h1>Welcome Page</h1>

BCRYPT

In the database, we will not like to store our passwords in plain text. Instead, we encrypt the password. We can do this by uncommenting gem 'bcrypt', '~> 3.1.7' in Gemfile and run bundle install to install the gem.

gem 'bcrypt', '~> 3.1.7'
bundle install

Let's continue by adding the model and controllers.

MODEL

Create a user model with attributes, email and password_digest

rails g model User email:string password_digest:string

And run rails db:migrate to migrate it to the database. The email stores the email address of the user. Also, password_digest creates a password_digest field in the users table.

In app/models/user.rb, add has_secure_password and some validations.

class User < ApplicationRecord
    has_secure_password

    validates :email , presence: true, uniqueness: true
end

Here, before a user gets saved to the database, an email should be present, and it should also be unique.

REGISTRATION CONTROLLER

Let's create a registration controller by running the following command:

rails g controller registrations new

Add the following to app/controllers/registrations_controller.rb

class RegistrationsController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)

    if @user.save
      session[:user_id] = @user.id
      redirect_to root_path
      else
       render :new  
    end
  end

  private

  def user_params
    params.require(:user).permit(:email, :password, :password_confirmation)
  end
end

The code snippet above creates a new user and saves it to the database. The new action initializes a new object in the User model and stores it as an instance variable that can be accessed in the views. The create action creates the user instance and sets its id to a session which redirects to the root_path if successful and renders new when it fails.

Create a sign_up form in app/views/registrations/new.html.erb.

<%= form_with model: @user, url: sign_up_path do |f|  %>
    <%= f.label :email %>
    <%= f.text_field :email %>

    <%= f.label :password %>
    <%= f.password_field :password %>

    <%= f.label password_confirmation %>
    <%= f.password_field :password_confirmation %>

    <%= f.submit "Sign Up" %>
<% end %>

and update the route:

Rails.application.routes.draw do

  get 'welcome', to: 'welcome#index'
  root to: 'welcome#index'

  resources :users

  get 'sign_up', to: 'users#new'
  post 'sign_up', to: 'users#create'

end

Now, run $ rails s to start the development server and visit localhost:3000/sign_up to create a new user.

SESSIONS CONTROLLER

Create the sessions controller by running the code:

rails g controller sessions new create destroy

and add the following code to app/controllers/sessions_controller.rb:

class SessionsController < ApplicationController
  def new
  end

  def create
    user = User.find_by(email: params[:email])

    if user.present? && user.authenticate(params[:password])
       session[:user_id] = user.id
       redirect_to root_path
    else
        render :new
    end
  end

  def destroy
    session[:user_id] = nil
    redirect_to sign_in_path
  end
end

The create method for SessionsController finds the user based on the email in the database. If a user is present and the password matches, the id of the user instance is stored in a session and they are logged in. Otherwise, we will be redirected to the sign_in page.
The destroy method sets the user session to nil and logs out the user.

In app/views/sessions/new.html.erb, add:

<h1>Sign In </h1>

<%= form_with url: sign_in_path do |f| %>

    <%= f.label :Email %>
    <%= f.text_field :email %>

    <%= f.label :Password %>
    <%= f.password_field :password %>

    <%= f.submit "Sign in" %>
<% end %>

and set up the routes:

Rails.application.routes.draw do

  get 'welcome', to: 'welcome#index'
  root to: 'welcome#index'

  resources :users

  get 'sign_up', to: 'users#new'
  post 'sign_up', to: 'users#create'

  get 'sign_in', to: 'sessions#new'
  post 'sign_in', to: 'sessions#create'
  delete 'logout', to: 'sessions#destroy'

end

Now, a user can sign_in by visiting localhost:3000/sign_in in the browser.

Current.user

Add the following in app/controllers/application_controller.rb to create a Current.user

class ApplicationController < ActionController::Base
    before_action :set_current_user

    def set_current_user
      if session[:user_id]
       Current.user = User.find_by(id: session[:user_id])   
      end
    end
end

The set_current_user method will return the current user if it finds one or if there is a session present. Also, since all controllers inherit from the ApplicationController, set_current_user will be accessible in all the controllers.

Let's create a current.rb file in app/models and add the following:

class Current < ActiveSupport::CurrentAttributes

  attribute :user

end

This code will allow us to call Current.user in our views.

Now, Open app/views/welcome/index.html.erb and update it with the following:

<h1>Welcome Page</h1>

<% if Current.user %>
  Logged in as: Current.user.email<br>
  <%= button_to "Sign Out", logout_path,  method: :delete %>
  <% else %>
  <%= link_to "Sign up", sign_up_path %>
  <%= link_to "Sign In", sign_in_path %>
<% end %>

This code checks if Current.user is present and provides a sign_out button when signed in. Otherwise, a sign_up and sign_in link is seen.

CONCLUSION

Congrats, we have successfully built a simple authentication in Ruby On Rails without relying on any gem. I hope you found this tutorial easy to follow, and If you have any questions, please add your query in the comments section. Thank you!

AN INTRODUCTION TO STIMULUS.JS

Allan — Thu, 29 Apr 2021 15:05:13 +0000

INTRODUCTION

Stimulus.js is a modest JavaScript framework for the HTML you already have by connecting JavaScript objects(controllers) to the HTML on the page in an organized way.

Unlike other JavaScript frameworks, it doesn't take over your entire front-end's application. The Basecamp team created it to simplify the problem of heavy frontend-driven architecture that's currently in vogue.

This article will introduce you to stimulus.js by creating a slideshow and how it can help structure an application's front-end codebase.

PREREQUISITE

For this tutorial, you will need:

A basic understanding of HTML.
Yarn installed on your P.C

HOW STIMULUS.JS DIFFERS FROM MODERN JAVASCRIPT FRAMEWORKS

Stimulus.js differs from modern JavaScript frameworks that are available today. It doesn't render templates like these modern JavaScript frameworks that rely on turning JSON into DOM elements via a template language. It relies on the DOM to hold the state. It also connects actions and events on the front-end of an application to controllers on the backend.

CORE CONCEPTS

Stimulus.js has three(3) main concepts. These are controllers, actions, and targets. Here’s an example of code you’ll write to copy text from an input field to the clipboard:

<div data-controller="clipboard">
  PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
  <button data-action="clipboard#copy">Copy to Clipboard</button>
</div>

And the accompanying JavaScript looks like this.

#clipboard_controller.js

import {Controller} from "stimulus"

export default class extends Controller{
    static targets = ['source']
    copy(){
        this.sourceTarget.select()
        document.execCommand('copy')
    }
}

Controllers

Controllers refer to instances of JavaScript classes that you define in your application. The data-controller attribute connects the HTML to the JavaScript.

Actions

Think of actions as a way of handling DOM events in your controller. In the clipboard markup, the data attribute data-action="clipboard#copy" copies the text when we click on the button in the HTML and runs the action copy in the controller.

Targets

Targets let you define essential elements that will be available to your controller. The data-clipboard-target=" source" sets up a target with the name source in the controller, and we can access this by using this.sourceTarget.

GETTING STARTED

To get started, you need to clone and set up stimulus-starter. You can do this by using the commands:

$ git clone https://github.com/hotwired/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start

Then visit http://localhost:9000/ in your browser.

CREATING A SLIDESHOW WITH STIMULUS.JS

In this section, I will demonstrate how to create a slideshow using stimulus.js.

CREATING A CONTROLLER

Open the index file in the public directory and update it with this code.

 <div data-controller="slideshow">

 </div>

In the stimulus-starter, there is a controller folder so let's create a file slideshow_controller.js and add this:

import { Controller } from "stimulus"

export default class extends Controller {

}

Let's break down what's going on in the code snippets above.

The data-controller attribute connects our controller to the DOM with the identifier slideshow.

CONNECTING THE ACTION

Now, let's add a button inside the <div> to connect the action method to the button's click event. We can do this by adding a data-action attribute to the button.

    <button data-action="click->slideshow#previous" class="btn"> ← </button>
    <button data-action="click->slideshow#next" class="btn">  → </button>

We now have

 <div data-controller="slideshow">
    <button data-action="click->slideshow#previous" class="btn"> ← </button>
    <button data-action="click->slideshow#next" class="btn">  → </button>
  </div>

And in the controller, add:

import { Controller } from "stimulus"

export default class extends Controller {

  initialize() {
    this.index = 0
  }

  next() {
    this.index++
  }

  previous() {
    this.index--
  }
}

We can look at the code snippet above and understand what is going on.
The data-action value click->slideshow#previous and click->slideshow#next are called action descriptors. The descriptor says that:

click is the name of the event
slideshow is the controller identifier
previous, next are the names of the method

The initialize method shows the first slide. The next() and previous() method in the controller advance and goes back to the current slide when we click on the button(for now, the button doesn't do anything when we click on it).

USING TARGETS

Add the following in the <div>.

<div data-slideshow-target="slide">slide 1</div>
<div data-slideshow-target="slide">slide 2</div>
<div data-slideshow-target="slide">slide 3</div>

We have this now.

<div data-controller="slideshow">
    <button data-action="click->slideshow#previous" class="btn"> ← </button>
    <button data-action="click->slideshow#next" class="btn">  → </button>

    <div data-slideshow-target="slide">slide 1</div>
    <div data-slideshow-target="slide">slide 2</div>
    <div data-slideshow-target="slide">slide 3</div>
  </div>

In the code above, we created a target by adding data-slideshow-target with the value slide to the div element.

Next, let's create a property for the target by adding slide to the target definition in the controller. Stimulus.js automatically creates a this.slideTarget property to get the first element.

 import { Controller } from "stimulus"

 export default class extends Controller {

  static targets = [ "slide" ]

  initialize() {
    this.index = 0
  }

  next() {
    this.index++
  }

  previous() {
    this.index--
  }
}

Now let's add a method showCurrentSlide() which will loop through each slide target.

showCurrentSlide() {
    this.slideTargets.forEach((element, index) => {
      element.hidden = index != this.index
    })
  }

What this does is it will loop through each slide target and toggles the hidden attribute if its index matches.

Update the slideshow_controller.js like this.

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "slide" ]

  initialize() {
    this.index = 0
    this.showCurrentSlide()
  }

  next() {
    this.index++
    this.showCurrentSlide()
  }

  previous() {
    this.index--
    this.showCurrentSlide()
  }

  showCurrentSlide() {
    this.slideTargets.forEach((element, index) => {
      element.hidden = index != this.index
    })
  }
}

You can reload the page in the browser and confirm that the previous or next button goes back or advances to the next slide.

CONCLUSION

In this tutorial, we learn't what stimulus.js is, the core concepts, and demonstrated how to create a slideshow.