# Swiftype-node & CORS

**URL:** <https://discuss.elastic.co/t/swiftype-node-cors/175025>\
**Category:** Elastic Search\
**Tags:** elastic-site-search\
**Created:** [April 2, 2019, 3:20pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025 "2019-04-02T15:20:26Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![katyd](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katyd/32/43320_2.png) [@katyd](https://discuss.elastic.co/u/katyd)\
**Post date:** [April 2, 2019, 3:20pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/1 "2019-04-02T15:20:26Z")

</div>

I'm having trouble developing locally with [GitHub - swiftype/swiftype-node: Node.js client for the Swiftype API](https://github.com/swiftype/swiftype-node) as I'm running into CORS errors. I know I can open an instance of Chrome with web security disabled, but I'm hoping to avoid that. Anyone have suggestions or examples?

---

<div class="post-metadata">

**Author:** ![goodroot](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/goodroot/32/38389_2.png) [@goodroot](https://discuss.elastic.co/u/goodroot)\
**Post date:** [April 2, 2019, 4:09pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/2 "2019-04-02T16:09:23Z")

</div>

Hey Katy!

Thanks for joining the community. Hopefully we can help you out.

Can you walk me through what you're trying to build a bit more?

My first thought is that it's unusual to have Node on the client (see this [Quora post](https://www.quora.com/Can-Node-js-replace-JavaScript-on-the-client-side-meaning-that-can-I-write-Node-js-code-instead-of-JavaScript-code-or-jQuery-to-make-a-better-interaction-for-the-user) for a more long-winded think-through). 🤔

I look forward to hearing from you. 😄

Kellen

---

<div class="post-metadata">

**Author:** ![katyd](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katyd/32/43320_2.png) [@katyd](https://discuss.elastic.co/u/katyd)\
**Post date:** [April 2, 2019, 4:37pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/3 "2019-04-02T16:37:39Z")

</div>

Thanks for the reply, Kellen.

We were hoping to leverage swiftype-node in a React site to avoid reinventing the wheel. We're hoping to add a Site Search autocomplete feature (similar to [https://github.com/swiftype/swiftype-autocomplete-jquery](https://github.com/swiftype/swiftype-autocomplete-jquery)). I didn't see any React wrappers out there for Swiftype Site Search, but it seems like we should roll our own integration to make this work, unless you have other suggestions? We'd be very appreciative!

---

<div class="post-metadata">

**Author:** ![goodroot](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/goodroot/32/38389_2.png) [@goodroot](https://discuss.elastic.co/u/goodroot)\
**Post date:** [April 2, 2019, 5:43pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/4 "2019-04-02T17:43:19Z")

</div>

Katy --

We've been working on something that might help, and we're really excited about it.

Soon we'll be releasing an open source Search UI for building excellent search experiences: [https://github.com/elastic/search-ui](https://github.com/elastic/search-ui).

We have built a Site Search connector for it:

```auto
mport SiteSearchAPIConnector from "@elastic/search-ui-site-search-connector";

const connector = new SiteSearchAPIConnector({
  documentType: "national-parks",
  engineKey: "Z41R5U3Hi4s5gp1aw7kA"
});

```

You can follow the React [README](https://github.com/elastic/search-ui/tree/master/packages/react-search-ui), swapping out Site Search for App Search where appropriate.

We'd love people to dig into Search UI and start building things -- we haven't promoted it; we're still applying some polish. Your feedback would be most helpful.

Otherwise, we don't have a JavaScript client that would be a good fit for what you're hoping to accomplish. 😑

Kellen

---

<div class="post-metadata">

**Author:** ![katyd](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katyd/32/43320_2.png) [@katyd](https://discuss.elastic.co/u/katyd)\
**Post date:** [April 2, 2019, 7:11pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/5 "2019-04-02T19:11:09Z")

</div>

Kellen, that is perfect!! Thank you so much. I'm going to demo this today and would be happy to send feedback.

---

<div class="post-metadata">

**Author:** ![goodroot](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/goodroot/32/38389_2.png) [@goodroot](https://discuss.elastic.co/u/goodroot)\
**Post date:** [April 8, 2019, 11:14pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/6 "2019-04-08T23:14:45Z")

</div>

Hello, Katy ~ 👋

We gave the Search UI README a pretty major revision: [https://github.com/elastic/search-ui](https://github.com/elastic/search-ui).

Hopefully that didn't make things too confusing if you were trying to get up and running.

Wondering if Search UI was able to help you out -- any feedback?

Enjoy the week,

Kellen

---

<div class="post-metadata">

**Author:** ![katyd](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katyd/32/43320_2.png) [@katyd](https://discuss.elastic.co/u/katyd)\
**Post date:** [April 9, 2019, 12:00am UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/7 "2019-04-09T00:00:31Z")

</div>

Kellen, it's been very fun to use!

I have the early stages of a react component we're working on, if you'd like to take a look: [https://github.com/mapbox/dr-ui/blob/search/src/components/search/search.js](https://github.com/mapbox/dr-ui/blob/search/src/components/search/search.js)

The above will be a search component in our docs component library. It will appear as an input and the results will open up a popover as the user types.

A couple things that I haven't been able to smooth out yet:

- **handling of no results** - would like to show a custom message, but having trouble with state change. For example, flashes of "no results" as component loads before a user searches. While I could likely handle in React, would be great for a native feature in /search-ui to handle this if possible!
- **setting a spinning loader for when the results are loading** , I've been playing with different implementations of `isLoading` state but haven't hit the sweet spot yet. [Or maybe I'm using it incorrectly?](https://github.com/mapbox/dr-ui/blob/2d6310ccfacb8c2056bb53b657ef9c160ca47079/src/components/search/search.js#L83)
- **debouncing `searchAsYouTube` with custom `view`, on SearchBox** , when `searchAsYouType` enabled with a custom `view` it doesn't appear to debounce results [https://github.com/mapbox/dr-ui/blob/search/src/components/search/search.js#L190](https://github.com/mapbox/dr-ui/blob/search/src/components/search/search.js#L190)

Let me know if you'd like me to cut an issue in /search-ui with any of these comments 🙂

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [April 9, 2019, 12:07pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/8 "2019-04-09T12:07:01Z")

</div>

Hi @katyd, no need to create an issue. I'll work with you directly here and help you get this thing working.

Something I noticed right off the bat that might be the root of some of your issues... There is no need to instantiate a `SearchDriver` directly. When using `SearchProvider`, it instantiates its own `SearchDriver` internally. Sorry, I'm sure our documentation didn't make that clear, that's something we're actively working on cleaning up.

Take a look at this example, I think this will get you headed in the right direction: [https://github.com/JasonStoltz/dr-ui/pull/2/files](https://github.com/JasonStoltz/dr-ui/pull/2/files).

- handling of no results - I'm not sure exactly what the issue is, but I think for a "No Results" message, I think you want to check the following condition from state:

```auto
<SearchProvider>
 {({wasSearched, results}) => {
   if (wasSearched && results.length === 0) {
     return <ANoResultsMessage />
   } 
 }}
</SearchProvider>

```

- setting a spinning loader for when the results are loading - We actually implemented something like this on [https://www.elastic.co/](https://www.elastic.co/) using this library. I think the `isLoading` property you're using already should work correctly once you have the driver issue resolved above.

- debouncing "searchAsYouTube" 😛 - I was able to get this working locally, could you please confirm that you are using the property "debounceLength"?

```auto
    <SearchBox
       searchAsYouType={true}
       view={this.searchBox}
      debounceLength={1000}
    />

```

Try some of these things I mentioned, and then let me know if you're still have issues and I'll gladly work through them with you.

---

<div class="post-metadata">

**Author:** ![katyd](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katyd/32/43320_2.png) [@katyd](https://discuss.elastic.co/u/katyd)\
**Post date:** [April 9, 2019, 3:31pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/9 "2019-04-09T15:31:32Z")

</div>

🙏 Thank you so much for your guidance, Jason!

The documentation is great, I think I got myself mixed up because I started using /react-search-ui and then tried /search-ui and then went back to /react-search-ui - I got myself jumbled up.

I have everything smooth out now. Just one thought:

To reduce complexity, I think I'd like to use `SearchBox` and skip a custom `view`. I have it working great, but I'm trying to think of an elegant solution to remove the "Submit" button. I'll likely go with CSS to hide it, but curious if you all considered an option for SearchBox to hide the submit button since `searchAsYouType` supersedes the functionality of the submit button.

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [April 10, 2019, 12:43pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/10 "2019-04-10T12:43:41Z")

</div>

@katyd

That's a great suggestion, thank you.

Generally speaking, I am trying to take the render props approach as the solution to customization. This is kind of in line with libraries like formik and downshift. I think this description says it best: [https://github.com/downshift-js/downshift#this-solution](https://github.com/downshift-js/downshift#this-solution).

That being said, it is still fairly impractical to provide your own view to some of these components. SearchBox is a great example, as you pointed out. Providing a simple flag for hiding the button, or maybe an alternate, "buttonless", view would be good options.

I'm planning to publish a 0.6 version of this library soon, I think I may try to include that as an option. I'll enter it as a feature request so that it is tracked.

Thanks again for the input!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 8, 2019, 12:43pm UTC](https://discuss.elastic.co/t/swiftype-node-cors/175025/11 "2019-05-08T12:43:45Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
