Need help getting started with extensions

maniacmusic

I'm making the thread in the hope that someone can guide me a bit through learning how to code extensions for Flarum as I got stuck very early.

I followed http://flarum.org/docs/extend/start/ but when it says the extension should show up now in the admin panel - nothing shows up. ?

My bootstrap.php

<?php

return function () {
    echo 'Hello, world!';
};

My composer.json

{
    "name": "acme/flarum-hello-world",
    "description": "Say hello to the world!",
    "type": "flarum-extension",
    "require": {
        "flarum/core": "^0.1.0-beta.3"
    },
    "extra": {
        "flarum-extension": {
            "title": "Hello World"
        }
    }
}

The folder structure: flarum / vendor / acme / flarum-hello-world /

Whats wrong?

Kyrne

maniacmusic so first things first, that tutorial is fairly outdated, most stuff is the same but a lot is different.

As for it now showing up, it's because you didn't require it in your main composer.json, follow this tutorial: https://discuss.flarum.org/d/1608-extension-development-using-composer-repositories-path

jordanjay29

The guide is outdated (and we're working on fixing that).

Here is a First Read for developing
And you'll want to use this instead of flarum/vendor

maniacmusic

Thanks guys, will do!

maniacmusic

Figured it out but got stuck at the Gulp part.
I followed the tutorial http://flarum.org/docs/extend/start/
Is that part up-to-date or did I mess up?

Ran the npm install and gulp watch command...

C:\xampp\htdocs\flarum\workbench\flarum-ext-helloworld\js\forum>gulp watch
[23:26:31] Using gulpfile C:\xampp\htdocs\flarum\workbench\flarum-ext-helloworld\js\forum\gulpfile.js
[23:26:31] Starting 'default'...
[23:26:31] Finished 'default' after 30 ms
[23:26:31] Starting 'watch'...
[23:26:31] Finished 'watch' after 6.48 ms

...the dist/extension.js was not generated.

bootstrap.php:

<?php

use Flarum\Event\ConfigureClientView;

$events->listen(ConfigureClientView::class, function (ConfigureClientView $event) {
    if ($event->isForum()) {
        $event->addAssets(__DIR__.'/js/forum/dist/extension.js');
        $event->addBootstrapper('koat/flarum-ext-helloworld/main');
    }
});

composer.json

{
    "name": "koat/flarum-ext-helloworld",
    "description": "Say hello to the world!",
    "type": "flarum-extension",
    "require": {
        "flarum/core": "^0.1.0-beta.6"
    },
    "extra": {
        "flarum-extension": {
            "title": "Hello World"
        }
    }
}

js/forum/gulpfile.js

var flarum = require('flarum-gulp');

flarum({
  modules: {
    'koat/flarum-ext-helloworld': [
      'src/**/*.js'
    ]
  }
});

js/forum/package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.11",
    "flarum-gulp": "^0.1.0"
  }
}

js/forum/main.js

app.initializers.add('koat-helloworld', function() {
	alert('Hello, world!');
});

jordanjay29

You can use gulp to manually compile.

Also make sure that your package.json under js/flarum/package.json uses Gulp 0.2.0.

Kyrne

jordanjay29 just to clarify he means Flarum-gulp should be 0.2.0, normal gulp should be 3.9.1

Changing these values will require another npm install

maniacmusic

Thanks for clearing that up. I also missed the part where the main.js should be in src folder.

I'd like to write my first simple extension adding the ability to set a 'featured image', let's say from link (but extending the image upload extension would be even better), on post creation. A button in the editor should open a modal with a textfield to add the link.
The featured image will be displayed in the background of the "hero" title of corresponding discussion as well as replacing the avatar in the discussion list.
If a featured image is set it should also add some CSS to make the discussion title readable under all conditions.

Could someone point me into the right direction in the API to accomplish this example?

Ralkage

maniacmusic Ah you mean discussion title background images?

Like instead of it being a certain color depending on the tag, you want to be able to add an image instead I'm assuming.

maniacmusic

Ralkage that's right. Excuse the late reply, I'm just starting to recover from a very intense weekend.