Summary of initial work when creating an app with Rails

Introduction

Since it may be set like every time when creating an application with rails, I will summarize the initial settings. The work is as follows.

・ App creation ・ Database creation ・ Introduction of gem ・ Introduction of Haml ・ Table creation ・ Create controller and view ・ Introduction of jquery

App creation

First, create an app by entering commands from the terminal.

I think it's a good idea to specify the version of rails that you are familiar with. (This time version 5.2.3, database uses myspl) Do the following in the directory where you want to save your app: (This time, the app name is sample)

Terminal

$ rails _5.2.3_ new sample -d mysql

Move to the directory of the created application.

Terminal

$ ｃｄ sample

Database creation

Create a database.

Terminal

$ rails db:create

A database for development and test should be created. (Check with an app such as Sequel Pro)

gem introduction

Put the gem that you think you will use for development first. I think the following four can be included for the time being. Add the following to your Gemfile.

Gemfile

group :development, :test do
  gem 'pry-rails'
end

gem 'haml-rails'
gem 'font-awesome-sass'
gem 'jquery-rails'

I will explain each one pry-rails: To stop processing on the controller and check the contents of params haml: Because haml is used (easier to write than erb) font-awesome-sass: to use the font-awesome icon jquery-rails: to use jquery

Install after adding

Terminal

$ bundle install

Introducing Haml

I have added haml to gem, but I will change the erb file that was originally created when creating the application to haml. Just run the following command:

Terminal

$ rails haml:erb2haml

Running the command will convert the existing erb file to a haml file. After executing the command, you will be asked Would you like to delete the original .erb files ?, so enter y. (The question is, is it okay to delete the original erb file? Let's answer with good → y, no → n)

Create table

Create a table in the database. This time I will create a posts table. (I think that it will be after designing the DB when actually creating the application, but please think that it is for easy confirmation of the flow)

■ First, create a model.

Terminal

$ rails g model post

A migration file and a model file should be created like the image below.

■ Then edit the migration file. Describes the information of the column to be created. This time, the column name is content, the data type is string, and null is restricted. Let's add it to the migration file! (The migration file is in db / migrate)

xxxxxxxxxxxxxx_create_posts.rb

class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.string :content, null: false
      t.timestamps
    end
  end
end

■ Let's perform migration Migrate after writing the migration file.

Terminal

$ rails db:migrate

It is OK if the table is created as shown in the image below.

Controller, view creation

■ First, create a controller. (Without this, it won't become an app ...) This time we will create a posts controller.

Terminal

$ rails g controller posts

I think that various files will be created when you execute the command, but for the time being, it is OK if you pay attention only to posts_controller.rb. (A view folder for the posts controller is also created here)

■ Controller editing Let's write the action on the controller. (File is in app / controllers)

posts_controller.rb

class PostsController < ApplicationController
  def index
  end
end

For the time being, only the index action is described. This time, I will omit the description of the contents such as instance variables.

■ Routing settings Next, let's set the routing to use the controller. (File is in config)

routes.rb

Rails.application.routes.draw do
  root "posts#index"
  resources :posts, only: :index
end

The index action of the posts controller can be used. Also, change the root path. (Without this, when you access the root path, the default page prepared by rails will be displayed.)

■ Routing confirmation Let's check if the routing is set up correctly

Terminal

$ rails routes

It is OK if the index action of the posts controller is set as shown in the image below.

■ View file creation After setting the routing, prepare the view file. (Without this, even if you skip the request, you will get an error because there is no file)

Create index.html.haml in app / views / posts. Let's write something so that the contents are easy to understand.

haml:index.html.haml

%h1 index page

■ Check with a browser After creating the view file, let's actually check with the browser whether it is working. Start a local server.

Terminal

$ rails s

Enter localhost: 3000 / in the URL with a browser such as Chrome to access it. It is OK if it is displayed according to the prepared view file as shown in the image below.

Introduced jquery

We will introduce jquery. Let's add require jquery to application.js.

application.js

//= require jquery
//= require rails-ujs
//= require activestorage
//= require_tree .

• An error will occur unless the position to add require jquery is higher than require_tree.

--- Digression --- By the way, if you add Ajax manually using jquery, it may interfere with turbolinks, so in my case I have deleted turbolinks. Comment out the description of turbolinks in Gemfile Removed turbolinks description in application.html file Removed turbolinks description in application.js file

Finally, let's check if jquery works properly in the browser. Anything is fine, so write the following in the js file and take a look at the browser console! You can check the console screen using the chrome verification tool. (This time it is for confirmation, so write it in application.js)

application.js

$(function(){
  console.log("OK")
})

If OK is displayed as shown in the image below, it is working properly.

This is the end of all the work when creating an application. I would appreciate it if you could point out any mistakes.