Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/algolia/instantsearch-electron
A boilerplate for building desktop React InstantSearch apps with Electron
https://github.com/algolia/instantsearch-electron
algolia electron instantsearch react
Last synced: about 2 months ago
JSON representation
A boilerplate for building desktop React InstantSearch apps with Electron
- Host: GitHub
- URL: https://github.com/algolia/instantsearch-electron
- Owner: algolia
- License: mit
- Created: 2017-01-24T07:58:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T08:10:00.000Z (almost 2 years ago)
- Last Synced: 2024-04-11T05:18:28.478Z (9 months ago)
- Topics: algolia, electron, instantsearch, react
- Language: JavaScript
- Homepage:
- Size: 3.89 MB
- Stars: 14
- Watchers: 76
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# instantsearch-electron
**A boilerplate for building desktop React InstantSearch apps with Electron**
This boilerplate includes everything you need to create an instant search experience that runs as a native desktop application. It combines the power of [React InstantSearch](https://community.algolia.com/instantsearch.js/react/) with [Electron](http://electron.atom.io/), as well as several other hand-picked technologies that make desktop app development a breeze.
*The example application, a search for quotes faceted by nationality and author*
[React InstantSearch](https://community.algolia.com/instantsearch.js/react/) is a set of components and patterns for building a powerful search experience that includes facets, filters, pagination and many other refinements. React InstantSearch is an [Algolia Community](https://community.algolia.com/) project with official support from [Algolia](https://algolia.com).
This project is based on the excellent [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) project, which includes support for hot reloading in dev all the way to releases and auto-updates. For information about how to work with this boilerplate in detail, please see the [electron-react-boilerplate README](https://github.com/chentsulin/electron-react-boilerplate). Except for some basics, the documentation in this README will be focused on the modifications to the boilerplate to add React InstantSearch functionality.
## Install
First, clone the repo via git:
```bash
git clone https://github.com/algolia/instantsearch-electron.git your-project-name
```
And then install dependencies.
**ProTip**: Install with [yarn](https://github.com/yarnpkg/yarn) for faster and safer installation
```bash
$ cd your-project-name && npm install
```
## Run
Run these two commands __simultaneously__ in different console tabs.
```bash
$ npm run hot-server
$ npm run start-hot
```
or run two servers with one command
```bash
$ npm run dev
```
## Packaging
To package apps for the local platform:
```bash
$ npm run package
```
You will find the created app in the `release` directory.
To run a non-development build of the app without packaging run:
```bash
$ npm run build
$ npm start
```
## Features
+ Window position and size are remembered between restarts.
+ The state of the search is remembered between restarts. This is done by saving the URL of the Chromium window each time a search state change is published. The goal of remembering state is to have an opening and closing experience that is seamless to the user and feels native.
+ The example app, a search for famous quotes, contains a search box, 2 refinement lists for faceting, and a custom template for rendering hits. There are many more [React InstantSearch widgets](https://community.algolia.com/instantsearch.js/react/widgets/InstantSearch.html) available.
## Customization
React InstantSearch uses an Algolia index as its data source. You will want to change some parameters in the boilerplate to point to the index you'd like to search. You will need to have created an Algolia account and the index in advance, which you can do right now via [algolia.com](https://algolia.com).
Replace these params in the `Search.js` file with your specific data.
``` js
const algoliaAppId = '';
const algoliaIndexName = '';
const algoliaAPIKey = '';
```
Then, be sure to change the properties of the `` widget and `` widget(s) to match the relevant attributes of your data model.
This is the Hit template for the example quotes app. For your app you will modify this to display the results as you like.
``` jsx
const Hit = ({ hit }) =>
""
{hit.nationality}
{hit.deathDate || hit.deathDate}
;
```
## Source Code
The primary logic for the search is in [app/components/Search.js](app/components/Search.js). The render method looks like this:
``` jsx
render() {
return (
-
-
-
Powered by Algolia
);
}
```
The primary CSS file is at [app/app.global.css](app/app.global.css).
## Photon Kit
This boilerplate includes styles and icon fonts from the excellent [Photon](http://photonkit.com/) project. Photon's HTML and CSS helps make your Electron app look and feel native. You can find the Photon components in the [app/assets/photon](app/assets/photon) folder of the boilerplate.
## Contributing