Efficient way of arranging HTML,CSS and Javascript files

General Web Dev
1

What will be a good way to develop a simple front end using MVC pattern if possible. If not MVC, that’s also fine but MVC is the way to go, then please advise. Basically, my project is not that heavy and I am simply trying to figure out a way to place HTML, CSS and Javascript files in an efficient manner. Not planning to use frameworks like React or Angular.

One approach is to place HTML files inside a folder, CSS files inside a folder and javascript file inside a js folder and include the javascript files from the js folder into the main HTML page.

Something like this maybe:

├── MyFolder
|   └── home.html
├── CSS
|   ├── customize.css
|   └── first.css
├── js
|   ├── firstCode.js
|   └── jQuery.min.js
2

Many years ago I created a simple site and thought that organizing by page made sense. eg.

index.html 
page1/ 
  index.html 
  css/ 
  images/ 
  javascript/ 
page2/ 
  index.html 
  css/ 
  images/ 
  javascript/ 
...

It was manageable as long as the number of pages was few. As the number of pages grew it quickly became more and more unmanageable. A simple change meant needing to change each folder specific copy of the file. Fun, not.

I learned the benefits of PHP include so a single file could be reused and the importance of good naming.

IMHO, the structure you have shown looks good to me. I think as long as you don’t name images like DSC4583458.jpg etc. you should be OK with that for a relatively simple site.

3

Thanks. Actually, I am trying to get rid of PHP because current code is written in PHP and I have to use this front end code with my Springboot Java webservice. Otherwise PHP include is a good option. I am wondering if something like that could be done in HTML as well? I mean include a specific HTML section inside index.html ?

My application might grow as well. I hope the folder structure would be manageable at that time.

4

I’m afraid your only option for that may be relying on Javascript and unless you can depend on quite a few third party tools you will not be able to easily create injectable templates, you would have to build the HTML with the JS DOM API, with all the pros and cons that may have depending on your particular application…
Maybe someone else has better ideas though

5

I am not familiar with the Spring Boot framework, but AFAIK it is MVC. The filesystem paths won’t mirror HTTP paths, routing will load different filesystem files based on the HTTP requests.

6

I gave adopted the practise of having project folders beneath the root and every project has access to a common root assets folder with sub-folders for CSS, JS, IMGS, etc

The benefit of using project folders is that old versions, test versions, demo versions are all available:

DOCUMENT_ROOT

/assets/
   css/
   imgs/
   js/

/project_ver_001
   index.php
   incs/

/project_ver_002
   index.php
   incs/

/project_ver_003
   index.php
   incs/

file: .htaccess

# ALLOW OTHER SPECIFIC FILES
# ALLOW OTHER SPECIFIC FILES
# HARD_CODED FOR project_ver_001/index.php
 
# ONLY REQUIRED A SUCCESSFUL TEST ONCE
# <IfModule mod_rewrite.c>
  RewriteEngine On
  	RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$  project_ver_001/index.php/$1 [L,R=302]
# </IfModule>
7

Yes it is possible, try searching for Apache SSI - “Server Side Includes”

<!--#include virtual="/footer.html" -->

https://httpd.apache.org/docs/2.2/howto/ssi.html

One interesting feature which could be helpful is calling Apache Commands:

<pre>
   <!--#exec cmd="ls" -->
</pre>
3 Likes
8

Thanks but I am not using PHP or Apache in this case.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.