Novu•15mo ago

Using Local Docker Instance for digest-learning-app

Yesterday I was able to successfully get the digest-learning-app to connect to the host Novu site and provide an in-app update to the web page. Today, I have been refactoring the front-end and back-end code in digest-learning-app to point to my local Docker instance of Novu. I am happy to say that I have the web page communicating with the Docker API instance and it is creating a trigger. I can see based on my local UI that a new activity has been created. However, I am not getting a notification in my browser. Also, when I click on the bell icon, the Notifications window appears, but it just has the red circle icon to show that it is loading. But nothing appears. I think I made all of the necessary changes. When you have time, will you please offer some advice? Thanks

16 Replies

Novu_Bot•15mo ago

@Todd H., you just advanced to level 3!

mdd•15mo ago

@Todd H. do you have websocket service and worker running?

Todd H.OP•15mo ago

I think everything is up and running. After I see the trigger being called in the API, I see logs for the worker.

Todd H.OP•15mo ago

api      | [18:09:24.222] INFO (19): TriggerQueueService.add: 4c2ff219-9b81-4573-a782-cbaa58c0800f Group: 651b1a98e48df7ef3dc39332
api      |     serviceName: "@novu/api"
api      |     serviceVersion: "0.19.0"
api      |     platform: "Docker"
api      |     tenant: "OS"
api      |     req: {
api      |       "id": 457,
api      |       "method": "POST",
api      |       "url": "/v1/events/trigger",
api      |       "query": {},
api      |       "params": {
api      |         "0": "events/trigger"
api      |       },
api      |       "headers": {
api      |         "accept": "application/json, text/plain, */*",
api      |         "content-type": "application/json",
api      |         "user-agent": "axios/1.2.0",
api      |         "content-length": "125",
api      |         "accept-encoding": "gzip, deflate, br",
api      |         "host": "localhost:3000",
api      |         "connection": "close"
api      |       },
api      |       "remoteAddress": "::ffff:172.21.0.1",
api      |       "remotePort": 34302
api      |     }
api      |     userId: "651b1a91e48df7ef3dc3932a"
api      |     environmentId: "651b1a98e48df7ef3dc39338"
api      |     organizationId: "651b1a98e48df7ef3dc39332"
api      |     context: "TriggerQueueService"

api      | [18:09:24.222] INFO (19): TriggerQueueService.add: 4c2ff219-9b81-4573-a782-cbaa58c0800f Group: 651b1a98e48df7ef3dc39332
api      |     serviceName: "@novu/api"
api      |     serviceVersion: "0.19.0"
api      |     platform: "Docker"
api      |     tenant: "OS"
api      |     req: {
api      |       "id": 457,
api      |       "method": "POST",
api      |       "url": "/v1/events/trigger",
api      |       "query": {},
api      |       "params": {
api      |         "0": "events/trigger"
api      |       },
api      |       "headers": {
api      |         "accept": "application/json, text/plain, */*",
api      |         "content-type": "application/json",
api      |         "user-agent": "axios/1.2.0",
api      |         "content-length": "125",
api      |         "accept-encoding": "gzip, deflate, br",
api      |         "host": "localhost:3000",
api      |         "connection": "close"
api      |       },
api      |       "remoteAddress": "::ffff:172.21.0.1",
api      |       "remotePort": 34302
api      |     }
api      |     userId: "651b1a91e48df7ef3dc3932a"
api      |     environmentId: "651b1a98e48df7ef3dc39338"
api      |     organizationId: "651b1a98e48df7ef3dc39332"
api      |     context: "TriggerQueueService"

worker   | [18:09:24.476] INFO (19): Starting New Job 652836544a6b6e9169bc56c1 of type: trigger
worker   |     serviceName: "@novu/worker"
worker   |     serviceVersion: "0.19.0"
worker   |     platform: "Docker"
worker   |     tenant: "OS"
worker   |     transactionId: "4c2ff219-9b81-4573-a782-cbaa58c0800f"
worker   |     environmentId: "651b1a98e48df7ef3dc39338"
worker   |     organizationId: "651b1a98e48df7ef3dc39332"
worker   |     context: "AddJob"
worker   | [18:09:24.715] INFO (19): Starting New Job 652836544a6b6e9169bc56c2 of type: digest
worker   |     serviceName: "@novu/worker"
worker   |     serviceVersion: "0.19.0"
worker   |     platform: "Docker"
worker   |     tenant: "OS"
worker   |     transactionId: "4c2ff219-9b81-4573-a782-cbaa58c0800f"
worker   |     environmentId: "651b1a98e48df7ef3dc39338"
worker   |     organizationId: "651b1a98e48df7ef3dc39332"
worker   |     jobId: "652836544a6b6e9169bc56c1"
worker   |     context: "AddJob"
worker   | [18:09:34.973] INFO (19): Starting New Job 652836544a6b6e9169bc56c3 of type: in_app
worker   |     serviceName: "@novu/worker"
worker   |     serviceVersion: "0.19.0"
worker   |     platform: "Docker"
worker   |     tenant: "OS"
worker   |     transactionId: "4c2ff219-9b81-4573-a782-cbaa58c0800f"
worker   |     environmentId: "651b1a98e48df7ef3dc39338"
worker   |     organizationId: "651b1a98e48df7ef3dc39332"
worker   |     jobId: "652836544a6b6e9169bc56c2"
worker   |     context: "AddJob"

worker   | [18:09:24.476] INFO (19): Starting New Job 652836544a6b6e9169bc56c1 of type: trigger
worker   |     serviceName: "@novu/worker"
worker   |     serviceVersion: "0.19.0"
worker   |     platform: "Docker"
worker   |     tenant: "OS"
worker   |     transactionId: "4c2ff219-9b81-4573-a782-cbaa58c0800f"
worker   |     environmentId: "651b1a98e48df7ef3dc39338"
worker   |     organizationId: "651b1a98e48df7ef3dc39332"
worker   |     context: "AddJob"
worker   | [18:09:24.715] INFO (19): Starting New Job 652836544a6b6e9169bc56c2 of type: digest
worker   |     serviceName: "@novu/worker"
worker   |     serviceVersion: "0.19.0"
worker   |     platform: "Docker"
worker   |     tenant: "OS"
worker   |     transactionId: "4c2ff219-9b81-4573-a782-cbaa58c0800f"
worker   |     environmentId: "651b1a98e48df7ef3dc39338"
worker   |     organizationId: "651b1a98e48df7ef3dc39332"
worker   |     jobId: "652836544a6b6e9169bc56c1"
worker   |     context: "AddJob"
worker   | [18:09:34.973] INFO (19): Starting New Job 652836544a6b6e9169bc56c3 of type: in_app
worker   |     serviceName: "@novu/worker"
worker   |     serviceVersion: "0.19.0"
worker   |     platform: "Docker"
worker   |     tenant: "OS"
worker   |     transactionId: "4c2ff219-9b81-4573-a782-cbaa58c0800f"
worker   |     environmentId: "651b1a98e48df7ef3dc39338"
worker   |     organizationId: "651b1a98e48df7ef3dc39332"
worker   |     jobId: "652836544a6b6e9169bc56c2"
worker   |     context: "AddJob"

Todd H.OP•15mo ago

And I can see the result in the Activity Feed

Todd H.OP•15mo ago

Interesting. I had left the "Digest Playground" page up and I switched back to that window. Now I see that the bell icon does have the red dot and there are notifications. It just took a really long time (compared to using the hosted Novu resources). Well.. I am not able to mark them are read nor delete the messages. 🤔 FWIW - I have the digest set to a 10 second delay. I thought that time was a factor and I needed to wait longer for the bell icon to change. Turns out that if I refresh the page after 10 seconds, the icon appears and the message is there. When I click on delete, I have to refresh the page again to see that there is no message. The only changes I made were to Body.js in frontend

                <NovuProvider subscriberId={'digestSub'} 
                    applicationIdentifier={process.env.REACT_APP_YOUR_APP_ID_FROM_ADMIN_PANEL}
                    backendUrl="http://localhost:3000">

                <NovuProvider subscriberId={'digestSub'} 
                    applicationIdentifier={process.env.REACT_APP_YOUR_APP_ID_FROM_ADMIN_PANEL}
                    backendUrl="http://localhost:3000">

And novu.js on the backend

const novu = new Novu(process.env.YOUR_NOVU_API_KEY_HERE, {backendUrl: "http://localhost:3000"});

const novu = new Novu(process.env.YOUR_NOVU_API_KEY_HERE, {backendUrl: "http://localhost:3000"});

@madd or @sumitsaurabh927 When you have time, I could still use some help to understand why when I am using the digest-learning-app with my local Docker instance of Novu, the bell icon is not indicating that a message is waiting for me. But it does after I refresh the screen. I am not overly familiar with Node nor JavaScript. I do not know if there is another piece of the code I need to change so the webpage refreshes itself. It seems like everything is working except for that last piece on the UI. Thanks for all of your help.

sumitsaurabh927•15mo ago

What have you set as the digest time interval in the workflow? here?

sumitsaurabh927•15mo ago

Todd H.OP•15mo ago

10 seconds

sumitsaurabh927•15mo ago

so send a notification and wait for 10 seconds or more and see if a tiny red dot appears on the bell icon or not

Todd H.OP•15mo ago

The tiny red dot does not appear after ten seconds. However if I refresh the screen it appears. Also, when I click the bell to view messages, it gives me the option to mark a message as read or delete it. When I do either, the UI does not respond. But when I click refresh again, then the message is deleted.

sumitsaurabh927•15mo ago

Are you using headless?

Todd H.OP•15mo ago

I am using the same code from the digest-learning-app, but I modified a few things to point to my local Docker instance instead of hosted Novu site. For instance, in Header.js I now have this:

                <NovuProvider subscriberId={'digestSub'} 
                    applicationIdentifier={process.env.REACT_APP_YOUR_APP_ID_FROM_ADMIN_PANEL}
                    backendUrl="http://localhost:3000">
                    <PopoverNotificationCenter onNotificationClick={onNotificationClick}>
                        {({ unseenCount }) =>
                            <NotificationBell unseenCount={unseenCount} />}
                    </PopoverNotificationCenter>
                </NovuProvider>

                <NovuProvider subscriberId={'digestSub'} 
                    applicationIdentifier={process.env.REACT_APP_YOUR_APP_ID_FROM_ADMIN_PANEL}
                    backendUrl="http://localhost:3000">
                    <PopoverNotificationCenter onNotificationClick={onNotificationClick}>
                        {({ unseenCount }) =>
                            <NotificationBell unseenCount={unseenCount} />}
                    </PopoverNotificationCenter>
                </NovuProvider>

And in novu.js, I have this:

 const novu = new Novu(process.env.YOUR_NOVU_API_KEY_HERE, {backendUrl: "http://localhost:3000"});

 const novu = new Novu(process.env.YOUR_NOVU_API_KEY_HERE, {backendUrl: "http://localhost:3000"});

I also changes the APP ID and API Key to point to my Docker container.

Todd H.OP•15mo ago

I can see that my docker instance received the message.

sumitsaurabh927•15mo ago

I haven't played around with docker so tagging @Support to take a look here. I had faced similar problems when I was using the headless version and the way I got around it was having a separate call to fetch notifications when pressing the bell icon (maybe try and write an event handler for that)

Todd H.OP•15mo ago

Okay. I will see what support's take on this is. I appreciate your help. I will look for someone here to help me debug this issue and trouble shoot it. Assuming the code I am running Docker is the same as what is running on your servers, then Docker would be the only delta. Either way, I would really like to get this to work with Docker so I can demo it to my team. Our application is primarily web based. And there is a good chance we will host this internally. It would be nice to show off this feature.

Gaming

Programming

Using Local Docker Instance for digest-learning-app