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

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
Posted by karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Accessing static

So basically, when we are accessing the data from the public folder, basically we are accessing the data from the server, by giving it a domain, as we gave it a domain ''/static'' which is not a folder but instead a domain name to follow along and retrieve the data. Is my understanding of the static assets accessibility right?

If yes, can't we just use a relative path, by going from folder to folder?

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Caleb Kemp, hello sir, sorry calling out again, but actually, concepts explained by you are very clear to me, that's why I am tagging you. Would you be able to help me here. Sorry and thankyou

2 Answers

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 Points

So if your Express server let every piece of information on your server (including usernames and passwords) be available to the public, that would be a bad thing. So, outside users will only be given access to specified directories, which get passed in as an argument. He does this on line 16 app.use(express.static('public')). So, in this example, only files in the "public" directory will be available, and this is conventional. However, he could have written something like, app.use(express.static('unconventionalName')) to have stored the public data in. I just wanted to make sure you knew that you can make more than one directory available, and it doesn't necessarily have to be named "public" (although that is a best practice). Now for the main part that was confusing you, what is this weird "/static" thing? It is called a "mount path". A "mount path" is a virtual path prefix (where the path does not actually exist in the file system). Hmm...let's see if we can explain that better. Suppose you had a website of pictures of drains. When people type in "/drains", all your drain pictures are displayed. However, most of your users type in "/German/drains" into your site and get no result. You have no folder directory called "/German/drains", but you still want it to display your drain pictures for them. Using a mount directory, you could make both "/German/drains", and "drains" return your "/drains" results even though you still have no "/German/drains" directory. I'm not saying you'll use it every day, but I hope it at least kind of makes sense. It has nothing to do with your domain name. Hope that helps :smile:

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

hey Caleb Kemp, thankyou for the response, I understood it is a mount path but then why do we link css in the pug file like this

link(rel = 'stylesheet' href="/static/css/style.css")

That's where I am actually confused, this means to me we are picking up the css files from the web server. even if it is a mount path but if we access the same file in web we get that and even for css we are giving a URL?

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 Points

Ok, the previous example I gave wasn't good. If you want multiple urls to point to the same directory that is easily accomplished with routes. Mount paths are used for when references are made inside your code. So why are mount paths used?! Well, in the example he gave, you notice Guil had folders named "css, js ,views, images, and routes". But what would happen if Guil decided he needed a route with one of those directory names, say "/images". As it is, this would create a route conflict (same name pointing to route and a directory). This is where "mount paths" come in. Mount paths allow you to pick a name to refer to the static directories that you feel certain you won't be using as routes or URLs.

to reference public/css/style.css with this code

app.use(express.static('public'));

you would have to write "/css/style.css"

with this code

app.use(express.static('public'));
app.use('/static', express.static('public'));

Guil could have used "/css/style.css" OR "/static/css/style.css".

However Guil did this

app.use('/static', express.static('public'));

He removed public, so only "/static/css/styel.css" worked. That's why there was a need to change your path names. If he had done as in the second example, there would have been no need to change the path names, however, the route conflicts would have still been there. In summary, mount paths are to eliminate namespace and route conflicts. Sorry, my first explanation of mount paths was not correct.