New to this. Question for the seasoned.

Sivoph

Hello, all.

I switched from a paid subscription to Xenforo to Flarum here, because I liked the fact that it is a blank slate for development and open-sourced. I am stalled at the Javascript compilation or transpilation or what have you.

I understand how the stack operates to a degree, but I can't seem to figure out how Javascript is compiled into the front-end code. I peered through seemingly simple extensions and found a bunch of references to modules (it looks generated or compiled).

I have gotten to the bare bone skeleton of an extension, but have really stalled at the mithril js part and how to get things going. I'm on Godaddy Shared Hosting and from what I understand I need to do a bunch of things to have Node.js and webpack installed. I have it on my localhost and can probably just FTP upload the compiled scripts to the folders.

With Xenforo I also created extensions, listeners, but mostly with php. I guess my question is....how do I take raw Javascript code and have it actually work with Flarum? Is there a simple way (I know I'm walking into this one)?

**edit: my ultimate goal is to start accessing the database to present information...probably by connecting to API's.
I really want to get some gallery, sliders, lightbox, etc., stuff going for this platform.

Thank you.

askvortsov

Sivoph Hi, welcome to Flarum! The general gist of the frontend system is as follows:

Flarum is an SPA, so for the most part the backend is just a REST API, and all frontend functionality is done through the Mithril JS based frontend code. When you connect to a flarum site, your browser downloads and runs a few files that contain all this code.

Extensions register their frontend code with Flarum via the Frontend extender, essentially giving a directory that contains bundled and minimized code. Flarums backend then combines all extension code together to get the assets served to users. We minimize/bundle code as part of development so that:

code can be split into multiple files
code can be minimized
TypeScript can be used
some import mechanics can be supported

Among other reasons. Essentially, if you look at most extensions, they have a js folder with src and dist subdirectories. Source code lives in src, and then whenever changes are pushed to GitHub an automatic GitHub actions script rebuilds the dist bundled js.

As for the structure of code itself, there's nothing too fancy: the src folder has subdirs for admin code and forum code; each of those has an index.js file that executes when the user accesses the corresponding frontend. Often though frontend code depends on the global application object being loaded, so we wrap it it in a closure and put that into a global array of initializers so that it's run at the correct time.

If you haven't yet done so, I'd heavily recommend taking a look at our extension development docs: https://docs.flarum.org/extend/frontend

Justoverclock

Well first of all meanwhile a core dev come here I can post something useful for you:

First, install Flarum locally (maybe with xampp or similar)
Second, install Flarum CLI to generate your extension boilerplate.
After that on your machine you need to install Yarn.
To watch and transpile your code on the fly into your extension/js folder open a terminal and type yarn install and then yarn dev to transpile your code.

When you are ready for production mode in the same folder you can run npm run build to build your code for production.

You don’t really need mithril but if you want to understand the basics try to write html and see the result here:

https://arthurclemens.github.io/mithril-template-converter/

Sivoph

Thanks, Justoverclock. You are quite a prolific author, and I've been primarily looking at some of your more basic extensions like hot cards. I notice it is not using a serializer, which I think means you are connecting to an API component. From what it looks like with the unminified/converted js file, it looks like a bunch of modules are exported (which I'm thinking is boilerplate and happens during transpiling), and you are in initializing, calling a prototype object.

Then you use a find query to pull up database models and return a view. I usually reference the database to see how these queries are working/connected/formatted. It's really great that you don't have to necessarily extend controllers, create listeners, and pass through variables just to get database info presented on the front-end.

I'm going to try and create some basic code and see what the transpilation does to it. Read the docs a few times over again. Shout out to you and I believe that Alex guy who has Youtube videos up.