I have a webpage running on a server. It loads some resources which are included with paths relative to the current root (e.g. /folder1/partial.html).
When trying to open the webpage locally for testing, I run into problems because my Windows C: drive is now considered the current root. How can I work around this without having to change all the include paths?
You can't.
However, you can change your paths to be relative to the file rather than the root. This way it won't matter if you open your page locally or on the server. For instance:
root
|
+-- partial.html
|
+-- some_folder
| |
| +-- another_folder
| |
| +-- some_file.html
If you wanted to reference partial.html inside some_file.html then it's relative path would be ../../partial.html.
In English, this is saying go up two folders and then look for the named file.
Using a simple web server such as python SimpleHTTPServer solves the problem.
Related
I'm not very familiar with node.js, but I've created a website to learn about CSS, HTML, and JS and am now having trouble hosting it. I can run the command npm start just fine and then I see my site and all its pages at localhost:3000. However, when I try to upload the site using Github pages or Netlify I always get 404 errors. I think it's because my index.html file is in my views folder so it doesn't know where to look for the first page. I've tried moving everything out of views but this doesn't work, and I've tried making a "dummy" index.html with the following:
<meta http-equiv="refresh" content="0; url=/views/index.html">
which also doesn't work. I'm at a loss for what to do as I'm super inexperienced with this kind of stuff. How can I get my site hosted?
"npm start" only works locally in your machine because you have NodeJS installed. The browser doesn't know anything about npm, it only interprets JavaScript, HTML, and CSS. If you put your "index.html" in the root of your host, it will be found. I suggest you create a structure like a bellow.
github pages
|
|_ index.html
|_ css/
| |_ styles.css
|_ js/
| |_ scripts.js
Commit your changes to github and access your page in /github.io
I have this structure of bundled web app:
/dist
|
|- index.html
|- inline.js
|- main.js
|- polyfills.js
|- favicon.ico
|-assets
|
|-icons
|
|- add.svg
|- arrow-down.svg
|- start.svg
Due to various reasons I want to serve it via file:// protocol instead of hosting http server.
However, Chrome can't acces files that are located in /assets/ folder - all files that are in root (dist) folder work fine.
I found out that I can run chrome "--allow-file-access-from-files", however it's told to be dangerous, as it opens my whole file system to attacks.
Is there any way to use "--allow-file-access-from-files" flag only for specific folder? Something like:
$ chrome --allow-file-access-from-files ./assets/**
that would be a good feature to add on chrome I think
+1 from me
PHPStorm/WebStorm raises warnings in HTML files for links to local resources.
My project structure is:
hello-world
|--assets
| |--css
| |--images
| |--js
| +--lib
| +--foo
| |--foo.js
| +--foo.css
|--src
|--templates
| |--foo.html
| +--bar.html
|--test
|--packages
+--index.php
Given I render foo.html to the user, Apache can only locate local resources when they are referenced relative to Apache's root, ie:
src="/hello-world/assets/lib/foo/foo.js"
href="/hello-world/assets/lib/foo/foo.css"
but PHPStorm/WebStorm will only resolve these files as:
src="/assets/lib/foo/foo.js"
href="/assets/lib/foo/foo.css"
which, of course, causes 404 errors when Apache tries to serve them and can't find them.
I have tried changing the directory settings, making my project root a resource root, my assets folder a resource root, lib folder, etc. Nothing makes the IDE happy and as it stands all of my HTML and JavaScript code is full of false errors and unresolved references.
Fixed it by modifying Apache config:
<VirtualHost *:80>
DocumentRoot /var/www
<Directory /var/www/hello-world>
Order allow,deny
Allow from all
</Directory>
Alias /assets /var/www/hello-world/assets
</VirtualHost>
now I can just reference files as "/assets/lib/foo/foo.js". Far from ideal, but Apache can find them and PHPStorm/WebStorm is happy.
How can I use absolute paths in my website while testing on my local filesystem? I know that I can use / to access the root directory of my website. However, this works only when my website is on the server. I want to be able to use absolute paths on my local filesystem so that I can do proper testing before uploading.
Is there a way to set a variable to a root directory in HTML? Something similar to Linux where you can define a variable WEBPATH=/home/user/website. Thus I can use e.g src="WEBPATH/folder/file.html for all the files I use in my website and I can modify WEBPATH depending on whether I am testing locally or using the server root folder.
I am open to other workarounds as well.
I'm assuming you're using a file url to access your HTML in the browser, in which case an easy way to get absolute paths working is by using a local webserver to serve your site.
If you have Python 3 installed, you can run python3 -m http.server from the command line at your web root, and it will serve your site at localhost:8000.
I've got a project that has 2 different modules on git which are in two different folders on the server.
Example:
/webClient/this_is_the_root_of_web_client/
/serverSide/this_is_the_root_of_server_side/
I want to upload the client files to Apache root, but it still sent the webClient folder.
I tried to set the webClient folder as resource root, but still got the same result.
Its SOLVED!
I configured 2 mappings:
local Server
--/localPath/projectFolder/webClient/ | /apachePath/
--/localPath/projectFolder/serverSide/ | /serverPath/
And it worked like a charm!
Thanks #LazyOne.