I've got a basic website, 100% frontend. It resides in a folder somewhere on my computer during development, and will be hosted on a free webhost. The index.html is in the main directory. There's also a css, js, img folder in the main dir. Because this is a Windows PC, this folder is not the root directory (C:) and I'd rather not have my website in the root dir.
I've noticed that if I put a url in a css stylesheet located in C:\filepath\mainprojectfolder\css\, like so
background: url("img/image1.jpg");
This is interpreted as C:\filepath\mainprojectfolder\css\img\image1.jpg (Interpreted as starting from the same folder that the stylesheet resides in), when the actual file is in \mainprojectfolder\img\image1.jpg, and having url("/img/image1.jpg") will be interpreted as C:\img\image1.jpg
How do I properly organize my website directory? Is there a standard for this? I have no idea how this works on an actual web server, but since this is a simple website, I'd expect that this works the same on both my regular computer and a webhost.
Project Folder
html files You put the html files in the project folder not a dedicated html folder
css folder
javascript folder
fonts folder
images or img folder
hope that works
Related
I have built a website and i have a problem with sitemap generator. It doesn't see the html files in "en" folder where are the second language files. What should i do to make it find them? What am i missing? i have uploaded a photo of my root files and the tailwind.config.js
Try content: ["./**/*.{html,js}].
That should still pick up files in the root folder, and html, js files in any subfolders.
I am working on an Electron project and using Electron-packager to package my app.
However, with my current folder structure, all CSS files located in the parent folder of my Electron project/package.json are not being copied to the packaged application.
This is my structure:
- GUI
--- CSS
- Apps
---Demo
------package.json, etc
---Demo2
------package.json, etc
---Demo3
------package.json, etc
I build apps while inside Demox folder. Problem is I can't move GUI folder to inside Demo/Demo2/Demo3 since it will contain just the same files and it would be redundant.
However, electron-packager does not support packaging of files from outside the actual Demox folder.
It was suggested that I move these CSS files to node_modules instead.
But how do I require these CSS files from the node_modules folder to an html file? Is there any other way WITHOUT using webpack? I'm hoping to keep this simple and stay away from setting webpack up unless I have no other choice.
For reference, here is the question I posted on the Electron-packager github:
https://github.com/electron/electron-packager/issues/1089
Thanks!
Was able to come up with a solution now.
Since I have moved node_modules folder to the very root (C:\node_modules, so it can be used by all node projects residing in C: drive), I just used an absolute path and link from there:
<link rel="stylesheet" href="/node_modules/sample-css/button.css">
Works well for my needs.
Thanks everyone.
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.
I'm building a multiple page website, and i would like to know what is the best way to organize folders for each page?
1
This is what i did:
I created a main folder named: www.mywebsite.com
2
And in that folder i created a folder for each page:
3
in the assets folder i have js, css, img
Is this the correct way of doing it or is there any better way, i know i can import, in my sass file other sass files and create a main file, but im not sure is that a good way?
You don't need a folder for every page. Just put your html in root folder and make a directory for js, images and css.
Your pages don't need sub folders, they're just for assets that are going to be called in i.e.e an images folder for your images and an assets folder for your CSS or JS files. If you add your pages to a sub folder then you'd need to add that into the URL: string i.e. mywebsite/home/home.html. Also, your server is looking in the root folder for home.html, or index.html (dependent on server), so it won't know where to point when you just type in mywebsite.com
Don;t forget to account for the folder paths when calling any of these in your HTML files i.e. your menu can just call '/home.html', '/about.html' etc While anything in a sub folder will need to be referenced as such i.e. 'images/image.png'
There's no need for that much folders - you can put all files in the root folder or in separate folders (that lie in the root folder) for html, css, js, php and so on
I am using WAMP and I have multiple site projects.
When accessing files within my CSS or HTML I'd like to use the root selector /index.html however this is not working. Is there a way I can define root for a project? I've tried researching this but haven't found anything.
For example, in WAMP I have
-www/project1/FOLDERS FOR SITE like images, javascript, css, etc.
I am currently in the css folder and am trying to reference a image file in the images folder.
background: url('/images/background.png') repeat;
this should reference root directory > images > background.png
How do I define the root directory?
If you are try to go from lets say this file:
rootFolder/newFolder/example.html
to:
rootFolder/index.html
In example.html, you can do ../index.html and that will be able to access index.html.
"../" goes a folder higher.