Azure Backend <-> Vercel Frontend

[r-pathak]

Hey all,

Seen a couple posts regarding how it may be difficult to deploy Flowise into Vercel, with that in mind - I wanted to share my current ideal setup and basically check-in on whether it is actually feasible.

Essentially, I want to deploy Flowise as an Azure container instance as mentioned in the docs, build my flows from said instance - but then embed the bubble chat within a NextJS app hosted in Vercel.

I can see how deploying the 'backend' is problematic in Vercel, hence the container instance - but is there any reason why the frontend embed wouldn't work in my NextJS app?

[For reference, my API is also setup in Azure using Python / Flask, on a separate app service. Therefore I don't have a deployed/actively used '/api/ folder within my Vercel app]

Hope this is clear, but let me know if I can clarify anything.

Also congrats to the founders on building this very cool project, already showing people around my workplace 🥇

[Jaredude]

I've implemented Flowise chat in nextjs apps using the js method as well as the React Flowise Chat Embed component and even using the Flowise API endpoints called via nextjs api routes as opposed to the built-in js. I would imagine you might encounter issues if you're still using nextjs 12 (or maybe even 13), but there is nothing intrinsically incompatible with Flowise and nextjs from a frontend perspective. What you're looking to build (Flowise in an Azure container + js embed in nextjs) is feasible. You might want to consider using the FlowiseChatEmbed component lib instead of straight js implementation.

[amansoniamazatic]

@r-pathak @Jaredude , I believe the main issue you are encountering is a CORS error. It's a common error that occurs on many websites when using embedded chat or similar functionalities. To check this error, follow these steps:

Open your website and click on the chatbot.
Right-click on the chatbot, then select "Inspect."
In the Developer Tools, go to the "Network" tab.
At the same time, type any random message in the chat window.
If you encounter a CORS error in the network tab, you will need to update your Nginx file. You can search the internet for information on Nginx and CORS. For your reference, you can use the following link: https://enable-cors.org/server_nginx.html.

Note: If you are not using Nginx, then search for solutions related to the CORS topic.