# Putting component .js and .hbs together in ember-cli

**URL:** <https://discuss.emberjs.com/t/putting-component-js-and-hbs-together-in-ember-cli/6701>\
**Category:** Design\
**Created:** [November 14, 2014, 8:01am UTC](https://discuss.emberjs.com/t/putting-component-js-and-hbs-together-in-ember-cli/6701 "2014-11-14T08:01:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rookie](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rookie](https://discuss.emberjs.com/u/rookie)\
**Post date:** [November 14, 2014, 8:01am UTC](https://discuss.emberjs.com/t/putting-component-js-and-hbs-together-in-ember-cli/6701/1 "2014-11-14T08:01:48Z")

</div>

I have various components whose js files are under components/ and hbs files are under templates/components.

Is there a simple way to put them together in ember-cli? My proposed structure would be having both the js and hbs file under components/component-name/

Thanks

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [November 14, 2014, 8:19am UTC](https://discuss.emberjs.com/t/putting-component-js-and-hbs-together-in-ember-cli/6701/2 "2014-11-14T08:19:15Z")

</div>

If you set up pods it can work this way.

Read more about pods here

> **[The Ember CLI - Introduction - Ember CLI Guides](https://cli.emberjs.com/release/)**
>
> The Ember CLI (command line interface) is the official way to create, build, test, and serve the files that make up an Ember app or addon. Many things have to happen before a web app is ready for the browser. Ember CLI helps you get there with...

Follow these steps

Setup pods path prefix in `config/environment.js`

It doesn’t have to be the word “pods” but something like

```
 // config/environment.js
 module.exports = function(environment) {
   var ENV = {
     modulePrefix: 'app',
     podModulePrefix: 'app/pods' // directory where resolver will look for your resource files
     environment: environment,
     baseURL: '/',
     locationType: 'auto',

```

Then when you run the generator for components add the `--pod` flag. e.g.

```
ember generate component x-foo --pod

ember generate component x-bar --pod

```

Then this will create your component in just the way you describe:

```
app/pods/components/x-foo
app/pods/components/x-bar

```

You should end up with a folder structure like this

```
...
  ├── app
  │ ├── pods
  │ │ └── components
  │ │ └── x-foo
  │ │ │ ├── component.js
  │ │ │ └── template.hbs
  │ │ └── x-bar
  │ │ ├── component.js
  │ │ └── template.hbs
...

```

---

<div class="post-metadata">

**Author:** ![rookie](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rookie](https://discuss.emberjs.com/u/rookie)\
**Post date:** [December 28, 2014, 1:53am UTC](https://discuss.emberjs.com/t/putting-component-js-and-hbs-together-in-ember-cli/6701/3 "2014-12-28T01:53:35Z")

</div>

Thanks for the info. Is it possible to do the same for a view?