Gecko [ fernandoquevedodop.com ]

Name	Size	Permission
README.md.gz	7.38 KB	-rw-r--r--
assets.md	3.09 KB	-rw-r--r--
changelog.Debian.gz	643 B	-rw-r--r--
cloud9.md.gz	4.06 KB	-rw-r--r--
copyright	1.44 KB	-rw-r--r--
css.md.gz	2.4 KB	-rw-r--r--
deployment.md.gz	2.2 KB	-rw-r--r--
docker.md	1.56 KB	-rw-r--r--
engines.md.gz	2.19 KB	-rw-r--r--
env.md	1.93 KB	-rw-r--r--
es6.md	2.8 KB	-rw-r--r--
folder-structure.md	1.26 KB	-rw-r--r--
misc.md	470 B	-rw-r--r--
props.md.gz	1.73 KB	-rw-r--r--
testing.md.gz	1.84 KB	-rw-r--r--
troubleshooting.md.gz	2.69 KB	-rw-r--r--
typescript.md	2.64 KB	-rw-r--r--
v4-upgrade.md.gz	2.82 KB	-rw-r--r--
webpack-dev-server.md	2.85 KB	-rw-r--r--
webpack.md.gz	3.75 KB	-rw-r--r--
yarn.md	789 B	-rw-r--r--

Code Editor : folder-structure.md

# Folder Structure

## Packs a.k.a webpack entries

"Packs" is a special directory made only for webpack entry files so don't put anything
here that you don't want to link in your views.

## Source

You can put your app source under `app/javascript` folder or whatever you have configured
in `config/webpacker.yml`.

## Example

Let's say you're building a calendar app. Your JS app structure could look like this:

```js
// app/javascript/packs/calendar.js

import 'calendar'
```

```
app/javascript/calendar/index.js // gets loaded by import 'calendar'
app/javascript/calendar/components/grid.jsx
app/javascript/calendar/styles/grid.sass
app/javascript/calendar/models/month.js
```

```erb
<%# app/views/layouts/application.html.erb %>

<%= javascript_pack_tag 'calendar' %>
<%= stylesheet_pack_tag 'calendar' %>
```

But it could also look a million other ways.

## Namespacing

You can also namespace your packs using directories similar to a Rails app.

```
app/javascript/packs/admin/orders.js
app/javascript/packs/shop/orders.js
```

and reference them in your views like this:

```erb
<%# app/views/admin/orders/index.html.erb %>

<%= javascript_pack_tag 'admin/orders' %>
```

and

```erb
<%# app/views/shop/orders/index.html.erb %>

<%= javascript_pack_tag 'shop/orders' %>
```

${this.title}

Code Editor : folder-structure.md