Skip to content

Commit

Permalink
feat(nuxt): add bullmq module (#62)
Browse files Browse the repository at this point in the history
* feat(nuxt): add bullmq module

* Remove BullMQ related files

* refactor: config

* fix: lint issues

* Refactor BullMQ plugin and add module types

* Add credit for scheduler implementation

* Refactor BullMQ plugin to accept generic type

* fix module setup and add activeModules array

* refactor BullMQ plugin initialization

* update Pergel Nuxt BullMQ installation and API documentation

* update installation instructions and environment variables
  • Loading branch information
productdevbook authored Dec 14, 2023
1 parent d98027d commit 71d381f
Show file tree
Hide file tree
Showing 30 changed files with 1,002 additions and 88 deletions.
24 changes: 12 additions & 12 deletions .docs/content/pergel/3.nuxt/S3/1.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ links:
to: https://www.npmjs.com/package/@aws-sdk/client-s3
---

1. Add it to your `modules` section of `nuxt.config`:
1. Project configuration:

::code-group
```ts [nuxt.config.ts]
Expand Down Expand Up @@ -37,7 +37,7 @@ Nuxt >= 3.9.0 is required.
2. Auto install dependencies:

::code-group
```sh [pnpm]
```sh [terminal]
pergel install
```
::
Expand Down Expand Up @@ -84,18 +84,18 @@ Root directory of your project `pergel` folder inside `README.yaml` file. Check
```sh [.env]
# You see this in your README.yaml file
env:
NUXT_TEST_S3_REGION: auto
NUXT_TEST_S3_ENDPOINT:
NUXT_TEST_S3_ACCESS_KEY_ID:
NUXT_TEST_S3_SECRET_ACCESS_KEY:
NUXT_TEST_S3_BUCKET:
NUXT_MYPROJECT_S3_REGION: auto
NUXT_MYPROJECT_S3_ENDPOINT:
NUXT_MYPROJECT_S3_ACCESS_KEY_ID:
NUXT_MYPROJECT_S3_SECRET_ACCESS_KEY:
NUXT_MYPROJECT_S3_BUCKET:

# Copy and change `:` to `=` and add your credentials
NUXT_TEST_S3_REGION=auto
NUXT_TEST_S3_ENDPOINT=
NUXT_TEST_S3_ACCESS_KEY_ID=
NUXT_TEST_S3_SECRET_ACCESS_KEY=
NUXT_TEST_S3_BUCKET=
NUXT_MYPROJECT_S3_REGION=auto
NUXT_MYPROJECT_S3_ENDPOINT=
NUXT_MYPROJECT_S3_ACCESS_KEY_ID=
NUXT_MYPROJECT_S3_SECRET_ACCESS_KEY=
NUXT_MYPROJECT_S3_BUCKET=
```
::

Expand Down
187 changes: 187 additions & 0 deletions .docs/content/pergel/3.nuxt/bullmq/1.installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
---
title: Installation
description: 'Pergel Nuxt Module for BullMQ'
links:
- label: 'bullmq'
icon: i-simple-icons-npm
to: https://www.npmjs.com/package/bullmq
---

1. Project configuration:

::code-group
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@pergel/nuxt'],
pergel: {
projects: {
myproject: {
// ... other modules
bullmq: true,
},
// bookList: {
// ses: false
// },
},
},
})
```
::

::callout{color="amber" icon="i-ph-warning-duotone"}
Node >= 20.8.0 is required.
Nuxt >= 3.9.0 is required.
::


2. Auto install dependencies:

::code-group
```sh [terminal]
pergel install
```
::

:read-more{title="Install Pergel CLI" to="/pergel/cli"}

3. Prepare Type Definitions:

::code-group
```sh [pnpm]
pnpm nuxt prepare
```
```sh [npm]
npm run nuxt prepare
```
```sh [yarn]
yarn nuxt prepare
```
::

4. Add your server plugin:

This code blog is a listener.

::code-group
```ts [server/plugins/bullmqTest.ts]
import type { Job } from 'bullmq'

export default pergelMyproject()
.bullmq()
.nitroPlugin({
setup: ({ useScheduler }) => {
const { start } = useScheduler('email')

const isStarted = start(
consumeMethod,
)

if (!isStarted)
console.warn('Redis connection not started')
},
})

// Example method
async function consumeMethod(job: Job<any, any, string>) {
console.warn('Coming data', job.data)
const result = await sleep(3000)
console.warn(result)
}

function sleep(time: number) {
return new Promise((resolve) => {
console.warn('Process started')
setTimeout(() => {
resolve('Process finished')
}, time)
})
}

```

```ts [composables]
pergelMyproject().bullmq().nitroPlugin({})
```

::


::callout{icon="i-ph-info" color="yellow"}
`pergel/[projectName]/bullmq/index.d.ts` file will be created automatically. If you change type go to file and change it.
::


5. Use anywhere server side:

::code-group
```ts [server/api/test.ts]
export default defineEventHandler(async () => {
const ID = Math.random().toString(36).substring(7) // generate random id

const { schedule } = pergelMyproject().bullmq().useScheduler()

if (schedule === null)
return 'Redis not started'

schedule('email', {
id: ID,
name: '1020',
data: {
email: 'test',
body: 'Welcome to our website',
},
options: {
delay: 1000,
attempts: 3,
},
}, {
jobId: ID,
removeOnComplete: {
age: 30,
},
attempts: 5,
backoff: {
type: 'exponential',
delay: 1000,
},
})

return 'Hello BullMQ'
})
```
::

6. Add .env file

Root directory of your project `pergel` folder inside `README.yaml` file. Check for `projectName` and `S3` section.

::code-group
```sh [.env]
# You see this in your README.yaml file
env:
NUXT_MYPROJECT_BULLMQ_OPTIONS_HOST:
NUXT_MYPROJECT_BULLMQ_OPTIONS_PORT: 6379
NUXT_MYPROJECT_BULLMQ_OPTIONS_DB: 0
NUXT_MYPROJECT_BULLMQ_OPTIONS_PASSWORD:
NUXT_MYPROJECT_BULLMQ_OPTIONS_USERNAME:
NUXT_MYPROJECT_BULLMQ_URL:

# Copy and change `:` to `=` and add your credentials
NUXT_MYPROJECT_BULLMQ_OPTIONS_HOST=
NUXT_MYPROJECT_BULLMQ_OPTIONS_PORT=6379
NUXT_MYPROJECT_BULLMQ_OPTIONS_DB=0
NUXT_MYPROJECT_BULLMQ_OPTIONS_PASSWORD=
NUXT_MYPROJECT_BULLMQ_OPTIONS_USERNAME=
NUXT_MYPROJECT_BULLMQ_URL=
NUXT_MYPROJECT_BULLMQ_OPTIONS_TLS=

```
::

::callout{icon="i-ph-check-circle-duotone" color="green"}
Well done! You have successfully installed the module.
::

::callout{icon="i-ph-check-circle-duotone" color="yellow"}
More information about the module [API](./2.api.md)
::
35 changes: 35 additions & 0 deletions .docs/content/pergel/3.nuxt/bullmq/2.api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
title: API
description: 'Pergel Nuxt Module for BullMQ'
links:
- label: 'bullmq'
icon: i-simple-icons-npm
to: https://www.npmjs.com/package/bullmq'
---

::callout{icon="i-ph-warning-duotone" color="amber"}
Project name `pergelMyproject` is used as an example. Please change it to your project name.
::


## Server

### nitroPlugin

Starts a listener for the queue.

```ts
pergelMyproject().bullmq().nitroPlugin({
setup: ({ useScheduler }, nitro) => {
const { start } = useScheduler(queueName,
},
})
```
### useScheduler
Returns a scheduler for the queue.
```ts
const { schedule } = pergelTest().bullmq().useScheduler()
```
2 changes: 2 additions & 0 deletions .docs/content/pergel/3.nuxt/bullmq/_dir.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
title: bullmq
icon: i-game-icons-bull
4 changes: 2 additions & 2 deletions .docs/content/pergel/3.nuxt/json2csv/1.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ links:
to: https://www.npmjs.com/package/@json2csv/node
---

1. Add it to your `modules` section of `nuxt.config`:
1. Project configuration:

::code-group
```ts [nuxt.config.ts]
Expand Down Expand Up @@ -37,7 +37,7 @@ Nuxt >= 3.9.0 is required.
2. Auto install dependencies:

::code-group
```sh [pnpm]
```sh [terminal]
pergel install
```
::
Expand Down
2 changes: 1 addition & 1 deletion .docs/content/pergel/3.nuxt/json2csv/_dir.yml
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
title: Json2csv
icon: carbon-microservices-2
icon: i-carbon-microservices-2
4 changes: 2 additions & 2 deletions .docs/content/pergel/3.nuxt/nodeCron/1.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ links:
to: https://www.npmjs.com/package/node-cron
---

1. Add it to your `modules` section of `nuxt.config`:
1. Project configuration:

::code-group
```ts [nuxt.config.ts]
Expand Down Expand Up @@ -37,7 +37,7 @@ Nuxt >= 3.9.0 is required.
2. Auto install dependencies:

::code-group
```sh [pnpm]
```sh [terminal]
pergel install
```
::
Expand Down
16 changes: 8 additions & 8 deletions .docs/content/pergel/3.nuxt/ses/1.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ links:
to: https://www.npmjs.com/package/@aws-sdk/client-ses
---

1. Add it to your `modules` section of `nuxt.config`:
1. Project configuration:

::code-group
```ts [nuxt.config.ts]
Expand Down Expand Up @@ -37,7 +37,7 @@ Nuxt >= 3.9.0 is required.
2. Auto install dependencies:

::code-group
```sh [pnpm]
```sh [terminal]
pergel install
```
::
Expand Down Expand Up @@ -105,14 +105,14 @@ Root directory of your project `pergel` folder inside `README.yaml` file. Check
```sh [.env]
# You see this in your README.yaml file
env:
NUXT_TEST_SES_REGION:
NUXT_TEST_SES_ACCESS_KEY_ID:
NUXT_TEST_SES_SECRET_ACCESS_KEY:
NUXT_MYPROJECT_SES_REGION:
NUXT_MYPROJECT_SES_ACCESS_KEY_ID:
NUXT_MYPROJECT_SES_SECRET_ACCESS_KEY:

# Copy and change `:` to `=` and add your credentials
NUXT_TEST_SES_REGION=us-east-1
NUXT_TEST_SES_ACCESS_KEY_ID=123456
NUXT_TEST_SES_SECRET_ACCESS_KEY=123456
NUXT_MYPROJECT_SES_REGION=us-east-1
NUXT_MYPROJECT_SES_ACCESS_KEY_ID=123456
NUXT_MYPROJECT_SES_SECRET_ACCESS_KEY=123456
```
::

Expand Down
5 changes: 4 additions & 1 deletion .docs/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const devConfig = {
],
devtools: { enabled: true },
ui: {
icons: ['heroicons', 'simple-icons', 'ph'],
icons: ['heroicons', 'simple-icons', 'ph', 'game-icons'],
},
routeRules: {
'/': { redirect: '/pergel' },
Expand Down Expand Up @@ -59,6 +59,9 @@ export default defineNuxtConfig(defu({}, process.env.DEV && devConfig, {
crawlLinks: true,
},
},
ui: {
icons: ['heroicons', 'simple-icons', 'ph', 'game-icons', 'carbon', 'fa-brands'],
},
routeRules: {
...routeRules,
},
Expand Down
Loading

0 comments on commit 71d381f

Please sign in to comment.