Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/02/list-view.html
https://vanillawebdev.blogspot.com/2025/01/local-development-server-setup.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/01/vanilla-javascript-project-structure.html
Vanilla JavaScript Project Structure January 2025
January 26, 2025
2025
January
26
08:46 AM
This is the JavaScript bit of a project directory structure for Vanilla JavaScript web app that I use as of January 2025, just to give you a rough idea on how to structure one.
.
├── assets/
├── js/
│ ├── application/
│ │ ├── components/
| | ├── ...
│ │ └── uis/
│ └── infrastructure/
│ ├── libs/
| | ├── ...
│ └── utils/
└── index.jsThe main difference between the application and infrastructure scripts is that infrastructure scripts are always stand-alone and versioned.
If a script scales by the requirement of the app, e.g. you need a new dialog form, that falls under the application scripts directory.
Assets vs Infrastructure Libraries
Don't mix up 3rd party libraries with infrastructure/libs/. Instead, place them in a separate folder, e.g. assets/. That is because, in this particular structure, all scripts under js/ are mean to be minified and bundled in production.
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/2025/02/list-view.html
https://vanillawebdev.blogspot.com/2025/01/local-development-server-setup.html
https://vanillawebdev.blogspot.com/