I have this structure for my project:
Root Directory
|-css folder
|-style.css
|
|-it folder
|-index.html
If I try to include css file with:
<link href="/css/style.css" rel="stylesheet" type="text/css"/>
from index.html, aptana preview and also internal server can not find style.css.
Why is this?
In my remote server it works perfectly and I do not want to use a relative path.
In terms of the "why", the problem you are having is related to how your development server is setup versus your production server.
Assuming a standard setup, your production server will receive requests for a domain (i.e., http://mysite.com) that is, for lack of a better word, mapped to a folder on your server (i.e, a request to http://mysite.com will be mapped to a folder, /var/www/mysite, on your server).
So, when you link to a style sheet with /css/style.css, your (production) sever immediately goes to the /var/www/mysite folder and starts looking for the css folder, file and so on. No problems with that, as you point out.
Your development machine, however, is serving up pages locally and has a different directory structure for mapping to files and folders.
When I open an HTML page in my Aptana project and hit the preview button, Studio loads http://127.0.0.1:8020/mysite/public/404.html (note how the first folder after the IP and port is mysite). To load the absolutely pathed CSS file, the local server is actually looking for http://127.0.0.1:8020/css/styles.css but it needs to get to http://127.0.0.1:8020/mysite/css/styles.css.
The initial "/" in your link (/css/styles.css) tells the server to go to the root directory of the server and start looking for the folder and files from that point ... but there is no css folder in the local server's root directory. It lives in /mysite/css/styles.css and that's why fskreuz suggests relative paths and using "../css/styles.css" instead.
Personally, I prefer absolute links (but that's just a personal preference and not in any way a challenge to or comment upon fskreuz's response). However, my local development setup is conducive to using them because I setup virtual hosts for the sites I work on. Using Apache, I setup a virtual host for each of my projects. With this, I can load something like http://dev.mysite.com in any browser on my computer and test my site/app in a way that makes it mirror my production setup.
Related
Hey I have a quick question. When I pushed my repository to git it no longer connects my html documents to my style sheet or corresponding images. When I open the html files from vscode in chrome it works perfectly, but as soon as I pushed it to github and deployed it, it only shows the html. Is there a way I need to change my pathing so that it will work on pages?
For example:
<link rel="stylesheet" href="/CSS/style.css">
or
<img id="frogicon"src="/Images/frogiconpure.jpg" alt="frog icon">
Yeah this is a frustrating issue for me as well. The solution I use relies on running a local NodeJS server during development, which has code to redirect requests starting with /${projectName}/. I then set up all of my URLs for internal assets to work in the GitHub Pages context.
I have a template repo in GitHub that I use as a base for my new projects, which uses this approach. Here's a link to the appropriate section of the Readme: GitHub Pages
This approach works without any extra bits on GitHub Pages, but for it to work with local development it relies on two parts:
A local server that redirects URLs starting with /${projectName}/ to the root-relative paths needed for local development (server code).
An environment variable configuring the name of my project (the .env file in my setup)
If running a local NodeJS server isn't something that works for your project, there may be other ways in your environment to do the same sort of redirection. And if you're only worried about the single project, then you could hard-code the name of your project instead of having it configured as an environment variable.
I am about to learn ReactJS.
I want to hide the filesystem structure of my server and only show the project root.
If i go to inspect tools in google-chrome i can see where my project is located on my C: Drive.
Wasnt able to find something about it and Ive got no Idea.
Hopefully, someone can help me.
This is because you are using your computer as a server to serve your site so the inspect tools are able to recognize the origin of the code, assets, and images.
Locally, even using gatsby develop or gatsby build (and gatsby serve) you will always be able to see the root of your project, it happens with all web development files, not only in Gatsby.
In a real scenario, where it's a server (with a domain attached, not your PC) that serves the files you will never see the origin because your site will be placed in the /public or /www of your server. To prepare your project to be deployed, you should run gatsby build command, which will create a /public folder in the root of your project with your code compiled, that folder is the one that needs to be deployed.
This is normal in development environment, for deploy your project try one of these approach in root of you project:
npm build
or
yarn build
This command build an optimized version of your project in build folder, after you can upload content of this folder to your www/plulic folder of your server,
css is not working after uploading the file on server with filezilla i added file permission 755 on server and even after that it's not working.
I have changed /web/assets/d01711d6/css/bootstrap.css.
css is not working after uploading the file on server with filezilla i added file permission 755 on server after that it's not working.
This may depend on several factors.
Cache
If the application is hosted it may be that it is a problem of the server cache so the new CSS file is read to the cache expiration (sometimes several days). In some cases the provider it provides configurations for enabling a temporary mode that disables this mode and promptly update the files.
Asset Management
Another factor is related to the fact that the directory where content assets are dynamically generated so not always the name of the directory in the development environment and the production server match. It is in these cases to find (looking for it) the actual directory used by the server and replace the file in the right place.
If, as the practice, changes to css file was made in the original directory and not on the copy of the file created by dynamically from asset management, one usually proceeds by eliminating the directory containing the assets of interest and the first subsequent invocation of the application (the URL / link) a new directory of assets is created for these files
When I select a html file to open "in browser" in Webstorm it works and it opens under the localhost. The issue I'm having is that this webstorm internal server is not detecting any of the other paths in my project root like images and javascript files.
I should note that this feature has worked before on other projects I started from scratch using "new project." The difference with this project is that I opened a directory as a project.
The built-in webserver serves files from http://localhost:<built-in server port>/<project root>. Forward slashes in URLs tell the browser to resolve them relative to the web server root (localhost:63342 in your case), causing 404 errors.
If you like to change the default web path on built-in web server, you have to re-configure the server by editing your system hosts file accordingly - see http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559.
I am doing some basic HTML exercises on a Mac OS 10.6.6.
Say I am here:
rootfolder/index.html
and I want to go here:
rootfolder/subfolder/index.html
I understand I can use the relative path to make a link:
link to subfolder
^ this works for me in my browser.
And if I wanted to shorten the href, I could just do this:
link to subfolder
When I click the short version in my browser, the link takes me to the folder on my desktop (not to the page in my browser)
I'm wondering, do the files need to be in a web host environment for
the short version to work in a browser?
When /bob/ => /bob/index.html works, it is generally because the server has listed it as its directory index, e.g. with Apache...
DirectoryIndex index.html index.php
...meaning in the request of a folder, it will first look up to see if an index.html or index.php exists (in that order).
So if you are running it from the folders of your local filesytem (i.e. on the file: protocol), it has no server and does not know that a blank directory should request index.html.
The serving of index.html (or index.cgi or default.asp or whatever) when requesting a url that points to a directory is done by the server, not the browser. It is usually done as a result of configuration setting.
It's neither a property of HTML nor a property of urls.
If your browser doesn't serve index.html — and I don't know any that do — then you've answered your own question.
Mac OS comes with Apache (the most commonly-used open-source web server) pre-installed. You can set it up by going to System Preferences, choosing the "Sharing" preference pane, and then checking the box to turn on Personal Web Sharing.
Once you've turned on Personal Web Sharing, http://addressofyourcomputer/~yourusername/ will point to the Sites directory in your user's folder in Mac OS (i.e., /Users/yourusername/Sites/). With Apache running, if you go to http://addressofyourcomputer/~yourusername/subfolder/, it will in fact serve up /Users/yourusername/Sites/subfolder/index.html if there is an index.html file in that subfolder.
Without turning on Personal Web Sharing, though, there is no server running, and so your browser is really just directly accessing your computer's filesystem. As a result, when you ask for a folder, it literally returns you that folder, whereas Apache server knows the convention that /subfolder/ is really a request for /subfolder/index.html and will re-direct you accordingly.
The default page setting/redirection works only on web servers. The browser do not have intelligence(?) for such redirection. So the second option will not work.