<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: zenkul</title>
    <description>The latest articles on DEV Community by zenkul (@zenkulkan).</description>
    <link>https://dev.to/zenkulkan</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2593803%2Faf0d88f9-540a-47f1-b15f-cce7c4274ddf.jpg</url>
      <title>DEV Community: zenkul</title>
      <link>https://dev.to/zenkulkan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zenkulkan"/>
    <language>en</language>
    <item>
      <title>Effortless API Documentation with Grape, Grape Swagger, and rswag-ui</title>
      <dc:creator>zenkul</dc:creator>
      <pubDate>Fri, 20 Dec 2024 05:40:53 +0000</pubDate>
      <link>https://dev.to/zenkulkan/effortless-api-documentation-with-grape-grape-swagger-and-rswag-ui-3l88</link>
      <guid>https://dev.to/zenkulkan/effortless-api-documentation-with-grape-grape-swagger-and-rswag-ui-3l88</guid>
      <description>&lt;h2&gt;
  
  
  Effortless API Documentation with Grape, Grape Swagger, and rswag-ui
&lt;/h2&gt;

&lt;p&gt;Documenting APIs can be a tedious chore, but it's essential for developers to understand and use your API effectively. Luckily, the Ruby ecosystem provides powerful tools to streamline this process. In this post, we'll explore how to combine Grape, Grape Swagger, and rswag-ui to effortlessly generate beautiful, interactive API documentation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Grape: A Powerful Foundation
&lt;/h3&gt;

&lt;p&gt;Grape is a lightweight framework for building REST-like APIs in Ruby. It simplifies API development with a clean, DSL-like syntax for defining endpoints, handling parameters, and formatting responses.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="c1"&gt;# app/api/v1/books.rb&lt;/span&gt;
&lt;span class="k"&gt;module&lt;/span&gt; &lt;span class="nn"&gt;V1&lt;/span&gt;
  &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Books&lt;/span&gt; &lt;span class="no"&gt;Grape&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;API&lt;/span&gt;
    &lt;span class="nb"&gt;format&lt;/span&gt; &lt;span class="ss"&gt;:json&lt;/span&gt;
    &lt;span class="n"&gt;resource&lt;/span&gt; &lt;span class="ss"&gt;:book&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
      &lt;span class="n"&gt;desc&lt;/span&gt; &lt;span class="s1"&gt;'Get a list of books'&lt;/span&gt;
      &lt;span class="n"&gt;get&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
        &lt;span class="no"&gt;Book&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;
      &lt;span class="k"&gt;end&lt;/span&gt;

      &lt;span class="n"&gt;desc&lt;/span&gt; &lt;span class="s1"&gt;'Create a new book'&lt;/span&gt;
      &lt;span class="n"&gt;params&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
        &lt;span class="n"&gt;requires&lt;/span&gt; &lt;span class="ss"&gt;:name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;type: &lt;/span&gt;&lt;span class="no"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;desc: &lt;/span&gt;&lt;span class="s1"&gt;'Book name'&lt;/span&gt;
        &lt;span class="n"&gt;requires&lt;/span&gt; &lt;span class="ss"&gt;:author_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;type: &lt;/span&gt;&lt;span class="no"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;desc: &lt;/span&gt;&lt;span class="s1"&gt;'Author name'&lt;/span&gt;
      &lt;span class="k"&gt;end&lt;/span&gt;
      &lt;span class="n"&gt;post&lt;/span&gt;  &lt;span class="k"&gt;do&lt;/span&gt;
        &lt;span class="no"&gt;Book&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create!&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;declared&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
      &lt;span class="k"&gt;end&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Grape Swagger automatically generates Swagger documentation from your Grape API definitions. Simply include it in your &lt;code&gt;Gemfile&lt;/code&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="c1"&gt;# Gemfile&lt;/span&gt;
&lt;span class="n"&gt;gem&lt;/span&gt; &lt;span class="s1"&gt;'grape-swagger'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, to enhance your API documentation further, add the following configuration to your base API class:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="c1"&gt;# app/api/v1/base.rb&lt;/span&gt;
&lt;span class="k"&gt;module&lt;/span&gt; &lt;span class="nn"&gt;V1&lt;/span&gt;
  &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Base&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;Grape&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;API&lt;/span&gt;
    &lt;span class="n"&gt;mount&lt;/span&gt; &lt;span class="no"&gt;V1&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Books&lt;/span&gt;

    &lt;span class="n"&gt;add_swagger_documentation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="ss"&gt;api_version: &lt;/span&gt;&lt;span class="s1"&gt;'v1'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="ss"&gt;mount_path: &lt;/span&gt;&lt;span class="s1"&gt;'/api-docs'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="ss"&gt;info: &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="ss"&gt;title: &lt;/span&gt;&lt;span class="s1"&gt;'API title'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="ss"&gt;description: &lt;/span&gt;&lt;span class="s1"&gt;'API description'&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This configuration sets up Swagger documentation for your Grape API:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;api_version&lt;/code&gt;: Specifies the version of your API, which is 'v1' in this case.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;mount_path&lt;/code&gt;: Defines the URL path where the Swagger UI will be mounted (&lt;code&gt;/api-docs&lt;/code&gt;). It will return json response for swagger document on &lt;code&gt;api/v1/api-docs&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;info&lt;/code&gt;: Provides basic information about your API, including the title and a brief description.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By including this configuration in your Grape API, you enable Swagger to automatically generate documentation based on your API definitions. This documentation can then be accessed through the Swagger UI(rswag-ui).&lt;/p&gt;

&lt;h3&gt;
  
  
  rswag-ui: An Interactive UI for Swagger
&lt;/h3&gt;

&lt;p&gt;rswag-ui takes your API documentation to the next level by providing an interactive environment where developers can explore and experiment with your API. It's like a playground for your API, allowing developers to get hands-on experience without writing any code.&lt;/p&gt;

&lt;p&gt;This UI documentation empowers developers to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Explore endpoints and parameters:&lt;/strong&gt; Easily browse, view descriptions, and understand requirements.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Make test requests:&lt;/strong&gt; Execute requests directly within the documentation, inputting data and inspecting responses.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;View response codes and schemas:&lt;/strong&gt; Understand response structures and handle different scenarios effectively. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;rswag-ui transforms your API documentation into a dynamic tool for understanding and experimentation.&lt;/p&gt;

&lt;p&gt;To integrate rswag-ui, add these to your &lt;code&gt;Gemfile&lt;/code&gt;, &lt;code&gt;routes.rb&lt;/code&gt; and  &lt;code&gt;initializers/swagger.rb&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="c1"&gt;# Gemfile&lt;/span&gt;
&lt;span class="n"&gt;gem&lt;/span&gt; &lt;span class="s1"&gt;'rswag-ui'&lt;/span&gt;

&lt;span class="c1"&gt;# config/routes.rb&lt;/span&gt;
&lt;span class="n"&gt;mount&lt;/span&gt; &lt;span class="no"&gt;Rswag&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Ui&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Engine&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'/api-docs'&lt;/span&gt;

&lt;span class="c1"&gt;# config/initializers/swagger.rb&lt;/span&gt;
&lt;span class="no"&gt;Rswag&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Ui&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;configure&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;c&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
  &lt;span class="c1"&gt;# This line instructs rswag-ui to fetch the Swagger JSON definition &lt;/span&gt;
  &lt;span class="c1"&gt;# from '/api/v1/api-docs' and display it in the interactive UI.&lt;/span&gt;
  &lt;span class="n"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;swagger_endpoint&lt;/span&gt; &lt;span class="s1"&gt;'/api/v1/api-docs'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'API V1'&lt;/span&gt;
  &lt;span class="c1"&gt;# c.swagger_endpoint '/api/v2/api-docs', 'API V2' Example for multiple API versions&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will mount rswag-ui at &lt;code&gt;/api-docs&lt;/code&gt;. Now you can access a beautiful, interactive documentation page for your API.&lt;/p&gt;

&lt;h4&gt;
  
  
  Here is how it looks &lt;code&gt;(http://localhost:3000/api-docs/index.html)&lt;/code&gt;:
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn455vbzvpwkydw78a7n6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn455vbzvpwkydw78a7n6.png" alt="Swagger UI on http://localhost:3000/api-docs/index.html" width="800" height="508"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;By leveraging Grape, Grape Swagger, and rswag-ui, you can significantly reduce the effort required to document your Rails APIs. This powerful combination allows you to focus on building your API while ensuring your documentation is always up-to-date and easy to understand.&lt;/p&gt;

</description>
      <category>ruby</category>
      <category>rails</category>
      <category>api</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
