Folder Structure

After you've successfully set up your project using Blutui Courier, you'll discover a well-organized set of folders within your project directory. Understanding this layout is essential for efficiently creating and updating your Blutui website. Lets look at the folder structure of our example project.

At the top level, your Blutui project primarily contains two folders:

[project-handel]/
├── public
└── views/
    ├── pages
    ├── templates
    ├── layouts (create as needed)
    └── ... create custom directories (e.g., components)

• public: This folder houses the compiled, production-ready version of your JavaScript and CSS code. It can also contain assets like images, PDFs, and other static files.

• views: This is where the core of your Blutui front-end logic resides. All your development work, your components, pages, templates, and layouts will primarily take place within this folder.

Diving Deeper into the views Folder

The views folder is further organized into three key sub-folders, each serving a distinct purpose in building your website:

pages

This folder is where you create and store the individual, unique pages of your website. Each file within pages typically corresponds to a specific address or section on your live site (like your homepage, an "About Us" section, or a "Contact" page). This is where you'll define the specific content and look for each distinct part of your Blutui website.

layouts

The layouts folder is ideal for creating a consistent visual framework around pages where the overall design needs to stay the same, but the main content within that framework changes. This is perfect for maintaining a cohesive look across a series of similar pages.

templates

The templates folder holds reusable design elements, ensuring a consistent look across your site. It typically includes default.html, providing a base structure for most pages, and 404.html, which displays a "Page Not Found" message. You can customize these and create your own templates to suit your specific design needs.

See It in Action: The Burgertorium Example Project

To get a practical understanding of how this folder structure is used in a real-world scenario and how all these parts work together, we highly recommend exploring the Blutui starter project: Burgertorium. This project, built with the tailwind-js Canvas, serves as an excellent working example of how to leverage Blutui's organized architecture to build a functional and well-structured website.

You can find Burgertorium in the Blutui starter project GitHub repository.

What's Next? Developing Your Project

Now that you have a solid understanding of the Blutui folder structure, you're ready to start running your project.