Genie Discord forum

Having installed yarn and attempting to create a simple chart with Chart.js as an example, I don't think I've set this up correctly. I see that yarn and nodejs are installed, and yarn add chart created the node_modules and package.json files in my top level directoy of the genie app (where app, bin,config etc. live). However the documentation says that the yarn modules should be living in public/dist. I don't have a public/dist folder yet. Attempting to import chart in my main js file results in "cannot use import statement outside a module", which the internet tells me might be because chart is not in the correct location. I've searched around a bit but can't find any specific guidance outside of the documentation below as to how to properly install external assets in the genie framework and how to verify that it was done properly.

I followed the documentation here https://geniejl.readthedocs.io/en/latest/guides/Frontend_assets/

I'm not a GUI programmer, so I use Genie Builder for my projects. If you want to get up and running quickly, maybe you can create a new Genie Builder project and just overwrite the default app.html and app.jl with your code.

Genie Builder will give you a /public folder within the project files. I have used this before to put css and js files.

Thanks for the response! I haven’t tried working with genie builder and will have to look into it. At this point though the vast majority of my UI is finished just using base JavaScript/html/css (manually created in the public folder as you described). The main feature I’m missing is to be able to embed three.js animations which I believe requires nodejs. If I can figure out how to use a package manager with genie then I would use that for things like chart as well.

I haven't personally tried using other js libraries yet, but perhaps @hhaensel has an idea on how to do this

One thing I noticed just now trying to follow that documentation from scratch is that they were from v4 documentation. For example, it says you must create the app with Genie.newapp(fullstack=true), but the command no longer exists in v5. It’s now Genie.Generator.newapp. I can’t seem to find any v5 documentation however on front end assets.

Looking into this more, I was able to solve my error for "cannot use import statement outside a module", but making it farther only made me a little bit more confused. If it isn't obvious already, I'm not really a web developer. It seems that what I'm trying to do is to use genie.jl to host the webapp mainly for it's router to do some heavy julia computing on the backend, but hoping to use javascript modules that depend on a node.js server on the front end (namely three.js). So it appears that I would like to host my web server with genie.jl, but then also run a node.js server on the side for accessing my node_modules folder js packages.

That is, unless Genie with yarn and webpack already somehow gives me access and the proper scope to use js packages in node_modules in my genie hosted webapp. For the record, I'm not sure anything I'm saying is making sense!

You mentiones Charts.js. Is there any other JS package you need? If it's just plots, Genie supports Plotly through Stipple. Stipple.jl implements a reactive UI layer on top of Genie.jl. You'd just have to implement your app following the recommended reactive app structure

https://learn.genieframework.com/tutorials/written/reactive-ui-basics How to plot: https://learn.genieframework.com/reference/reactive-ui/plotting

Otherwise, I'm not sure Genie supports what you're trying to do at all. If you really need those node packages, I guess you could separate front and back end and have them communicate through an API or websockets