Skip to main content

Adding flecks

@flecks/web is a fleck that builds and serves a webpage. You can add it to your application using the CLI:

npx flecks add @flecks/web
Fast and dynamic

If your application was still running when you added that fleck, you will see the application automatically restart!

Otherwise, if you run:

npm run start

you'll see a line in the output:

  @flecks/web/server/http HTTP server up @ localhost:3000!

Finally... a white page?​

If you visit localhost:3000 in your browser, you should now see... a blank white page! Don't fret though; if you open the devtools in your browser, you will see a little messaging from your application that will look something like:

[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
[HMR] Waiting for update signal from WDS...
flecks client v3.1.5 loading runtime...

This is a good sign! This means we successfully added a web server with HMR enabled by default. Oh, the possibilities...

Proceed with the hooking​

Let's make our fleck say-hello hook into @flecks/web client to do something when the client comes up (e.g. the browser loads the page).

packages/say-hello/src/index.js
export const hooks = {
  '@flecks/web/client.up': async (container) => {
    container.append('hello world');
  },
  '@flecks/server.up': async (flecks) => {
    const {id} = flecks.get('@flecks/core');
    process.stdout.write(`  hello server: ID ${id}\n`);
  },
};
And another one

Just like before, saving that file will automatically reload your webpage and show you the message immediately!

Glorious, isn't it?

An image of our simple hello world application running inside a Chromium browser window

Everything so far... plus Electron!​

Let's add another core fleck. flecks ships with a core fleck @flecks/electron. This runs your application inside of an instance of Electron. You'll add the fleck:

npx flecks add -d @flecks/electron

You will almost immediately see something like this:

An image of our simple hello world application running inside an Electron window

Isn't it beautiful? 😌

note

We used the -d option with flecks add to add @flecks/electron to devDependencies since it's only needed for development.

Next, we'll go over some of the nuts and bolts of how your application is built.