"Build a Simple Android App (2014)" was retired on August 31, 2016. You are now viewing the recommended replacement.

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

General Discussion

Posted by Daniel Maia
Daniel Maia
2,559 Points

How to organize my web site file tree?

I am working on a web site, and during the development of one of the pages, I found some problems with my file tree I'm unsure how I can solve it in an efficient way.

Here's my file tree:

|-- css
    |-- fonts
        |-- CODE Bold.otf
        |-- CODE Light.otf
        |-- WC_RoughTrad.otf
        |-- WC_RoughTrad.ttf
    |-- style.css
    |-- styleGrid.css
    |-- styleIndex.css

|-- img
    |-- BRBA.jpg
    |-- CircleDemo.jpg

|-- PlantSelection
    |-- index.html

|-- index.html

I'm working with the root file 'index.html', and when I link it to the CSS, I imported the 'WC_RoughTrad.otf' inside the 'fonts' folder, and that worked fine, however, when I try to do the same thing for 'PlantSelection/index.html', the font file won't be imported and some of the imports of the CSS will be limited due to a security policy of Mozilla Firefox (the web browser I'm using to test the project).

This error in mozilla's console has a 'status=2147500037', which Jonathan Kew (:jfkthame) in https://bugzilla.mozilla.org/show_bug.cgi?id=760436 stated:

"I believe this is working as designed. AIUI, the issue here is that for a page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions.

You can relax this by setting security.fileuri.strict_origin_policy to false in about:config, but as this gives the page access to your entire local filesystem, it's something to be used with caution."

I don't mind changing this setting to false and continue working with my project, but I don't want the users to get the same errors if they have this setting with a value of true.

I know one solution would be to have my CSS files and the fonts in the root directory, but that would completely break the organization of the file tree, and I would like to opt for an alternate solution.

I'd appreciate any help, if possible, and, as well, if anyone could tell me if it's either the font or the css location that is causing the problem, so I can be more flexible about it next time.

1 Answer

Gavin Ralston
Gavin Ralston
28,770 Points
Gavin Ralston
Gavin Ralston
28,770 Points

The thing I noticed in the bug report is the part that said it works if you move things to a server

Any chance you could just test/develop using a simple http server? It makes sense that when Firefox is working with the local filesystem that it doesn't allow you to just run around to any directory grabbing stuff, but the http server would understand better where your document root is and what directories are acceptable to dig around in.

Daniel Maia
Daniel Maia
2,559 Points

Oh, so I could just set this setting to false and after I upload it to an http server, it would work fine?

By the way, I don't have an HTTP server and I still don't know how to set one. I'm not willing, as well, to pay for a FTP server nor anything similar.

Gavin Ralston
Gavin Ralston
28,770 Points

You wouldn't need to change the setting at all. It's just how you would have firefox on your system configured, and wouldn't impact how your site worked wherever you hosted it.

You also don't have to pay to set up a local http server. There are a ton of options available for simple web servers you can use on your machine, which might give you a better idea of how your site will perform when you (presumably) host it somewhere else when it's ready to go live.

Daniel Maia
Daniel Maia
2,559 Points

Ok, so if I prefer to continue working on my local files without opting to set a local http server, setting the value of this setting to false would simulate better how the page would work when hosted in a http server?

Gavin Ralston
Gavin Ralston
28,770 Points

What would better simulate the behavior of a web server is running a web server.

In this case, it seems like setting the flag to false will help you work around the issue, but you expose your entire filesystem in the process. That means you could conceivably start importing css files from other parts of your filesystem outside your document root, which would not at all behave like a typical web server.

For your specific issue, though, it seems to fit the bill.

Changing default behavior of your browser to emulate something (serving web pages) that you can actually do with minimum effort, however, isn't the best solution, and could potentially lead to other problems down the road if you start, say, importing css from other parts of your filesystem, which definitely won't translate when you try to host it later.

Daniel Maia
Daniel Maia
2,559 Points

Yeah, I thought about that. Well, could you recommend any tutorial for me in how to set a http server? If it isn't that hard, then I might consider doing this. I just don't wanna waste too much time with this setting, but I'll take that in consideration.

Sorry for the post in the answer section, I got confused.

Gavin Ralston
Gavin Ralston
28,770 Points

Website Basics is a really quick introduction and covers some basics for getting files hosted and transferred, and would be a great way to test things "live."

As for a local environment, I'd probably go with a quick google search for "simple web server" or "local web server" and go with a tutorial you think works best for you. XAMPP has been one that people have used for a long time and is available on all platforms. There are other options available, too, but you'll want to pick one you like the most.

Daniel Maia
Daniel Maia
2,559 Points

Ok, I'll look into that. Thank you very much for the help and for your time :)