For context, I'm running this react app code on th...
# community-help
l
For context, I'm running this react app code on the server, and trying to access the server via its public ip address and port:
Copy code
import React from 'react';
import {
  Configure,
  DynamicWidgets,
  RefinementList,
  Highlight,
  Hits,
  InstantSearch,
  Pagination,
  SearchBox,
} from 'react-instantsearch';
import process from 'process';

import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";

import { Panel } from './Panel';

import type { Hit } from 'instantsearch.js';

import './App.css';

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    apiKey: process.env.REACT_APP_TYPESENSE_API_KEY,
    nodes: [
      {
        host: "localhost",
        port: 8108,
        protocol: "http"
      }
    ]
  },
  additionalSearchParameters: {
    query_by: "game,review"
  }
});
const searchClient = typesenseInstantsearchAdapter.searchClient;

const future = { preserveSharedStateOnUnmount: true };

export function App() {
  return (
    <div>
      <header className="header">
        <h1 className="header-title">
          <a href="/">steam-reviews-search</a>
        </h1>
        <p className="header-subtitle">
          using React InstantSearch
        </p>
      </header>

      <div className="container">
        <InstantSearch
          searchClient={searchClient}
          indexName="reviews"
          future={future}
        >
          <Configure hitsPerPage={8} />
          <div className="search-panel">
            {/* <div className="search-panel__filters">
              <DynamicWidgets fallback={RefinementList}></DynamicWidgets>
            </div> */}

            <div className="search-panel__results">
              <SearchBox placeholder="" className="searchbox" />
              <Hits hitComponent={Hit} />

              <div className="pagination">
                <Pagination />
              </div>
            </div>
          </div>
        </InstantSearch>
      </div>
    </div>
  );
}

type HitProps = {
  hit: Hit;
};

function Hit({ hit }: HitProps) {
  return (
    <article>
      <h1>
        <Highlight attribute="game" hit={hit} />
      </h1>
      <p>
        <Highlight attribute="review" hit={hit} />
      </p>
    </article>
  );
}