# Organize controllers in Rails app without webpacker

**URL:** <https://discuss.hotwired.dev/t/organize-controllers-in-rails-app-without-webpacker/224>\
**Category:** General\
**Created:** [March 28, 2018, 9:19pm UTC](https://discuss.hotwired.dev/t/organize-controllers-in-rails-app-without-webpacker/224 "2018-03-28T21:19:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![marceloeloelo](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/marceloeloelo/32/181_2.png) [@marceloeloelo](https://discuss.hotwired.dev/u/marceloeloelo)\
**Post date:** [March 28, 2018, 9:19pm UTC](https://discuss.hotwired.dev/t/organize-controllers-in-rails-app-without-webpacker/224/1 "2018-03-28T21:19:37Z")

</div>

Hi,

I’m wondering. What’s your recommendation on file organization for a Rails application that’s not using a build system?

For example, let’s say a Rails 5.1 app without webpacker. I saw the doc from [https://stimulusjs.org/handbook/installing#using-without-a-build-system](https://stimulusjs.org/handbook/installing#using-without-a-build-system) but it seems to suggest registering every controller in the same file, which I guess won’t be desirable for most developers.

Where would you suggest placing Stimulus controllers? How would you “share” the application object across the different \_controller.js files if you are working with an application manifest with a require\_tree?

Thanks

---

<div class="post-metadata">

**Author:** ![mdmccarley89](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@mdmccarley89](https://discuss.hotwired.dev/u/mdmccarley89)\
**Post date:** [August 8, 2018, 10:17pm UTC](https://discuss.hotwired.dev/t/organize-controllers-in-rails-app-without-webpacker/224/2 "2018-08-08T22:17:36Z")

</div>

Were you ever able to find a good solution for sharing the application instance across the controller files? I’m starting a new project and need to find a good solution. Thanks!

---

<div class="post-metadata">

**Author:** ![jingyulong](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jingyulong](https://discuss.hotwired.dev/u/jingyulong)\
**Post date:** [January 11, 2019, 12:14pm UTC](https://discuss.hotwired.dev/t/organize-controllers-in-rails-app-without-webpacker/224/3 "2019-01-11T12:14:09Z")

</div>

I’m wondering the same things.

---

<div class="post-metadata">

**Author:** ![kaspermeyer](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/kaspermeyer/32/483_2.png) [@kaspermeyer](https://discuss.hotwired.dev/u/kaspermeyer)\
**Post date:** [January 11, 2019, 7:44pm UTC](https://discuss.hotwired.dev/t/organize-controllers-in-rails-app-without-webpacker/224/4 "2019-01-11T19:44:57Z")

</div>

I’ve been using Stimulus in a Rails app that still uses Sprockets, where I managed to organize the controllers in separate folders and files without the use of Webpacker. The trick is to attach the running Stimulus application to the `window` object, which makes it accessible across multiple files.

First, ensure that you’ve installed the [sprockets-es6](https://github.com/TannerRogalsky/sprockets-es6) gem in the project if you want to use Babel and that Stimulus is added before the application manifest inside `<head>`:

```auto
<!-- layouts/application.html.erb -->
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>

```

Then you can create a folder structure similar to the following:

```auto
javascripts/
├── application.coffee
├── initializers/
│ └── stimulus.coffee
└── controllers/
    ├── wizard.es6
    └── bootstrap/
        ├── tooltip.es6
        └── modal.es6
    

```

Where each file looks something like this:

```coffeescript
# application.coffee
#= require_tree ./initializers
#= require_tree ./controllers

```

```coffeescript
# initializers/stimulus.coffee
window.stimulus = Stimulus.Application.start() unless 'stimulus' of window

```

```javascript
// controllers/wizard.es6
stimulus.register("wizard", class extends Stimulus.Controller {
  // ...
})

```

```javascript
// controllers/bootstrap/modal.es6
stimulus.register("bootstrap--modal", class extends Stimulus.Controller {
  // ...
})

```

```javascript
// controllers/bootstrap/tooltip.es6
stimulus.register("bootstrap--tooltip", class extends Stimulus.Controller {
  // ...
})

```

Hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![obelich](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/obelich/32/1691_2.png) [@obelich](https://discuss.hotwired.dev/u/obelich)\
**Post date:** [February 24, 2021, 11:17pm UTC](https://discuss.hotwired.dev/t/organize-controllers-in-rails-app-without-webpacker/224/5 "2021-02-24T23:17:58Z")

</div>

I have a question how i can import external library for example bootstrap-datepicker from Js or using Javascript librarys is importing in application.js

I try this  
stimulus.register(“wizard”, class extends Stimulus.Controller {  
import datepicker from “bootstrap-datepicker”  
})

But dont working I trying to use in Rails 4 very old proyect