How to Create a Web App with Ruby on Rails and Bootstrap

Posted on by Panther

In this tutorial, we will create a web application using Ruby on Rails and bootstrap. Ruby on Rails is a popular web application framework written in Ruby, while Bootstrap is a powerful CSS framework that helps build responsive and mobile-first web applications.

By the end of this tutorial, you will have a basic web application that allows users to create, read, update, and delete records from a database. We will be using Ruby on Rails version 6 and Bootstrap version 4.

Prerequisites

To follow this tutorial, you will need the following:

  • Ruby installed on your system (version 2.7 or higher)
  • Ruby on Rails installed on your system (version 6 or higher)
  • Node.js installed on your system
  • Yarn installed on your system

Step 1: Create a New Rails Application

To begin, let’s create a new Rails application. Open your terminal and run the following command:

$ rails new webapp

This will create a new directory named “webapp” with a basic Rails application structure.

Navigate into the application directory:

$ cd webapp

Step 2: Set Up the Database

Next, we need to set up the database for our application. Ruby on Rails uses SQLite as the default database. Open the config/database.yml file and make sure your database configuration matches the following:

default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000
  database: db/development.sqlite3

development:
  <<: *default

Save the file and run the following command to create the database:

$ rails db:create

Step 3: Generate a Scaffold

Now, we will generate a scaffold for our application. A scaffold generates a set of views and controllers for a specific model. In this tutorial, we will create a simple blog application.

Run the following command to generate the scaffold:

$ rails generate scaffold Post title:string body:text

This will generate the necessary files and code for the blog application, including the database migration and model, controller, and view files.

Apply the database migration using the following command:

$ rails db:migrate

Step 4: Add Bootstrap to the Application

To add Bootstrap to our application, we will use the bootstrap gem. Open your Gemfile and add the following line:

gem 'bootstrap', '~> 4.0.0'

Save the file and run the following command to install the gem:

$ bundle install

Next, let’s import the Bootstrap stylesheets and JavaScript files into our application.

Open the app/assets/stylesheets/application.css file and add the following line at the top:

@import 'bootstrap';

Open the app/assets/javascripts/application.js file and add the following lines:

//= require jquery3
//= require popper
//= require bootstrap

Step 5: Customize the Scaffold Views

Now, let’s customize the scaffold views to use Bootstrap classes and styling.

Open the app/views/posts/index.html.erb file and replace its contents with the following:

<h1 class="my-4">Posts</h1>

<table class="table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Body</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td><%= post.body %></td>
        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Post', new_post_path, class: 'btn btn-primary' %>

Open the app/views/posts/show.html.erb file and replace its contents with the following:

<h1 class="my-4"><%= @post.title %></h1>

<p><%= @post.body %></p>

<br>

<%= link_to 'Edit', edit_post_path(@post), class: 'btn btn-primary' %>
<%= link_to 'Back', posts_path, class: 'btn btn-secondary' %>

Open the app/views/posts/_form.html.erb file and replace its contents with the following:

<%= form_with(model: post, local: true) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <%= form.label :title %>
    <%= form.text_field :title, class: 'form-control' %>
  </div>

  <div class="form-group">
    <%= form.label :body %>
    <%= form.text_area :body, rows: 10, class: 'form-control' %>
  </div>

  <div class="actions">
    <%= form.submit 'Save', class: 'btn btn-primary' %>
  </div>
<% end %>

Step 6: Start the Rails Server

Now, let’s start the Rails server and see our web application in action!

Run the following command to start the server:

$ rails server

Open your web browser and navigate to `http://localhost:3000/posts`. You should see the blog application with a list of posts.

Click on the “New Post” button to create a new post. Fill in the title and body of the post and click the “Save” button.

You can also edit and delete existing posts using the respective links on the posts list page.

Congratulations! You have successfully created a web application with Ruby on Rails and Bootstrap.

Conclusion

In this tutorial, we learned how to create a web application using Ruby on Rails and Bootstrap. We started by setting up a new Rails application and generating a scaffold for a blog application.

We then added Bootstrap to our application and customized the scaffold views to use Bootstrap styling and classes.

Finally, we started the Rails server and tested our web application by creating, editing, and deleting posts.

This is just the beginning of what you can do with Ruby on Rails and Bootstrap. Feel free to explore further and add more features to your web application.

Related Post