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/
    ├── templates
    ├── layouts
    └── ... 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:

layouts

The layouts folder is the primary way to create pages in Blutui. When you create a page in the dashboard, you link it to a specific layout file. This approach allows you to define the structure and design of your pages while giving content editors the flexibility to create and manage pages directly from the dashboard.

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.