01 logo

How to Apply Cocoon Gems in Rails 6?

by Rachael Grey about a year ago in apps
Report Story

Wanted to learn how to implement Cocoon gem in Rails 6 but don’t know where to start? Here’s a tutorial with the implementation of the Cocoon gem example.

There exist countless kinds of gems in the ROR structure. The cocoon is such a pearl. If you don’t know enough regarding this Gem, don’t agonize! In this walkthrough, we will perform the Cocoon Gem model and study deeper regarding this. Ready to write code and embed cocoon-shaped gems!

This tutorial will teach how you can produce complicated Rails by utilizing cocoon jewelry in Ruby on rails. For example, suppose you want to build a structure for users to enter the names of their associates. You don't know headway how many associates your users will have. Now you need to find out how to supplement a particular quantity of areas in the design?

We will see how to use the cocoon treasure to add or delete inserted entrants nonparallel without creating a unique query. We will form a demo where users can add associates. Then embed the name of the friend. User name attribute.

A step-by-step process on how to build Cocoon Gem in Rails 6:

1. Build a brand-new rail active application

rails new cocoon-gem-example

2. Instantly, attach jquery to the design applying the following code:

yarn add jquery

3. Renew the webpack folder with the resulting cryptogram

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')


new webpack.ProvidePlugin({

$: 'jquery/src/jquery',

jQuery: 'jquery/src/jquery'



module.exports = environment

4. Connect the epitome to the folder:

# Unobtrusive nested forms handling, using jQuery. Use this & discover cocoon-heaven.

gem 'cocoon'

5. Attaching and establishing cocoon-shaped gems utilizing this package will not wholly fix the cocoon-shaped gems of the application. For this, we additionally require to affix a cocoon bag with yarn:

yarn add github:nathanvda/cocoon#c24ba53

6. Append the following couple of words in the javascript.js file.


import "cocoon";

7. Pour this code to establish cocoon gem

bundle install

8. Instantly, create a User prototype

rails g model User

9. Create a Companion pattern with the guidance of the subsequent code:

rails g model Friend

10. Now, select the immigration data created using the first pair of commands. The file names are 20210427114709_create_users.RB and 20210427114810_create_friends.RB, located in the db/migrate directory:


class CreateUsers < ActiveRecord::Migration[6.1]

def change

create_table :users do |t|

t.string :name, null: false






class CreateFriends < ActiveRecord::Migration[6.1]

def change

create_table :friends do |t|

t.references :user, null: false, foreign_key: true

t.string :friend_name, null: false





11. It is now time to transfer to flash the previous modifications to the app architecture:

$ rails db:migrate

12. Renovate the prototype document of user.rb

class User < ApplicationRecord

has_many :friends, dependent: :destroy

accepts_nested_attributes_for :friends


13. As mentioned before, we necessitate changing the friend's model data, namely friend.rb.

class Friend < ApplicationRecord

belongs_to :user


14. Create User regulator

rails g controller users

15. Inaugurate app/controller and compose the following cipher. As you can view here, we have attached the _destroy virtual attribute to the user's allowed options. Shortcut).

class UsersController < ApplicationController

def new

@user = User.new

@friends = @user.friends.build


def create

@user = User.new(user_params)

if @user.save

redirect_to user_path(@user)


render action: :new



def show

@user = User.find(params[:id])

@friends = @user.friends



def user_params

params.require(:user).permit(:name, friends_attributes: [:id, :friend_name, :_destroy])



16. Enter the user interface section. Create a new file-new.html.erb in the users' register and attach the subsequent language:

<%= form_for(@user) do |f| %>





<%= f.label :name %>

<%= f.text_field :name %>



<%= f.simple_fields_for :friends do |t| %>

<%= render "friend_fields", :f => t %>

<% end %>



<%= link_to_add_association "Add Friend", f, :friends %> <!-- (*) -->





<%= f.submit %>



<% end %>


To conclude, I hope with the help of this tutorial, you are able to understand about Cocoon Gem Example In Rails 6. If you are a ROR fan and desire to discover deeper regarding Ruby on Rails, please hit the ROR tutorial and get started. You need to find dedicated developers from a top-notch development company to create such unique applications.


About the author

Rachael Grey

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights


There are no comments for this story

Be the first to respond and start the conversation.

Sign in to comment

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2022 Creatd, Inc. All Rights Reserved.