📁 AppML Folder Structure Best Practices – Organize Your AppML Projects Smartly

🧲 Introduction – Why Folder Organization Matters in AppML Projects

Even though AppML is a lightweight, no-build framework, maintaining a well-organized folder structure is essential for scalability, clarity, and debugging efficiency. A clean directory layout allows you to separate models, views, controllers, and assets, making it easier to manage data-driven applications—especially as your project grows.

🎯 In this article, you’ll learn:

• The ideal folder structure for AppML projects
• How to organize models, controllers, and views
• Folder naming conventions for better readability
• Real examples for single-page and multi-page AppML apps
• Tips to future-proof your file organization

🗂️ Recommended Folder Structure for AppML Projects

Here is a modular folder structure that works for most small to medium AppML applications:

/appml-project/
├── index.html
├── /data/
│   └── products.json
├── /controller/
│   └── appml-controller.js
├── /model/
│   └── schema.json
├── /views/
│   └── product-view.html
├── /css/
│   └── styles.css
├── /js/
│   └── custom-scripts.js
└── /assets/
    ├── /images/
    └── /icons/

💡 Tip: Place reusable HTML blocks or templates inside /views, and API-returned models inside /data.

📦 Folder Breakdown and Naming Best Practices

🧪 Example: Connecting Folder Paths in HTML

Let’s say you’re loading a product list with AppML using this structure:

<!-- index.html -->
<div appml-data="data/products.json" appml-controller="controller/appml-controller.js">
  <h3>{{name}}</h3>
  <p>Price: ${{price}}</p>
</div>

✅ Make sure relative paths are correct so AppML can load the model and apply controller logic.

🔁 Reusable Views and Modular HTML Blocks

Use the /views/ folder to maintain reusable HTML templates. For example, product cards or form components:

<!-- views/product-view.html -->
<div>
  <h2>{{title}}</h2>
  <p>{{description}}</p>
</div>

Then you can include this inside your main page with AppML includes:

<div appml-include-html="views/product-view.html"></div>

🧰 Tips for Organizing Multi-Page AppML Projects

If you’re building a larger site or admin dashboard:

• 🔹 Create subfolders for each module or feature.
• 🔹 Group models and controllers by feature.
• 🔹 Keep all AppML-related files in a dedicated root folder (/appml/).

/admin-dashboard/
├── /appml/
│   ├── /products/
│   │   ├── data.json
│   │   └── controller.js
│   ├── /orders/
│   │   ├── order-data.json
│   │   └── order-controller.js
│   └── shared/
│       └── view-header.html

📌 Summary – Recap & Next Steps

Creating a well-structured AppML project folder enhances code readability, simplifies updates, and enables collaborative development. It’s a best practice that pays off as your app scales.

🔍 Key Takeaways:

• Store data in /data/, logic in /controller/, and views in /views/
• Use consistent naming and relative paths for easier maintenance
• Organize by feature for large, multi-module applications
• Keep custom JavaScript and styles in separate folders (/js/ and /css/)

⚙️ Whether you’re building a small product list or a large admin panel, clean folder structure is your foundation for success.

❓ FAQs – AppML Project Folder Organization

❓ Do I need to follow a specific folder structure in AppML?
✅ No, but following a modular structure helps keep your project maintainable and scalable—especially for larger apps.

❓ Where should I place my JSON data files?
✅ Place them in a /data/ or /model/ folder to keep them organized and easily referenced using appml-data.

❓ Can I load AppML views from other HTML files?
✅ Yes! Use appml-include-html="views/filename.html" to dynamically include HTML templates or fragments.

❓ What’s the best place to store controller files?
✅ Store all logic scripts in a /controller/ folder. Reference them using appml-controller="controller/logic.js".

❓ How do I organize multi-feature apps?
✅ Create subfolders inside /appml/ or /modules/ for each feature (e.g., /users/, /products/, /reports/) and group their data and controllers inside them.