Learn Ruby on Rails Book

Building a new Ruby on Rails application

Let's create a new Ruby on Rails application. Name of the application we are going to build is granite. It is a type of rock . Our aim is to create an application, using which we will be able to create certain tasks, mark the tasks as completed, star it, edit it, delete it, add comments to task etc. Our goal is to learn the process of writing a Ruby on Rails application with React.js views and also learn the best practices and standards we follow at BigBinary.

Let's build a brand new Rails application.

1$ rails new granite --skip-turbolinks
2      create
3      create  README.md
4      create  Rakefile
5      create  .ruby-version
6      create  config.ru
7      create  .gitignore
8      create  Gemfile
9         run  git init from "."
10      create  package.json
11      create  app
12      create  app/assets/config/manifest.js
13      create  app/assets/stylesheets/application.css
14      create  app/channels/application_cable/channel.rb
15      create  app/channels/application_cable/connection.rb
16      create  app/controllers/application_controller.rb
17      create  app/helpers/application_helper.rb
18      create  app/javascript/channels/consumer.js
19      create  app/javascript/channels/index.js
20      create  app/javascript/packs/application.js
21      create  app/jobs/application_job.rb
22      create  app/mailers/application_mailer.rb
23      create  app/models/application_record.rb
24      create  app/views/layouts/application.html.erb
25      create  app/views/layouts/mailer.html.erb
26      create  app/views/layouts/mailer.text.erb
27      create  app/assets/images
28      create  app/assets/images/.keep
29      create  app/controllers/concerns/.keep
30      create  app/models/concerns/.keep
31      create  bin
32      create  bin/rails
33      create  bin/rake
34      create  bin/setup
35      create  bin/yarn
36      create  config
37      create  config/routes.rb
38      create  config/application.rb
39      create  config/environment.rb
40      create  config/cable.yml
41      create  config/puma.rb
42      create  config/spring.rb
43      create  config/storage.yml
44      create  config/environments
45      create  config/environments/development.rb
46      create  config/environments/production.rb
47      create  config/environments/test.rb
48      create  config/initializers
49      create  config/initializers/application_controller_renderer.rb
50      create  config/initializers/assets.rb
51      create  config/initializers/backtrace_silencers.rb
52      create  config/initializers/content_security_policy.rb
53      create  config/initializers/cookies_serializer.rb
54      create  config/initializers/cors.rb
55      create  config/initializers/filter_parameter_logging.rb
56      create  config/initializers/inflections.rb
57      create  config/initializers/mime_types.rb
58      create  config/initializers/new_framework_defaults_6_0.rb
59      create  config/initializers/wrap_parameters.rb
60      create  config/locales
61      create  config/locales/en.yml
62      create  config/master.key
63      append  .gitignore
64      create  config/boot.rb
65      create  config/database.yml
66      create  db
67      create  db/seeds.rb
68      create  lib
69      create  lib/tasks
70      create  lib/tasks/.keep
71      create  lib/assets
72      create  lib/assets/.keep
73      create  log
74      create  log/.keep
75      create  public
76      create  public/404.html
77      create  public/422.html
78      create  public/500.html
79      create  public/apple-touch-icon-precomposed.png
80      create  public/apple-touch-icon.png
81      create  public/favicon.ico
82      create  public/robots.txt
83      create  tmp
84      create  tmp/.keep
85      create  tmp/pids
86      create  tmp/pids/.keep
87      create  tmp/cache
88      create  tmp/cache/assets
89      create  vendor
90      create  vendor/.keep
91      create  test/fixtures
92      create  test/fixtures/.keep
93      create  test/fixtures/files
94      create  test/fixtures/files/.keep
95      create  test/controllers
96      create  test/controllers/.keep
97      create  test/mailers
98      create  test/mailers/.keep
99      create  test/models
100      create  test/models/.keep
101      create  test/helpers
102      create  test/helpers/.keep
103      create  test/integration
104      create  test/integration/.keep
105      create  test/channels/application_cable/connection_test.rb
106      create  test/test_helper.rb
107      create  test/system
108      create  test/system/.keep
109      create  test/application_system_test_case.rb
110      create  storage
111      create  storage/.keep
112      create  tmp/storage
113      create  tmp/storage/.keep
114      remove  config/initializers/cors.rb
115      remove  config/initializers/new_framework_defaults_6_0.rb
116         run  bundle install
117Resolving dependencies...
118Using rake 13.0.1
119...
120...
121...
122Using sqlite3 1.4.2
123Using web-console 4.0.4
124Using webdrivers 4.4.1
125Using webpacker 4.3.0
126Bundle complete! 16 Gemfile dependencies, 72 gems now installed.
127Use `bundle info [gemname]` to see where a bundled gem is installed.
128         run  bundle binstubs bundler
129         run  bundle exec spring binstub --all
130* bin/rake: Spring inserted
131* bin/rails: Spring inserted
132       rails  webpacker:install
133      create  config/webpacker.yml
134Copying webpack core config
135      create  config/webpack
136      create  config/webpack/development.js
137      create  config/webpack/environment.js
138      create  config/webpack/production.js
139      create  config/webpack/test.js
140Copying postcss.config.js to app root directory
141      create  postcss.config.js
142Copying babel.config.js to app root directory
143      create  babel.config.js
144Copying .browserslistrc to app root directory
145      create  .browserslistrc
146  Copying binstubs
147       exist    bin
148      create    bin/webpack
149      create    bin/webpack-dev-server
150      append  .gitignore
151Installing all JavaScript dependencies [4.3.0]
152         run  yarn add @rails/webpacker@4.3.0 from "."
153yarn add v1.22.5
154info No lockfile found.
155[1/4] πŸ”  Resolving packages...
156[2/4] 🚚  Fetching packages...
157[3/4] πŸ”—  Linking dependencies...
158[4/4] πŸ”¨  Building fresh packages...
159success Saved lockfile.
160success Saved 594 new dependencies.
161Installing dev server for live reloading
162         run  yarn add --dev webpack-dev-server from "."
163yarn add v1.22.5
164[1/4] πŸ”  Resolving packages...
165[2/4] 🚚  Fetching packages...
166[3/4] πŸ”—  Linking dependencies...
167[4/4] πŸ”¨  Building fresh packages...
168success Saved lockfile.
169success Saved 102 new dependencies.
170Webpacker successfully installed πŸŽ‰ 🍰

As of Rails 6, Rails started to bundle and wrap Webpack inside Rails applications. This is done through Webpacker. Webpacker provides a preconfigured Webpack along with view helpers to easily get corresponding generated assets like JavaScript, CSS and SCSS files.

The default Rails application erb template file app/views/layout/application.html.erb contains:

1<%= stylesheet_link_tag 'application', media: 'all' %>
2<%= javascript_pack_tag 'application' %>

Updating .gitignore file

Visit Wheel's gitignore file. Click on the Raw and then copy the content of the file to clipboard. Now open your application's gitignore file and replace it with the clipboard content. Save the file.

Note If you have already pushed the code to remote repo, then copy the content of wheel gitignore file to clipboard and follow this link.

Creating database

SQlite3 database is the default database when a new Ruby on Rails application is created.

1bundle exec rails db:create
1Created database 'db/development.sqlite3'
2Created database 'db/test.sqlite3'

Starting the server

Now let's start the server.

1$  bundle exec rails server
2=> Booting Puma
3=> Rails 6.0.3.4 application starting in development
4=> Run `rails server --help` for more startup options
5Puma starting in single mode...
6* Version 4.3.6 (ruby 2.7.2-p137), codename: Mysterious Traveller
7* Min threads: 5, max threads: 5
8* Environment: development
9* Listening on tcp://127.0.0.1:3000
10* Listening on tcp://[::1]:3000
11Use Ctrl-C to stop

Open browser and visit http://localhost:3000. We will see a page which says Yay! You're on Rails!.

Now that you have created the base for the project, refer the previous installation section and add the missing files. Also make sure that you are using ruby version 2.7.2 and rails version 6.0.3.4 as described in chapter 1.

Let's add this new application to git.

1git add -A
2git commit -m "Initial commit"