Quick start bootstrap help

[ethanopp]

Hey all,

Brand new to IDOM, went through the documentation and have some training in react so understand the concepts of using components... Am getting a little stuck on importing bootstrap though. Am just trying to make a quick front end for a self hosted docker web app, and was hoping there would be a quick way to get css formatting in, so turned to bootstrap but having some issues getting the components incorporated.

Is there a quick start guide / template for starting up a new app? i.e. cookiecutter that already has a navbar, and sample page with component pre configured?

This is as far as I got and cant seem to find documentation on how to configure these components when they have nested portions, i.e navbar.item, navbar.brand etc..

Saw this, but they didnt show the snippet on how to actually create the component once imported:
#526 (reply in thread)

app.py

import idom
from components.navbar import *

@idom.component
def App():
    return idom.html.div(
        idom.html.link(
            dict(
                rel="stylesheet",
                href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",
                integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3",
                crossorigin="anonymous",
            )
        ),
        navbar()
    )

navbar.py

import idom
from idom.html import button, div, span

bootstrap = idom.web.module_from_template(
    "react", "react-bootstrap"
)
NavBar = idom.web.export(bootstrap, "Navbar", allow_children=True)

NAVBAR = {"className": "navbar navbar-expand-md navbar-dark", "data-aos": "fade-down"}
NAVBAR_TOGGLER = {
    "className": "navbar-toggler",
    "type": "button",
    "aria-label": "Toggle sidebar",
    "title": "Toggle sidebar",
}
NAVBAR_TOGGLER_ICON = {"className": "navbar-toggler-icon"}
NAVBAR_BRAND = {"className": "navbar-brand ellipsis"}


@idom.component
def navbar():
    return NavBar()

[rmorshea]

Is there a quick start guide / template for starting up a new app?

Unfortunately there is not at this time. @Archmonger is going to be working on overhauling the docs in the coming months and we plan on incorporating some examples that demonstrate more realistic use cases.

cant seem to find documentation... when they have nested portions, i.e navbar.item, navbar.brand etc..

Is this in reference to exporting components that are nested inside react-bootstrap? If so, #543 is tracking that issue. If that's not what you're referring to, could you provide a bit more detail? I'm not sure I follow.

didnt show the snippet on how to actually create the component once imported.

Constructing components exported from a module works the same as other HTML elements. You can pass a dictionary of props followed by a sequence of children as positional arguments:

@idom.component
def navbar():
    return NavBar({"bg": "light", "expanded": True}, some_child, another_child)

Note that, at the moment, children of exported components like NavBar must have come from the same module (in this case react-bootstrap) so you won't be able to mix-and-match components from different libraries. If I'm not mistaken, you won't even be able to use elements from idom.html.*.

One more thing to keep in mind is that in the future we plan on deprecating module_from_template in favor of a static build tool. In doing so, we hope to address some of the aforementioned limitations.

[rmorshea]

In light of all these present limitations. I think I'd suggest using a design framework based on tailwind CSS like daisyUI since all you need to do is load the stylesheet in via a CDN and declare the appropriate classes on your elements. Note that, you'll want to follow the JSX naming conventions for prop naming (e.g. className instead of class).

[rmorshea]

cc: @Archmonger I think recommending a Tailwind CSS framework might be better for most people starting out.

[Archmonger]

We can give a shout out to Tailwind, but we should at least provide enough info/context in the docs for people to use whatever they want.

[ethanopp]

Thanks for the quick reply…I guess what I’m looking for is with current limitations, best practice for how to leverage the more advanced react-bootstrap components that require the .elements (snippet of how to use navbar with navbar.items for example) and maybe how implanting something like grid would work.

With those 2 snippets I think it should be enough for beginner to design the layout of their app and also understand how to import some of the more intricate components

[rmorshea]

For reference was referring to how I could implement this: ...

#543 is a blocker for being able to implement that example since some components (e.g. Navbar.Branch and Navbar.Toggle) are not directly exported by the module and are instead used via attribute access.

My understanding was this was for folks who wanted to create their own custom components and package for others to use

That is generally correct. I think @Archmonger might have been suggesting that as an option of last resort if you were unable to get things working with module_from_template.

[ethanopp]

So does that mean bootstrap components aren’t going to be supported?

Was hoping to come over from dash where they have direct bootstrap integration “dash-bootstrap-components” which really makes development speedy… having to create navbars, cards etc. from scratch every time is kind of a big miss isn’t it?

…perhaps I’m not fully understanding the cookiecutter functionality

[rmorshea]

So does that mean bootstrap components aren’t going to be supported?

No. However, to support components that are nested in the way react-bootstrap does #543 needs to resolved. As mentioned earlier though, this is an easy fix (one which I'd be happy to help you contribute). Unfortunately, there are more pressing issues that are taking up my time at the moment, so I'm not sure when I'll be able to get around to fixing it myself.

[ethanopp]

Is fixing #543 really in scope though? From what @Archmonger said above, isn't module_from_template getting deprecated?

[rmorshea]

#543 is a general problem with how components from an "import source" are loaded by the client. Fixing it would be broadly beneficial.