snodgrass23 / base12

12factor.net web application boilerplate for node.js built on express.js
170 stars 26 forks source link

Make each component's public folder content accessible #46

Open RichardOzols opened 10 years ago

RichardOzols commented 10 years ago

For example the "components/user/public/" contents are not accessible when the view references them. I am adding BackboneJS widgets to each component and would like to keep the static files like .js separate without the need of recreating them in the main public folder.

snodgrass23 commented 10 years ago

:thumbsup:

I've played with a few implementations, but haven't settled on the way I want to do it. Something to consider, and I'd welcome feedback, is name spacing.

Simplest option is to just make those public directories directly accessible and leave it up to the programmer to namespace their files. I went ahead and pushed up an example of that in the default user component.

4b4de4d1bac279872ebeef86d85dc3d6b6dabf82

The gist is you need to add this line into your index file for the component where you'd like to serve the files.

app.use(require('express')['static'](path.join(__dirname, 'public')));

This is how I would handle everything except stylus files. Those I generally just link to the main shared file.

https://github.com/Skookum/base12/blob/master/shared/styles/global.styl#L15

If you'd like to be able to get to them individually like the other assets above, you'll need to setup a stylus middleware for the component. Something like this:

https://github.com/Skookum/base12/blob/master/lib/middleware/index.js#L23 https://github.com/Skookum/base12/blob/master/lib/middleware/stylus.js

I can go into more detail on that, or put up a full example if you'd like.

The biggest thing to hammer out after this is how to handle compiling the files into a single source for production. I've recently started putting in some Grunt scripts to handle some compilation tasks, but more work needs to be done on this in particular.

RichardOzols commented 10 years ago

Thanks for coming back on this and appreciate the examples. For now I have implemented a very similar approach to your one for serving each components static files. I am exploring alternatives and will share my findings.

snodgrass23 commented 10 years ago

Sounds good. Once I settle on an approach, I'll work on abstracting the logic out of the components themselves so that they get this functionality by default. I'm definitely interested in hearing about whatever solution you land on.