Setup Sinatra Application

This guide walks you through setting up a Sinatra web application from scratch. Sinatra is a lightweight Ruby web framework that allows you to quickly create web applications with minimal effort and configuration.

Create Project Foundation

• Create a new project directory:

mkdir my-sinatra-app
cd my-sinatra-app

• Create the Gemfile to manage dependencies:

echo "source \"https://rubygems.org\"
git_source(:github) { |repo| \"https://github.com/\#{repo}.git#\" }" > Gemfile

The Gemfile defines your application's gem dependencies and where to fetch them from.

Install Required Gems

• Add necessary gems to your application:

bundle add builder i18n kramdown pg puma rack rack-test require_all rspec sassc sinatra sinatra-contrib slim tux

These gems provide essential functionality: - sinatra: The core framework - sinatra-contrib: Extensions for Sinatra - slim: Template engine - puma: Web server - i18n: Internationalization support - kramdown: Markdown processing

Create Project Structure

• Set up the basic directory structure:

mkdir -p public/assets/js public/assets/css views lib spec locales/en locales/fr

• Create key files for your application:

# Main application file
touch app.rb

# Rack configuration
touch config.ru

# View templates
touch views/layout.slim views/index.slim views/content.slim views/404.slim

# Static assets
touch public/content.md public/favicon.ico public/icon.png public/icon.svg
touch public/site.webmanifest public/robots.txt

# JavaScript and CSS
touch public/assets/js/app.js public/assets/css/main.scss

# Localization files
touch locales/en/en.yml locales/fr/fr.yml

# Library modules
touch lib/sitemap.rb

# Test files
touch spec/app_spec.rb

This structure follows Sinatra conventions with separate directories for views, public assets, and library code.

Configure Rack Application

• Create the config.ru file for Rack:

require 'rubygems'
require 'bundler'

Bundler.require

require './app'
run SinatraApp

The config.ru file tells Rack how to run your application and loads necessary dependencies.

Build Main Application

• Create the core application file app.rb:

class SinatraApp < Sinatra::Base
register Sinatra::Contrib

configure do
  set :root, File.dirname(__FILE__)
  set :public_folder, 'public'
  set :views, 'views'
  enable :sessions

  # I18n configuration
  I18n.load_path += Dir[File.join(settings.root, 'locales', '*', '*.yml')]
  I18n.default_locale = :fr
end

# Helpers
helpers do
  def t(*args)
    I18n.t(*args)
  end

  def locale
    params[:locale] || I18n.default_locale
  end
end

before do
  I18n.locale = locale if params[:locale]
end

# Routes
get '/' do
  slim :index
end

get '/from-file' do
  @content = Kramdown::Document.new(File.read('public/content.md')).to_html
  slim :content
end

not_found do
  slim :'404'
end
end

This modular application sets up configuration, helpers for internationalization, and routes for the application.

Create View Templates

• Create a layout template in views/layout.slim:

doctype html
html lang=locale
head
  meta charset="utf-8"
  title Sinatra Application
  link rel="stylesheet" href="/assets/css/main.css"
body
  header
    h1 = t('app.title')
    nav
      a href="/?locale=en" English
      a href="/?locale=fr" Français
  main
    == yield
  footer
    p = t('app.footer')
  script src="/assets/js/app.js"

• Create the homepage in views/index.slim:

section.content
h2 = t('home.title')
p = t('home.welcome')
a href="/from-file" View Markdown Content

Templates use the Slim syntax for a cleaner, more readable format compared to HTML. The templates also use the t helper for internationalization.

Set Up Internationalization

• Create English translations in locales/en/en.yml:

en:
app:
  title: "Sinatra Application"
  footer: "© 2025 Sinatra Application"
home:
  title: "Welcome"
  welcome: "This is a Sinatra application example."

• Create French translations in locales/fr/fr.yml:

fr:
app:
  title: "Application Sinatra"
  footer: "© 2025 Application Sinatra"
home:
  title: "Bienvenue"
  welcome: "Ceci est un exemple d'application Sinatra."

These YAML files define content in different languages that can be accessed using the t helper in views.

Add Markdown Support

• Create sample markdown content in public/content.md:

# Markdown Content

This is a sample Markdown file that will be rendered in HTML.

## Features

- **Bold text** and *italic text*
- Lists and sublists
- [Links](http://example.com)
- Code samples

• Create the content view in views/content.slim:

section.markdown-content
== @content
a href="/" Back to Home

This setup allows you to render Markdown files as HTML using the Kramdown gem.

Set Up Testing

• Initialize RSpec:

bundle exec rspec --init

• Create a basic test in spec/app_spec.rb:

require_relative '../app'
require 'rack/test'

RSpec.describe SinatraApp do
include Rack::Test::Methods

def app
  SinatraApp
end

it "loads the homepage" do
  get '/'
  expect(last_response).to be_ok
  expect(last_response.body).to include('Sinatra')
end

it "loads the markdown page" do
  get '/from-file'
  expect(last_response).to be_ok
  expect(last_response.body).to include('Markdown')
end
end

Testing ensures your application works as expected and helps catch regressions.

Run Your Application

• Start the Sinatra application:

bundle exec puma

• Access your application at: http://localhost:9292

Puma is a fast and concurrent web server for Ruby applications.

Prepare for Deployment

• Specify your Ruby version in the Gemfile:

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git#" }

ruby "3.2.5"

# Gems...

• Add platform specifications for deployment:

bundle lock --add-platform x86_64-linux --add-platform ruby

These steps prepare your application for deployment to services like Heroku.

Access Your Application

Once deployed, you can access different versions of your application:

• English Version: http://your-app.com/?locale=en
• French Version: http://your-app.com/?locale=fr
• Markdown Content: http://your-app.com/from-file

Your application now supports multiple languages and can render Markdown content.