### Install Dependencies and Start Example Source: https://github.com/algolia/instantsearch/blob/master/examples/react/next/README.md Install project dependencies using yarn and start the Next.js development server to run the InstantSearch.js example. ```sh yarn install --no-lockfile ``` ```sh yarn run dev ``` -------------------------------- ### Start Example Server Source: https://github.com/algolia/instantsearch/blob/master/CONTRIBUTING.md Starts the development server for a specific example. Navigate to the example's directory and run this command. Access the application via the URL provided in the terminal. ```sh yarn --cwd examples/js/getting-started start ``` -------------------------------- ### Install and Start React Native Example Source: https://github.com/algolia/instantsearch/blob/master/examples/react/react-native/README.md Install dependencies and run the React Native InstantSearch example using yarn. ```sh yarn install --no-lockfile yarn run start ``` -------------------------------- ### Install Dependencies and Start React InstantSearch SSR Example Source: https://github.com/algolia/instantsearch/blob/master/examples/react/ssr/README.md Install project dependencies without a lockfile and start the server-side rendering example for React InstantSearch. ```sh yarn install --no-lockfile yarn start ``` -------------------------------- ### Build and Run E-commerce Example Source: https://github.com/algolia/instantsearch/blob/master/examples/js/e-commerce/README.md This command sequence installs dependencies, builds the library, and then starts the e-commerce example. It assumes a UNIX-like system and requires building the library first. ```sh yarn install && yarn build && (cd examples/e-commerce/ && yarn start) ``` -------------------------------- ### Install Dependencies and Start Server with npm Source: https://github.com/algolia/instantsearch/blob/master/examples/js/getting-started/README.md Use these commands to install project dependencies and start the local development server using npm. ```sh npm install npm start ``` -------------------------------- ### Install Dependencies and Start Server with Yarn Source: https://github.com/algolia/instantsearch/blob/master/examples/js/getting-started/README.md Use these commands to install project dependencies and start the local development server using Yarn. ```sh yarn yarn start ``` -------------------------------- ### Get Started with InstantSearch.js Source: https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/README.md Instantiate InstantSearch.js, add widgets for search box, results, and refinement, then start the search. Requires Algolia credentials and index name. ```javascript const search = instantsearch({ indexName: 'instant_search', searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'), }); search.addWidgets([ // 2. Create an interactive search box instantsearch.widgets.searchBox({ container: '#searchbox', placeholder: 'Search for products', }), // 3. Plug the search results into the product container instantsearch.widgets.hits({ container: '#products', templates: { item: (hit, { html, components }) => html`

${components.Highlight({ attribute: 'name', hit })}

${components.Snippet({ attribute: 'description', hit })}

`, }, }), // 4. Make the brands refinable instantsearch.widgets.refinementList({ container: '#brand', attribute: 'brand', }), ]); // 5. Start the search! search.start(); ``` -------------------------------- ### Installation Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/src/templates/InstantSearch.js widget/README.md Instructions on how to install InstantSearch.js using npm or yarn. ```APIDOC ## Install ```bash npm install {{ packageName }} # or yarn add {{ packageName }} ``` ``` -------------------------------- ### Clone the Next.js Example Source: https://github.com/algolia/instantsearch/blob/master/examples/react/next/README.md Clone the example repository to get started with server-side rendering for InstantSearch.js in a Next.js application. ```sh curl https://codeload.github.com/algolia/instantsearch/tar.gz/master | tar -xz --strip=3 instantsearch-master/examples/react/next ``` -------------------------------- ### Nuxt.js Build Setup Commands Source: https://github.com/algolia/instantsearch/blob/master/examples/vue/nuxt/README.md Use these commands to install dependencies, run the development server with hot reloading, build for production, and generate a static project. ```bash # install dependencies $ yarn install ``` ```bash # serve with hot reload at localhost:3000 $ yarn run dev ``` ```bash # build for production and launch server $ yarn run build $ yarn start ``` ```bash # generate static project $ yarn run generate ``` -------------------------------- ### Clone Example Project Source: https://github.com/algolia/instantsearch/blob/master/examples/react/next-app-router/README.md Use this command to clone the example project for server-side rendering with Next.js and InstantSearchNext. ```sh curl https://codeload.github.com/algolia/instantsearch/tar.gz/master | tar -xz --strip=3 instantsearch-master/examples/react/next-app-router ``` -------------------------------- ### Install react-instantsearch-router-nextjs Source: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-router-nextjs/README.md Install the package using yarn or npm. ```sh yarn add react-instantsearch-router-nextjs # or with npm npm install react-instantsearch-router-nextjs ``` -------------------------------- ### Install react-instantsearch-nextjs Source: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-nextjs/README.md Install the package using yarn or npm. ```sh yarn add react-instantsearch-nextjs # or with npm npm install react-instantsearch-nextjs ``` -------------------------------- ### Clone Next.js InstantSearch Example Source: https://github.com/algolia/instantsearch/blob/master/examples/react/next-routing/README.md Clone the example repository to your local machine. This command downloads the master tarball and extracts the Next.js routing example. ```sh curl https://codeload.github.com/algolia/instantsearch/tar.gz/master | tar -xz --strip=3 instantsearch-master/examples/react/next-routing ``` -------------------------------- ### Install InstantSearch.js with npm or yarn Source: https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/README.md Install the InstantSearch.js library and the algoliasearch client using npm or yarn. ```sh npm install instantsearch.js algoliasearch # or yarn add instantsearch.js algoliasearch ``` -------------------------------- ### Build Library and Start Demo (Yarn) Source: https://github.com/algolia/instantsearch/blob/master/examples/js/e-commerce-umd/README.md This command sequence builds the InstantSearch.js library and then starts the demo. It's an alternative to manually linking the library. ```sh yarn install && yarn build && (cd examples/js/e-commerce-umd/ && yarn start) ``` -------------------------------- ### Install React InstantSearch Source: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch/README.md Install React InstantSearch and its dependency algoliasearch using yarn or npm. ```sh yarn add algoliasearch react-instantsearch # or npm install algoliasearch react-instantsearch ``` -------------------------------- ### Start Development Server Source: https://github.com/algolia/instantsearch/blob/master/examples/vue/ssr/README.md Use this command to compile and hot-reload the application for development. ```bash yarn run serve ``` -------------------------------- ### Clone React Native InstantSearch Example Source: https://github.com/algolia/instantsearch/blob/master/examples/react/react-native/README.md Use this command to download the example project for React InstantSearch with React Native. ```sh curl https://codeload.github.com/algolia/instantsearch/tar.gz/master | tar -xz --strip=3 instantsearch-master/examples/react/react-native ``` -------------------------------- ### Install InstantSearch.css Source: https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.css/README.md Install the instantsearch.css package using npm or yarn. This command adds the library to your project's dependencies. ```sh npm install instantsearch.css # or yarn add instantsearch.css ``` -------------------------------- ### Basic React InstantSearch Setup Source: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch/README.md Set up a basic React InstantSearch application by importing necessary components and initializing the search client. ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import { liteClient as algoliasearch } from 'algoliasearch/lite'; import { InstantSearch, SearchBox, Hits } from 'react-instantsearch'; const searchClient = algoliasearch( 'latency', '6be0576ff61c053d5f9a3225e2a90f76' ); const App = () => ( ); ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/algolia/instantsearch/blob/master/examples/vue/default-theme/README.md Installs all necessary dependencies for the project using Yarn. ```bash yarn install ``` -------------------------------- ### Clone the React InstantSearch SSR Example Source: https://github.com/algolia/instantsearch/blob/master/examples/react/ssr/README.md Use this command to clone the server-side rendering example for React InstantSearch from GitHub. ```sh curl https://codeload.github.com/algolia/instantsearch/tar.gz/master | tar -xz --strip=3 instantsearch-master/examples/react/ssr ``` -------------------------------- ### Install Vue InstantSearch with npm Source: https://github.com/algolia/instantsearch/blob/master/packages/vue-instantsearch/README.md Use this command to add Vue InstantSearch to your project using npm. Ensure you have npm installed. ```bash npm install --save vue-instantsearch ``` -------------------------------- ### Widget Usage Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/src/templates/InstantSearch.js widget/README.md Example of how to use a pre-built widget with InstantSearch.js. ```APIDOC ## Widget ### Usage ```js import instantsearch from 'instantsearch.js'; import algoliasearch from 'algoliasearch/lite'; import { {{ camelCaseName }} } from '{{ packageName }}'; const searchClient = algoliasearch('appId', 'apiKey'); const search = instantsearch({ indexName: 'indexName', searchClient, }); search.addWidgets([ {{ camelCaseName }}({ // widget parameters }), ]); search.start(); ``` ### Options | Option | Type | Required | Default | Description | | :-- | :-- | :-- | :-- | --- | | [`container`](#container) | `string` or `HTMLElement` | true | - | The element to insert the widget into. | | [`option1`](#option1) | `...` | true | - | REPLACE WITH THE DESCRIPTION FOR THIS OPTION | #### container > `string | Element` | **required** The element to insert the widget into. This can be either a valid CSS Selector: ```js {{ camelCaseName }}( container: '#{{ name }}', // ... ); ``` or an `HTMLElement`: ```js {{ camelCaseName }}( container: document.querySelector('#{{ name }}'), // ... ); ``` #### option1 > `...` | **required** REPLACE WITH THE DESCRIPTION FOR THIS OPTION ```js {{ camelCaseName }}( option1: 'value', // ... ); ``` ``` -------------------------------- ### Install React InstantSearch Core Source: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-core/README.md Install the necessary packages for React InstantSearch Core using either yarn or npm. This includes `algoliasearch` for API communication. ```sh yarn add algoliasearch react-instantsearch-core # or npm install algoliasearch react-instantsearch-core ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.css/README.md After cloning the repository, install the project's dependencies using yarn. This step is necessary for development and contributing. ```sh yarn ``` -------------------------------- ### Install Vue InstantSearch with yarn Source: https://github.com/algolia/instantsearch/blob/master/packages/vue-instantsearch/README.md Use this command to add Vue InstantSearch to your project using yarn. Ensure you have yarn installed. ```bash yarn add vue-instantsearch ``` -------------------------------- ### Example Configuration Object Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/docs/custom-templates.md This object represents the configuration passed to the template tasks, containing details about the application being created. ```javascript { name: 'app-name', path: '/dev/app-name', template: 'InstantSearch.js', libraryVersion: '2.9.0', appId: 'APP_ID', apiKey: 'API_KEY', indexName: 'INDEX_NAME', attributesToDisplay: ['title', 'description'], installation: true, silent: false, } ``` -------------------------------- ### Install Algolia Libraries with npm or Yarn Source: https://github.com/algolia/instantsearch/blob/master/packages/algoliasearch-helper/documentation-src/content/gettingstarted.md Install the necessary Algolia libraries for your project using npm or Yarn. ```bash npm install --save algoliasearch algoliasearch-helper ``` ```bash yarn add algoliasearch algoliasearch-helper ``` -------------------------------- ### Create InstantSearch App with npx Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/README.md Use `npx` to quickly scaffold a new InstantSearch project. This command downloads and runs the `create-instantsearch-app` package without requiring a global installation. ```bash npx create-instantsearch-app my-app cd my-app npm start ``` -------------------------------- ### Deploy to Surge Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/docs/deploy.md Deploy your InstantSearch app using Surge. This command assumes you have Surge installed and are in the app's directory. ```bash npx surge ``` -------------------------------- ### Run Development Server Source: https://github.com/algolia/instantsearch/blob/master/examples/vue/default-theme/README.md Compiles the project and starts a hot-reloading development server. Useful for active development and testing. ```bash yarn run dev ``` -------------------------------- ### Create InstantSearch App with Config File Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/README.md Generate an InstantSearch app using a predefined configuration file. This is useful for scripting or ensuring consistent project setups. ```bash create-instantsearch-app my-app --config config.json ``` -------------------------------- ### Launch Storybook Source: https://github.com/algolia/instantsearch/blob/master/CONTRIBUTING.md Installs project dependencies and launches Storybook for widget development. Access the widget playground at http://localhost:6006. ```sh yarn cd packages/instantsearch.js yarn storybook ``` -------------------------------- ### Connector Usage Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/src/templates/InstantSearch.js widget/README.md Example of how to create a custom widget using connectors in InstantSearch.js. ```APIDOC ## Connector ### Usage ```js import { connect{{ pascalCaseName }} } from '{{ packageName }}'; // 1. Create a render function const render{{ pascalCaseName }} = (renderOptions, isFirstRender) => { // Rendering logic }; // 2. Create the custom widget const custom{{ pascalCaseName }} = connect{{ pascalCaseName }}( render{{ pascalCaseName }} ); // 3. Instantiate search.addWidgets([ custom{{ pascalCaseName }}({ // instance params }), ]); ``` ### Options #### option1 > `...` REPLACE WITH THE DESCRIPTION FOR THIS RENDERING ITEM ```js const render{{ pascalCaseName }} = (renderOptions, isFirstRender) => { // show how to use this render option }; const custom{{ pascalCaseName }} = connect{{ pascalCaseName }}( render{{ pascalCaseName }} ); search.addWidgets([ custom{{ pascalCaseName }}({ // ... }), ]); ``` #### widgetParams > `object` All original widget options forwarded to the render function. ```js const render{{ pascalCaseName }} = (renderOptions, isFirstRender) => { const { widgetParams } = renderOptions; widgetParams.container.innerHTML = '...'; }; const custom{{ pascalCaseName }} = connect{{ pascalCaseName }}( render{{ pascalCaseName }} ); search.addWidgets([ custom{{ pascalCaseName }}( container: document.querySelector('#{{ name }}'), // ... ), ]); ``` ``` -------------------------------- ### Install {{ packageName }} with npm or yarn Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/src/templates/InstantSearch.js widget/README.md Use npm or yarn to add the {{ packageName }} library to your project dependencies. ```bash npm install {{ packageName }} # or yarn add {{ packageName }} ``` -------------------------------- ### Run Tests with npm or yarn Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/src/templates/InstantSearch.js widget/CONTRIBUTING.md Execute the test suite using either npm or yarn. Ensure you have the project dependencies installed. ```bash npm test ``` ```bash yarn test ``` -------------------------------- ### Import Local WebdriverIO Configuration Source: https://github.com/algolia/instantsearch/blob/master/tests/e2e/README.md Import the local WebdriverIO configuration to run tests on your machine. Ensure you have the 'instantsearch-e2e-tests' package installed. ```javascript const { local } = require('instantsearch-e2e-tests'); exports.config = local; ``` -------------------------------- ### Configure Router for SSR with Next.js Source: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-router-nextjs/README.md Configure the InstantSearch router with the Next.js router singleton and server URL for SSR. This setup is used with `getServerState` and `InstantSearchSSRProvider`. ```javascript import singletonRouter from 'next/router'; import { createInstantSearchRouterNext } from 'react-instantsearch-router-nextjs'; export default function Page({ serverState, url }) { return ( {/* ... */} ); } ``` -------------------------------- ### Perform Search with Algolia Helper Source: https://github.com/algolia/instantsearch/blob/master/packages/algoliasearch-helper/README.md Trigger a search using the helper. This example demonstrates setting a query, adding a tag, and monitoring results. ```javascript var helper = algoliasearchHelper(client, indexName); // Let's monitor the results with the console helper.on('result', function (event) { console.log(event.results); }); // Let's make an empty search // The results are all sorted using the dashboard configuration helper.search(); // Let's search for "landscape" helper.setQuery('landscape').search(); // Let's add a category "photo" // Will make a search with "photo" tag and "landscape" as the query helper.addTag('photo').search(); ``` -------------------------------- ### Include Reset or Satellite Theme Source: https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.css/README.md Import the reset styles or the full Satellite theme into your project. Ensure you have the instantsearch.css package installed. ```javascript import 'instantsearch.css/themes/reset.css'; // Or include the full Satellite theme import 'instantsearch.css/themes/satellite.css'; ``` -------------------------------- ### Initialize Helper with Query Parameters Source: https://github.com/algolia/instantsearch/blob/master/packages/algoliasearch-helper/README.md Set initial query parameters, such as `hitsPerPage`, when creating the `algoliasearchHelper` instance. This configures the helper with default search settings from the start. ```javascript var helper = algoliasearchHelper(client, indexName, { hitsPerPage: 50, }); ``` -------------------------------- ### Custom Widget Render Function Example Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/src/templates/InstantSearch.js widget/README.md Implement the render function for a custom widget, demonstrating how to access render options and update the DOM. ```javascript const render{{ pascalCaseName }} = (renderOptions, isFirstRender) => { // show how to use this render option }; const custom{{ pascalCaseName }} = connect{{ pascalCaseName }}( render{{ pascalCaseName }} ); search.addWidgets([ custom{{pascalCaseName }}({ // ... }), ]); ``` -------------------------------- ### Define Custom Template Configuration Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/docs/custom-templates.md This JavaScript file configures the template for createInstantSearchApp, defining library name and lifecycle tasks like installation and teardown. ```javascript const { execSync } = require('child_process'); module.exports = { libraryName: 'react-instantsearch', tasks: { install(config) { execSync(`cd ${config.path} && npm install`); }, teardown(config) { console.log('Begin by running: npm start'); }, }, }; ``` -------------------------------- ### Client Component Setup for React InstantSearch Source: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-nextjs/README.md Include the 'use client' directive at the top of your search component file. This component requires the algoliasearch library and React InstantSearch components. ```jsx 'use client'; import { liteClient as algoliasearch } from 'algoliasearch/lite'; import { InstantSearch, SearchBox, } from 'react-instantsearch'; const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey'); export function Search() { return ( {/* other widgets */} ); } ``` -------------------------------- ### Specify React InstantSearch Template Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/README.md Use the `--template` flag to specify which InstantSearch flavor to use for your project. This example demonstrates creating an app with React InstantSearch. ```bash create-instantsearch-app my-app --template "React InstantSearch" ``` -------------------------------- ### Configuration JSON for App Generation Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/README.md Define app generation options in a JSON file for automated setup. This file can specify template, library version, Algolia credentials, and display attributes. ```json { "name": "my-app", "template": "InstantSearch.js", "libraryVersion": "2.8.0", "appId": "MY_APP_ID", "apiKey": "MY_API_KEY", "indexName": "MY_INDEX_NAME", "searchPlaceholder": "Search", "attributesToDisplay": ["name", "description"], "imageAttribute": "image", "attributesForFaceting": ["brand", "location"], "enableInsights": true } ``` -------------------------------- ### Import Sauce Labs WebdriverIO Configuration Source: https://github.com/algolia/instantsearch/blob/master/tests/e2e/README.md Import the Sauce Labs WebdriverIO configuration to run tests on the Sauce Labs service. Ensure you have the 'instantsearch-e2e-tests' package installed. ```javascript const { saucelabs } = require('instantsearch-e2e-tests'); exports.config = saucelabs; ``` -------------------------------- ### Initialize Helper with Root Path for Hierarchical Facets Source: https://github.com/algolia/instantsearch/blob/master/packages/algoliasearch-helper/documentation-src/content/reference.md Configure hierarchical facets to start from a specific 'rootPath'. This restricts the displayed hierarchical values and automatically refines the search results. ```javascript var helper = algoliasearchHelper(client, indexName, { hierarchicalFacets: [{ name: 'products', attributes: ['categories.lvl0', 'categories.lvl1', 'categories.lvl2', 'categories.lvl3'], rootPath: 'fruits > yellow > citrus' }] }); ``` -------------------------------- ### create-instantsearch-app CLI Help Source: https://github.com/algolia/instantsearch/blob/master/packages/create-instantsearch-app/README.md View available options for the `create-instantsearch-app` command-line interface. This helps in understanding how to customize app generation, such as specifying application IDs, API keys, and index names. ```bash $ create-instantsearch-app --help Usage: create-instantsearch-app [options] Options: -v, --version output the version number --name The name of the application --app-id The application ID --api-key The Algolia search API key --index-name The main index of your search --attributes-to-display The attributes of your index to display --image-attribute The attribute of your index to use for image display --attributes-for-faceting The attributes for faceting --template