Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Posted by Joseph Lander
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Lander
Full Stack JavaScript Techdegree Graduate 27,765 Points

Example of where creating virtual '/static' directory is used

The video says that this technique of creating a virtual folder called static can prevent these files from being affected when processing the other code. The idea makes sense to me but it's already in a separate folder from the other code.

I did some work with Gulp that can process files for you and put them in a distribution folder but again, you write what you want the task runner to do and give paths so I can't imagine a proper use case with Express.

Currently, as the static folder doesn't actually exist it doesn't feel helpful and through the act of completing this challenge, it seems that the static code won't be affected without our intervention anyway.

Does anyone have any broad general explanations for when this could become an issue? Thanks

1 Answer

Liam Clarke
Liam Clarke
19,938 Points

Hello,

In most cases it wont be an issue and its down to preference and conventions you are following, you could have all your static assets in one folder and nested within.

However, it becomes useful when your project grows and you want to sort your static assets into multiple directories. Maybe your working in a multi team environment or you dont want to be tied down to your internal directory being the public static directory.

For example, take the following app structure:

| - assets
    | - css
    | - js
    | - images
| - team-1
    | - index.html
| - team-2
    | - index.html

Here we separate the domains of each team so they can work in parralel, team 1 own the product and team 2 deal with checkout.

app.use('/assets', express.static('assets'));
app.use('/product', express.static('team-1'));
app.use('/checkout', express.static('team-2'));

Now a user doesnt know the difference between who owns which part of the site or what directory it is in, they just go to the /product route and see a list of products and go to /checkout to make a purchase.

Hope this helps

Joseph Lander
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Lander
Full Stack JavaScript Techdegree Graduate 27,765 Points

I appreciate that detail. Thank you.

Yes, that makes more sense now. Previously as far as I could make out from the examples on the Express documentation https://expressjs.com/en/starter/static-files.html , you had a choice of:

app.use(express.static('public'));
//<all-my-static-files>;

or

app.use('/static', express.static('public'));
//static/<all-my-static-files>;

Which to me was putting a folder in a folder. Like double-bagging your groceries. It didn't separate anything else distinctly, just made an extra step to get through.