Rapid Web App Development in Ruby: Introduction
Tags: ruby, webdev, beginners, tutorial
Published: 2020-06-28 07:16:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8zezxb0ql4fajc06zf3f.jpg)

<span>Photo by <a href="https://unsplash.com/@lincon_street?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Divyadarshi Acharya</a> on <a href="/s/photos/web-developement?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

In this blog series, I will be covering how to create a web app using ruby with minimal effort. Assuming you have ruby installed let's get started.

I am going to use **sinatra** framework here, so first step is to install sinatra gem. 

```ruby
gem install sinatra
```

Now create a new folder to store your app files. Since I am going to create a simple search app which has contact information, naming it as contacts. Open this folder in your editor now. I am using visual studio code.

Create a file named `app.rb` with the following contents

```ruby
# app.rb

require 'sinatra'

get '/' do
  'Welcome to contacts app!'
end
```

Now from your terminal, run `ruby app.rb`, you will see a similar message on your screen now.

```bash
slashpai@pai  ~/contacts   ruby app.rb

[2020-06-28 12:05:09] INFO  WEBrick 1.4.2
[2020-06-28 12:05:09] INFO  ruby 2.6.6 (2020-03-31) [x86_64-linux]
== Sinatra (v2.0.8.1) has taken the stage on 4567 for development with backup from WEBrick
[2020-06-28 12:05:09] INFO  WEBrick::HTTPServer#start: pid=21875 port=4567

```

From your browser, go to [localhost:4567](http://localhost:4567), you should see the content on web page as *Welcome to contacts app!*. That was easy right?

Now let's understand how it worked. When you typed [localhost:4567](http://localhost:4567) in your browser, it checked in `app.rb` file if route for this url is defined, since this is root of website, it will look for route with `/`. And that's what we have defined with `get` method in app.rb file.

In Sinatra, a route is an HTTP method paired with a URL pattern. Each route is associated with a block. Routes will be evaluated in the same order as they are defined. The first route that matched will be invoked.

Now let's add more routes in `app.rb` file and restart  app using `ruby app.rb`

```ruby
# app.rb

require 'sinatra'

get '/' do
  'Welcome to contacts app!'
end

get '/home' do
    'Home page'
end

get '/contacts' do
    'This page is under construction'
end
```

Now visit [home](http://localhost:4567/home) and [contacts](http://localhost:4567/contacts) pages. You should see same messages as defined in routes.

You might have noticed, you need to restart `app.rb` everytime you make a change. How we can simplify this?

We will use the gem 'sinatra-contrib' for this. Go ahead and install this gem now

```ruby
gem install sinatra-contrib
```

Now in your `app.rb` file, require the following library which comes as part of `sinatra-contrib` gem

```ruby
require 'sinatra/reloader'
```

Run your app now `ruby app.rb`. While the app is running make any changes to the route messages to verify auto reload is working. The site will display updated content without needing the app restart.

The complete app.rb file

```ruby
# app.rb

require 'sinatra'
require 'sinatra/reloader'

get '/' do
  'Welcome to contacts app!'
end

get '/home' do
    'Home page'
end

get '/contacts' do
    'This page is under construction'
end

```

Hope that was helpful, we will see more on Sinatra web development in next post!