All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server，every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.
Related
This is my first time trying to use Github pages. I am able to to get the index.html to work, but the style will not. I am serving from the master branch docs/ folder.
Everything works fine when I run it on my local host. Any ideas?
File tree
Stylesheet
Tried changing my static and templated folder names to 'docs' and 'css' as I thought Github looks in specific folders for HTML and CSS files. Also looked to make sure my href was pointing to the right place. I'm new to this, so I may have made a mistake.
EDIT: I am using Flask, which may be causing the issue, website is still static. IDK if Flask and static contradictory.
Thanks
I originally transferred this project from windows to linux, and it was working completely fine on windows, but now images are not loading.
I have an image:
<img src="/assets/s1.png" alt="dinosaur">
And it is only loading on the webpage if I change the filepath to /home/user/Desktop/Project/assets/s1.png
The image file is in the folder assets and the assets folder and html file are both within the Project folder.
The weird thing is that when I change /home/user/Desktop/Project/assets/s1.png to /Desktop/Project/assets/s1.png it stops working. I would like to be able to only include the necessary path /assets/s1.png because I will need the path to stay the same if this project gets moved around between environments.
Based on a comment on the question:
the address of the page is file:///home/user/Desktop/Project/file.tpl
That's the problem then. The "root" of the "web server" (from the browser's perspective) is the root of the file system. So this absolute path won't work:
<img src="/assets/s1.png" alt="dinosaur">
But this one will:
<img src="/home/user/Desktop/Project/assets/s1.png" alt="dinosaur">
However, that latter one clearly won't be helpful in a web-hosted environment.
You can instead use a relative path, for example:
<img src="./assets/s1.png" alt="dinosaur">
This should work in the example given, but we can't know if this will have further implications in a larger and more complex web application. For example, if you're dynamically loading sections or templates from different folders, their "relative paths" may be different. (That's one advantage of absolute paths, they're the same regardless of what page you're on.)
But more to the root cause of the problem... You really shouldn't be testing a web page from the file system. The intent is to host it on a web server, so the testing should be hosted on a web server.
It makes little sense to make changes to the code in order to get it to work in an environment that will never be used, only to probably have to make more changes to get it to work in the actual target environment. Keep the test environment and the target environment as similar as possible.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
After finishing my website locally using HTML5, SASS (Koala for compiling) and a bit of jQuery, I uploaded it to GitHub and hosted it on git pages. Everything works flawlessly except that my background images are not showing up. Using the 'Inspect element' I found out that deleting one '../' from the URL specified for the img file background-image: URL("../../img/background.jpg"), solves the problem and the background image is shown.
The thing that confuses me is that I uploaded the structure from my PC straight to Github without modifying anything. Plus, I checked the structure of the project in my repo and it doesn't make sense that the background-image shows after deleting one '../' because there are two folders that you have to get out of to reach the image.
This just doesn't make sense. Can anyone explain what is happening?
P.S. Basic representation of my project structure:
index.html
folder: img
folder: sass
research-pages
SASS FILE
Inside this folder is my specific sass file where I type my styling.
You have to go up two folders to reach the img folder where my background.jpg is located.
edit: With your file structure, just one ../ should take you to the sass folder. But on GitHub, perhaps their directory structuring method is more forgiving than the 'correct' way (perhaps ../ means both the parent folder and the parent folder level).
Some other possibilities: maybe things somehow got moved around or arent' uploading the way you think they are during your git add/commit/push, or possibly I'm interpreting your file structure incorrectly, or maybe you're mistaken with what you are seeing (though I tend to believe you - I will test this myself soon). Can you send us a link to your gh-pages repo?
I'm using HexoJS to create a blog. I was able to generate the static files using hexo generate. Even though there are css files and JS files generated, they are not properly linked to the index.html.
So, I have to open each html page and correct each page links given in href and src attributes one by one. I believe that this is not very practical. Can anyone help ?
The localhost is used for preview the website. When we publish our blog, it should be on a server, then the path will be interpreted correctly, we don't need to change any thing. What we saw on http://localhost:4000 will be same when you published your website.
So, we don't have to worry about the broken paths in the public folder.