#community-help

Building Python Flask Search UI with Typesense

TLDR Rakesh had issues building a Python Flask based Search UI with typesense. Jason suggested alternatives to using npm/yarn, and provided an example. Rakesh confirmed the provided solution worked and later enquired on adding a product filter panel, which Jason addressed.

Powered by Struct AI
+11
16
13mo
Solved
Join the chat
Aug 19, 2022 (13 months ago)
Rakesh
Photo of md5-21aea24e4690d531f5b32acf5ca39bca
Rakesh
06:05 PM
How can we build a python flask based Search UI and use typesense? Currently, it seems we need instantsearch.js which we can only run on npx or yarn. I want to use typesense in my flask website.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:06 PM
You don’t need npm / yarn to use instantsearch.js.

You can directly use it via script tags in html like this: https://www.algolia.com/doc/guides/building-search-ui/installation/js/#directly-in-your-page
06:07
Jason
06:07 PM
You can also use the typesense-instantsearch-adapter via script tags like this: https://github.com/typesense/typesense-instantsearch-adapter#installation (see the 3rd code snippet)
Rakesh
Photo of md5-21aea24e4690d531f5b32acf5ca39bca
Rakesh
06:10 PM
Thanks for the quick reply!! I tried all those options. My page does not show any search bar or results.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:10 PM
Could you share a standalone HTML file that replicates the issue? I can help debug from there
Rakesh
Photo of md5-21aea24e4690d531f5b32acf5ca39bca
Rakesh
06:12 PM
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:14 PM
Could you also share the contents of src/app.js?
06:15
Jason
06:15 PM
Oh wait, this looks like the code that’s generated from the demo repo we have which uses npm
06:16
Jason
06:16 PM
Let me put together a quick example which doesn’t uses npm / yarn for you. Hang on
Rakesh
Photo of md5-21aea24e4690d531f5b32acf5ca39bca
Rakesh
06:19 PM
that will be great.. i will wait
Rakesh
Photo of md5-21aea24e4690d531f5b32acf5ca39bca
Rakesh
07:12 PM
Thanks Jason !! I will try this tomorrow and let you know
Aug 20, 2022 (13 months ago)
Rakesh
Photo of md5-21aea24e4690d531f5b32acf5ca39bca
Rakesh
10:03 AM
Jason that works perfect.. thanks for your help!!
10:05
Rakesh
10:05 AM
I would also like have product filter panel.. any idea how can I include it?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
03:31 PM
You want to add a new empty div with some ID, and then use the refinementList widget: https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/
Aug 22, 2022 (13 months ago)
Rakesh
Photo of md5-21aea24e4690d531f5b32acf5ca39bca
Rakesh
06:48 AM
Thanks again for your help 🙂
+11