Videos on how to extend Flarum

Ralkage

Hi Clark,

Huge fan of these sessions as it truly shows the daily struggles that developers encounter 😃

I've learned a few new tricks from watching your last two videos and have applied it to my own extension development routines. I also noticed we do a lot of similar things as I feel more confident knowing developers do a lot of similar things during development without even noticing in the first place. This has boosted my confidence greatly and I hope you post more sessions 🙂 I am mostly looking forward to more complex projects that go in depth with the struggles I face with modern JS development (such as the features introduced ES6 as well as getting to know frameworks such as Mithril more better).

I would also like to see you hammer out more complex extensions that deal with events, permissions, notifications, migrations, as well as models, controllers, and validation on the PHP/Laravel component side 😉

I look forward to your next session! (hopefully I can attend especially if its at the same time frame as your last session 😙)

clarkwinkelmann

Ralkage thanks for the kind words 😺

I'll definitely try to cover those topics. Some can easily be showcased in live streams while coding live, while others might be best explored in dedicated videos because a concrete extension using them would take too many hours to write.

I still need to decide on the theme of the next livestream.

Unless something unexpected shows up, next stream should be next week, same day and same time (Thursday around 18:00 UTC)

clarkwinkelmann

Hi guys,

Unfortunately I won't be able to host a stream tonight. I'll be skipping this week and should be back next week same time.

Good new is, I've already got the subject for next week's stream. We'll be writing a (very annoying) poke extension. It will cover API endpoint, database modifications, notifications, user and admin features in a same extension and some permissions. It should be doable in about 2 hours. It likely won't be published on Packagist but the code will be open-sourced as always so you can use it as example/inspiration/base for your own extensions.

Ralkage

clarkwinkelmann I had started experimenting with extensions by attempting to create a Poke extension based on Facebook's take on poking but adapted for Flarum (it got lost like my school work 🤪 ). This time I'm going to sit back and let the pro show me how it's done 🙈

clarkwinkelmann

Join me live in one hour ! (20:30 CET, 18:40 UTC)

update: replay available:

The timestamps will come later.

Ralkage

clarkwinkelmann I set a reminder 😽

jvloo

Thanks for the hard work, Sir. Followed and Liked. Can't wait for more tutorial videos rolling out 😍

clarkwinkelmann

Thanks to everyone who joined in! The stream can be replayed above.

jvloo

clarkwinkelmann Thanks for the awesome live stream ** navigating to the github repo now 😛 **

010101

@clarkwinkelmann, do you know of a good node.js / yarn 🧶 (meow) video tutorial which starts at the very beginning? Something to help me learn why that yarn command (js compilation, I guess) is needed and what that is doing? Yeah, I need something that basic. 🥺

Edit: Ooo. I'm looking into how can I do all of this online on a simple Chromebook for example. So that I don't have to use my Mac desktop and be tied to that if I don't want to. I've come across codeenvy.io. You can set up a workspace and stack for free online. A tutorial on creating a Flarum Extension, but 100% online, not in a local offline environment, would be 🤯.

And another edit: After a pure fork of your poke demo and installing on my Flarum, I get:

Flarum encountered a boot error (Error)
Class 'ClarkWinkelmann\Poke\Extenders\ForumAttributes' not found
thrown in /vendor/zerosonesfun/poke/extend.php on line 24

But the class exists. I'm not seeing typos. I did see that in the extend file the forum/admin JavaScript was pointing to a dist folder which doesn't exist. I updated that.

clarkwinkelmann

010101 do you know of a good node.js / yarn video tutorial

Unfortunately no I don't have any tutorial to suggest. Yarn is just a package manager. The yarn commands actually call webpack which is yet another dependency used by Flarum.

010101 I'm looking into how can I do all of this online

This is not easy, because you need Composer. You might be able to work on a remote VPS from a Chromebook, but going completely in the cloud would require a Flarum-enabled online IDE.

010101 Class 'ClarkWinkelmann\Poke\Extenders\ForumAttributes' not found

I can't see anything wrong either 😬 no idea what's happening there...

jvloo

010101 Class 'ClarkWinkelmann\Poke\Extenders\ForumAttributes' not found

In vendor/composer/autoload_static.php, find the array prefixDirsPsr4, and add:

    'ClarkWinkelmann\\Poke\\' =>
    array (
        0 => __DIR__ . '/..' . '/clarkwinkelmann/flarum-ext-poke/src',
    ),

010101 I did see that in the extend file the forum/admin JavaScript was pointing to a dist folder which doesn't exist

Yes, I did encounter that issue too. So, I ended up moving admin.js and forum.js into a /dist folder 🤪

So finally, have you installed the extension successfully? 😅

010101

clarkwinkelmann Alright, thanks! Yeah no matter how many times I read the extend docs I can’t wrap my head around the part where you do a yarn command. Docs say to just type:

npm install
npm run dev

Then I guess you’ll have your js file in the right place and format that it needs to be?

If I ever figure this stuff out I’m definitely writing a Flarum for dummies and non-devs like me book. 🤣

clarkwinkelmann

010101

npm install means "install the packages defined in dependencies in packages.json". Those end up in node_modules folder.

npm run dev means "run the dev script defined in packages.json". Which maps to webpack --mode development --watch, which launches webpack. Webpack automatically reads the webpack.config.js file, which imports a default configuration for Flarum from the flarum-webpack-config dependency.

010101

clarkwinkelmann Cool. Ok. Every little bit I hear from you and others is helping. I guess when you do a yarn command in your tutorials you are doing something a little different. Or, just another way to do something.

I've discovered Google Cloud Shell and maybe I'm getting my hopes up, but with Google Cloud Shell, I might be able to get close or 100% to being able to develop Flarum extensions on my Chromebook.

https://console.cloud.google.com/cloudshell

matteocontrini

010101 I guess when you do a yarn command in your tutorials you are doing something a little different.

It has the same effect. npm is the original package manager for Node.js that was born about 10 years ago. The company maintains the npmjs.com website, the npm public registry and the npm terminal utility that is usually bundled with Node.js.

The npm history is quite bumpy, and there was a period where very little improvements were made to the npm CLI. One of the main problems was that it was veeery slow to install packages (still faster than composer though). It also had some other annoying bugs and weird behaviours.

So some alternatives were born, the most popular being yarn by Facebook. yarn still uses the npm public registry (it actually mirrors it on Facebook's servers) but provides a different terminal utility that does similar things, presumably better. It was a common opinion that it was true (and a fact wrt performance), at the time, but today npm is much better than it was and has catched up on many aspects, so as far as I'm concerned there aren't many reasons to prefer yarn over npm today. I found npm to be actually faster than yarn in my limited testing.

In short, I would suggest to stick with npm unless you have a real reason for not using it. There's a lot more documentation and resources about npm than yarn on the web.

clarkwinkelmann

As I said in the video, javascript dist files were not included in git due to the extension being a demo. So you have to run yarn install and yarn build (or dev) before you can use it 😉

jvloo

clarkwinkelmann Arhhh.. sorry for not taking full attention in the class 😅

EDIT: Yassssss!!! I manage to install it on my Flarum finally 😄 😄 😄 It works like a charm 🤟

jvloo

matteocontrini Wow, thanks for the clarification, sir. I always confuse both of them (yarn and npm) and now I think I should just stick to npm? 😃

010101

matteocontrini Thank you!

matteocontrini

jvloo I think I should just stick to npm?

I think it's easier unless you have particular needs or something to complain about npm

« Previous Page Next Page »