# Set up your Ruby and Sinatra development environment

This tutorial covers how to build a Twilio Voice web application in the Ruby language and Sinatra framework. It includes the configuration settings needed for Twilio webhook testing.

**Time to complete**: Approximately 20-45 minutes depending on your operating system and internet speed.

## Prerequisites

Before you begin this tutorial, configure, acquire, and install the following:

* Administrative access to your computer to install software
* A stable internet connection for downloading packages and dependencies
* Basic familiarity with using the Command Prompt or terminal.
* A [Twilio account](https://www.twilio.com/try-twilio) (free tier available)
* A [Twilio phone number](https://www.twilio.com/console/phone-numbers/incoming) with voice capabilities (you can get one for free when you sign up for a Twilio account). For more information on setting up your Twilio phone number, check out the [Twilio Voice Quickstart](https://www.twilio.com/docs/voice/quickstart/server).
* [Ruby 2.6 or later](https://www.ruby-lang.org/en/documentation/installation/)
* [ngrok](https://ngrok.com/)
* [Visual Studio Code](https://code.visualstudio.com/) to write Ruby code. Though any text editor or IDE works, this tutorial provides examples and command for VS Code.

## Build a Twilio Voice web app

Using VS Code, create a directory and configure your Sinatra settings for your app:

1. Open VS Code.
2. To open the terminal in VS Code, go to **View** > **Terminal**.
3. Create a directory for your project.

   ```bash
   mkdir my-twilio-project
   cd my-twilio-project
   code .
   ```
4. Install the required gems:

   ```bash
   gem install sinatra rackup puma twilio-ruby
   ```

### Create the application source file

To create a Twilio app using Sinatra, create Ruby file, run it with Sinatra, and verify its response in a browser:

1. Add a file called `index.rb` to your workspace.
2. with the following code:

   ```ruby {title="index.rb"}
   require 'rack'
   require 'rack/handler/puma'
   require 'twilio-ruby'

   puts "Sinatra server starting..." # This confirms that the server is running.

   class BasicApp
     def call(env)
       if env['REQUEST_METHOD'] == 'GET' && env['PATH_INFO'] == '/'
         twiml = Twilio::TwiML::VoiceResponse.new do |response|
           response.say(message: 'Hello World')
         end
         [200, {'Content-Type' => 'text/xml'}, [twiml.to_s]]
       else
         [404, {'Content-Type' => 'text/plain'}, ['Not Found']]
       end
     end
   end

   options = {
     Host: '0.0.0.0',
     Port: 4567
   }
   Rack::Handler::Puma.run(BasicApp.new, **options)
   # This line of code bypasses Sinatra's protection middleware which allows external requests.
   ```
3. Save this file in your workspace.
4. Run your Twilio Voice web app in the terminal.

   ```bash
   ruby index.rb &
   ```
5. Open your browser to `http://localhost:4567`. The browser should display:

   ```xml
   <?xml version="1.0" encoding="UTF-8"?><Response><Say>Hello World</Say></Response>
   ```

   This verifies the proper configuration of your Ruby and Sinatra development environment and that you can access your app on your local system.

## Check your webhook configuration

Web applications launched from your computer can't be accessed outside your computer. To communicate with your app, most Twilio services use [webhooks](https://en.wikipedia.org/wiki/Webhook).

**For example**: When Twilio receives an incoming phone call, it requests a URL in your app for instructions on how to handle the call.

To allow webhooks from Twilio to access your application, use ngrok.

1. Start your app as described previously.
2. Start ngrok with the following options:

   ```bash
   ngrok http 4567
   ```

   Terminal output resembles the following:

   ```bash
   # !mark(7:8)
   ngrok by @inconshreveable

   Tunnel Status  online
   Version        3.x.x
   Region         us
   Web Interface  http://127.0.0.1:4040
   Forwarding     http://<random_subdomain>.ngrok.io -> http://localhost:4567
   Forwarding     https://<random_subdomain>.ngrok.io -> http://localhost:4567
      Connections    ttl     opn     rt1     rt5     p50     p90
                     0       0       0.00    0.00    0.00    0.00
   ```
3. A successful ngrok configuration results in your Twilio Voice app returning the following XML at your ngrok URL:

   ```xml
   <?xml version="1.0" encoding="UTF-8"?><Response><Say>Hello World</Say></Response>
   ```

## Additional resources

Learn more about Twilio and Sinatra with the following resources:

### Twilio

* [SMS developer quickstart](/docs/messaging/quickstart)
* [WhatsApp Business Platform with Twilio quickstart](/docs/whatsapp/quickstart)
* [Programmable Voice quickstart](/docs/voice/quickstart/server)
* [Email API Quickstart for Ruby](/docs/sendgrid/for-developers/sending-email/quickstart-ruby)

### Sinatra

* [Sinatra: Getting started](http://www.sinatrarb.com/intro.html)
* [Sinatra: API reference](https://www.rubydoc.info/gems/sinatra)