Golang Gin Framework [Template]

[cursive haven]

I am building a web app with full-stack Golang and the Gin framework. I am using templates to render the frontend. Do anyone know how I can organize my templates folder?

I currently have in the root directory my templates folder, with all my html pages in it. I would like to organise the html pages into different folder. However, when I try to load the whole folder, It does not work quite as expected.

You can see the attached picture for my current project structure. Also, here is how I currently load the templates to my project:

// Serve static files and templates
router.Static("assets", "./assets")
router.LoadHTMLGlob("templates/*.html")

I have try this way as well but it does load only the sub folder:

// Serve static files and templates
router.Static("assets", "./assets")
router.LoadHTMLGlob("templates/**/*.html")

I would like to have a folder for the footer and header for example, and another folder for authentication, and maybe another folder for the main app. Something like that, but the way I mentioned above does not seen to work for some reason.

Any guidance/recommendation would be appreciate.

Here is some screenshot for when I run the server. You can see for the first picture that it load everything in templates, which is expected, on the next two screenshot, I create a folder inside template, and edited the load to load the content of this folder, which should also load the main content of templates, but it does not.

nvm, I think I just found a way lol

just found this https://stackoverflow.com/questions/65546093/how-can-use-both-loadhtmlglob-and-loadhtmlfiles

I just basically change to this:

    files := []string{
        "templates/index.html", "templates/authentication/login.html",
        "templates/authentication/signup.html", "templates/authentication/logout.html",
        "templates/corp/footer.html", "templates/corp/header.html",
        "templates/app/dashboard.html", "templates/index.html", "templates/404.html",
    }
    router.LoadHTMLFiles(files...)

with this structure and it appear that it works lol

However, if anyone has a better naming for this, I would appreciate the help lol

This is the content of the folders

[cursive haven]

However, I don’t get the Gin load template log no more, which I actually liked having it.

[shadow steeple]

Short answer
scope (when applicable), resources (models) then actions.

# Show all books
[GET] /books
templates/books/index.html
| scope | resource | action |
| ----- | -------- | ------ |
|       | book     | index  |

# Edit a book
[GET] /books/<id>/edit
templates/books/edit.html
| scope | resource | action |
| ----- | -------- | ------ |
|       | book     | edit   |

# User login page
[GET] /users/login
templates/users/login.html
| scope | resource | action |
| ----- | -------- | ------ |
|       | user     | login  |

[GET] /admin/users
templates/admin/users/index.html
| scope | resource | action |
| ----- | -------- | ------ |
| admin | user     | index  |

Longer answer
Generally, web application are based on the MVC architecture and CRUD operations. In the case of Gin, it doesn't impose any architecture. It still possible to adhere to MVC and I personally recommend it. In MVC, you'll have a Controller responsible for managing interactions between the View, which represents the user interface, and the Models, which handle the application's data logic. This separation of concerns promotes maintainability and scalability.

When structuring your project, organizing templates within subdirectories corresponding to controllers or resource types is often the way to go. For instance, you might have templates under directories such as users, books, products, etc, aligning with the application's business logic.

Ex.

│
├── models/
│   ├── user.go
│   ├── book.go
│
├── views/
│   ├── users/
│   │   ├── register.html
│   │   ├── login.html
│   │   └── ...
│   ├── books/
│   │   ├── index.html
│   │   ├── show.html
│   │   ├── edit.html
│   │   └── ...
│   ├── admin/
│   │   ├── users/
|   |   |   └── index.html
|   |   └── ...   
│   ├── shared/
│   │   ├── header.html
│   │   └── ...
|   ├── index.html
│   └── ...
├── controllers/
│   ├── users_controller.go
│   ├── books_controller.go
|   └── ...
...

[strange light]

Gotcha

You call a bad discord mod an admin-is-traitor.

[shadow steeple]

Hopefully it's clear haha. I was about to write a book but decide to give more visual example instead.

I should add that it doesn't need to 100% follow this directory layout, it's just an example to make it clearer.

And, if you're interested in implmenting a MVC architecure (which I recommend), look at MVC framework like rails, pheonix, django, dotnet mvc, java spring mvc, etc.

I personally feel like rails has great resources on how to follow a nice and clean CRUD MVC architecture
https://guides.rubyonrails.org/getting_started.html#mvc-and-you
https://guides.rubyonrails.org/getting_started.html#crudit-where-crudit-is-due

Elixir also explain it well
https://hexdocs.pm/phoenix/1.6.16/directory_structure.html#the-lib-hello_web-directory

[cursive haven]

It does make sense. Thank you. Yeah, that’s very great information. I’m trying to get better at this, even if my project is just a web application template ready to go for other dev, I want it to be good architecture.

This project will have only registration, login, deletion of account and update account. With a simple dashboard for the main app.

I am using this as a web app “framework” that a dev can just clone and start building their own web app without the pain of configuring server and database nor user authentication. I also added an authorization access, so like this it will be a really ready to build web app.

This, is a derived of the project I started for my friend in school. I thought it could be useful if someone is looking for a fast an easy way to start a web app in full stack Golang

[cursive haven]

Thank you. The visual is very useful. In this context, I rather see a visual of the architecture than reading an essay about it. Even better when I’ve the visual and informations written about it

[cursive haven]

No perfect yet, but I start to be happy with what I am doing. Thank you @shadow steeple for the guidance

[shadow steeple]

What does corp mean and what does in contain? Perhaps there's a better name for it that would prevent me from asking this question?

I see above that you have header.html and footer.html there. Perhaps... layout or shared could be a better name for this if it contains that kind of things

Similar to phoenix, rails, Django, etc.

[cursive haven]

that is exactly what it was lol. I was thinking about a better name for the layout, but layout is actually the name I was looking for lol

[shadow steeple]

And perhaps more telling of what is its purpose

[cursive haven]

yeah, it contain the header and footer for the web pages

[shadow steeple]

Yea, I see where you meant by corp but I don't think it's the best name for that folder

[cursive haven]

yeah, layout def is better

sometime, I have brain fart and can't think the obvious lol

This is what I have now

[shadow steeple]

Nah it's fine, I understand the logic behind corp

Perhaps it's a bit too french though haha