Kashif Wahaj's Blog

Static Site Folder Structure

By Kashif Wahaj on Mar 11, 2023
Image post 6

Easy and Organized Folder Structure for Static Sites 🫑

Note: Folder structures & steps are subjective, so feel free to differ, update or reject.
Everything will be in this article will be according to me by default whether it is mentioned or not. Here is my try, to explain you the process in simpler way.

 

We should have a separate folder for each type of project, e.g. :

  • Static/ Web
  • React
  • Laravel
  • PHP
  • React Native
  • Electron, etc.

Here are the points:

1. Name the folder with all small and as short as possible with only β€˜-’ separating words.

2. Now open the folder in VS Code just to visualize better.

3. Now, the first file will be in the root folder which is β€˜name’, without any or inside any folder The file is none other than the index.html and .gitignore also

4. Do not make any src folder here

5. then we make folder name assets.

hell

6. Inside the assets folder, make a different folder for different language files

  1. css β†’ all CSS files go here.
  2. js β†’ all Javascript files go here.
  3. imgs β†’ All Images goes here.
  4. docs β†’ for PDF, DOCX, etc.
  5. fonts β†’ TTF, etc.
  6. Folder for each page with an index.html inside it.

Note: if you are moving tailwind.config.js inside js folder make sure to updates paths in tailwind.config.js accordingly

hell hell

7. Always make a folder per page and put an index.html inside the folder this make route more readable and SEO friendly

hell

7. Try to avoid package.json from root if possible

8. Make node_modules entry in .gitignore.

hell

Done

Let me know in comment below if anything wrong, or needs to be updated in this article or email me at kashifwahaj@gmail.com

Image post 6

Client Server Architecture

Mar 11, 2024
Checklist for better code quality of React / Javascript Code.
Image post 6

React JS Code Quality Checklist before PR

Mar 11, 2024
Checklist for better code quality of React / Javascript Code.
Image post 6

Laravel Inertia Admin Panel using Shadcn UI and Tailwind CSS

Feb 18, 2024
Easy Steps to setup a laravel admin panel using latest inertia, Shadcn UI and Tailwind CSS.