73 lines
2.2 KiB
Plaintext
73 lines
2.2 KiB
Plaintext
---
|
|
title: Adding flecks
|
|
description: Add flecks to your application to extend its functionality.
|
|
---
|
|
|
|
# Adding flecks
|
|
|
|
`@flecks/web` is a fleck that builds and serves a webpage. You can add it to your application
|
|
using the CLI:
|
|
|
|
```bash
|
|
npx flecks add @flecks/web
|
|
```
|
|
|
|
Now, if you run `npm start`, you'll see a line in the output:
|
|
|
|
```
|
|
@flecks/web/server/http HTTP server up @ 0.0.0.0:32340!
|
|
```
|
|
|
|
## Finally... a white page?
|
|
|
|
If you visit `localhost:32340` 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 v2.0.3 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).
|
|
|
|
```javascript title="packages/say-hello/src/index.js"
|
|
export const hooks = {
|
|
// highlight-start
|
|
'@flecks/web/client.up': async () => {
|
|
window.document.body.append('hello world');
|
|
},
|
|
// highlight-end
|
|
'@flecks/server.up': async (flecks) => {
|
|
const {id} = flecks.get('@flecks/core');
|
|
process.stdout.write(` hello server: ID ${id}\n`);
|
|
},
|
|
};
|
|
```
|
|
|
|
Now, restart your application and refresh your website. Glorious, isn't it?
|
|
|
|
|
|
|
|
## 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](https://www.electronjs.org/). You'll add the fleck:
|
|
|
|
```bash
|
|
npx flecks add @flecks/electron
|
|
```
|
|
|
|
Finally `npm start` and you will see something like this:
|
|
|
|
|
|
|
|
Isn't it beautiful? :relieved:
|