Step By Step Guide To Build Your First Web app using Ruby On Rails

Ruby on Rails (ROR) is a popular web development framework that has been gaining popularity over the past few years. With its intuitive design and easy-to-use tools, Rails has become the go-to choice for many developers looking to create web applications quickly and efficiently. In this guide, we will walk you through the process of building your first web app using Rails, step-by-step.

Before we begin, it's important to note that while this guide will help you get started with Rails, it assumes some prior knowledge of web development concepts such as HTML, CSS, and JavaScript. If you are new to web development, we recommend taking some time to familiarize yourself with these concepts before proceeding.

Step 1. Install Rails

The first step in building a web app with Rails is to install the framework on your local machine. Rails requires Ruby to be installed first, so if you haven't done so already, you'll need to install Ruby as well.

Once you have Ruby installed, you can install Rails using the following command in your terminal:

gem install rails

This will install the latest version of Rails on your machine. You can check the version of Rails you have installed by running the following command:

rails -v

Step 2. Create a New Rails App

With Rails installed, you're ready to create your first Rails app. To create a new Rails app, navigate to the directory where you want to create your app in your terminal, and run the following command:

rails new myapp

Replace "myapp" with the name of your app. This will create a new Rails app with the name you specified, along with all the necessary files and directories.

Step 3. Set Up the Database

Next, you'll need to set up your database. By default, Rails uses SQLite as its database, but you can also use other databases such as MySQL or PostgreSQL if you prefer.

To set up your database, open the config/database.yml file in your app directory and update the configuration settings to match your database settings. For example, if you're using MySQL, you might have a configuration like this:

development:
  adapter: mysql2
  encoding: utf8mb4
  database: myapp_development
  username: root
  password: mypassword
  host: localhost
  port: 3306

Replace the values with your own database settings. Once you've done that, run the following command to create your database:

rails db:create

This will create your database based on the settings you specified.

Step 4. Generate a Controller and View

With your app set up and your database created, you're ready to generate a controller and view. A controller is a Ruby class that handles incoming requests and generates responses, and a view is a template that generates HTML to be displayed in the browser.

To generate a controller and view, run the following command in your terminal:

rails generate controller welcome index

This will create a new controller called WelcomeController with an action called index, along with a view file for the index action.

Step 5. Modify the View

With your controller and view generated, you're ready to modify the view to display some content. Open the app/views/welcome/index.html.erb file in your text editor and replace the contents with the following:

<h1>Welcome to my app!</h1>

<p>This is my first Rails app. I'm so excited!</p>

Save the file and close it.

Step 6. Start the Server

With your controller and view set up, you're ready to start the Rails server and see your app in action. To start the server, run the following command in your terminal:

rails server

This will start the Rails server on your local machine, and you should see output that looks something like this:

=> Booting Puma
=> Rails 6.1.3 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Version 5.1.1 (ruby 3.0.0-p0), codename: Tallahassee Lassie
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
Use Ctrl-C to stop

Once the server is running, open your web browser and navigate to http://localhost:3000. You should see your app's welcome page with the message you added in the previous step.

Step 7. Add a Model and Database Migration

Now that you have a working web app, you can add a model to your app and create a database migration to create the corresponding table in your database.

For this example, let's create a model for a blog post. To create a new model, run the following command in your terminal:

rails generate model Post title:string content:text

This will generate a new model called Post with two attributes: title and content.

Next, you need to create a database migration to create the posts table in your database. To do this, run the following command:

rails generate migration CreatePosts

This will generate a new migration file in the db/migrate directory. Open the file in your text editor and replace the contents with the following:

class CreatePosts < ActiveRecord::Migration[6.1]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :content

      t.timestamps
    end
  end
end

Save the file and close it.

Step 8. Run the Migration

With your migration file created, you're ready to run the migration and create the posts table in your database. To do this, run the following command in your terminal:

rails db:migrate

This will apply the migration to your database and create the posts table.

Step 9. Add CRUD Functionality

Now that you have a model and a corresponding database table, you can add CRUD (Create, Read, Update, Delete) functionality to your app.

To do this, you'll need to modify your controller and views to handle the various CRUD actions. For example, to create a new post, you might add the following code to your PostsController:

def new
  @post = Post.new
end

def create
  @post = Post.new(post_params)

  if @post.save
    redirect_to @post
  else
    render 'new'
  end
end

private

def post_params
  params.require(:post).permit(:title, :content)
end

And to display a list of all posts, you might add the following code to your index.html.erb view:

<% @posts.each do |post| %>
  <div class="post">
    <h2><%= post.title %></h2>
    <p><%= post.content %></p>
  </div>
<% end %>

You would also need to modify your routes.rb file to add routes for the various CRUD actions. For example, to add a route for creating a new post, you might add the following code:

resources :posts

This will generate routes for all the CRUD actions for your Post model.

Step 10. Test Your App

With CRUD functionality added, you should test your app to make sure everything is working as expected. Open your web browser and navigate to http://localhost:3000/posts. You should see a list of all the posts in your database. Click the "New Post" button to create a new post, fill in the form, and click "Create Post" to save the post. You should be redirected to the newly created post.

Step 11. Deploy Your App

Finally, once you're satisfied with your app, you can deploy it to a web server so that it can be accessed by others. There are many ways to deploy a Rails app, but one popular option is to use a platform like Heroku.

To deploy your app to Heroku, follow these steps:

  1. Create a Heroku account if you don't already have one.

  2. Install the Heroku CLI (command-line interface) on your local machine.

  3. Open your terminal and log in to your Heroku account by running the following command:

    heroku login
  4. Create a new Heroku app by running the following command:

    heroku create
  5. Push your app to the Heroku server by running the following command:

    git push heroku main
  6. Run the database migration on the Heroku server by running the following command:

    heroku run rails db:migrate
  7. Open your web browser and navigate to your new Heroku app's URL to make sure everything is working correctly.

Conclusion

Ruby On Rails is gaining huge popularuty these days. Right from software developers to business owners, ROR has become the mainstream for a secure and advanced web application development. Following these dicussed above steps, one can easily build their fitst Ruby On Rails app. From here, you can continue to customize and enhance your app with additional features and functionality. Moreoverm professionals having in-depth experience can easily create web API, CMSs, eCommerce sites, and custom web applications.


Similar Articles