create-instantsearch-app
Version:
⚡️ Build InstantSearch apps at the speed of thought
181 lines (131 loc) • 7.13 kB
Markdown
# Create InstantSearch App
> ⚡️ Build InstantSearch apps at the speed of thought.
[![Version][version-svg]][package-url] [![License][license-image]][license-url] [![Build Status][ci-svg]][ci-url]
`create-instantsearch-app` is a command line utility that helps you quick start your InstantSearch app using any [Algolia][algolia-website] InstantSearch flavor ([InstantSearch.js][instantsearchjs-github], [React InstantSearch][react-instantsearch-github], [Vue InstantSearch][vue-instantsearch-github], [Angular InstantSearch][angular-instantsearch-github], [InstantSearch iOS][instantsearch-ios-github] and [InstantSearch Android][instantsearch-android-github]).
<p align="center">
<img src="preview.png" width="800" alt="Preview">
</p>
<details>
<summary><strong>Contents</strong></summary>
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [Get started](#get-started)
- [Usage](#usage)
- [API](#api)
- [Tutorials](#tutorials)
- [Previews](#previews)
- [License](#license)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
</details>
## Get started
> The tool requires Node ≥ 8.
```
npx create-instantsearch-app my-app
cd my-app
npm start
```
> [`npx`](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a tool introduced in `npm@5.2.0` that makes it possible to run CLI tools hosted on the npm registry.
---
Alternatively, you can use [Yarn](https://yarnpkg.com):
```
yarn create instantsearch-app my-app
cd my-app
yarn start
```
## Usage
This package comes with the module `createInstantSearchApp(path, options?)` and the command-line tool `create-instantsearch-app`.
```
$ create-instantsearch-app --help
Usage: create-instantsearch-app <project-directory> [options]
Options:
-v, --version output the version number
--name <name> The name of the application
--app-id <appId> The application ID
--api-key <apiKey> The Algolia search API key
--index-name <indexName> The main index of your search
--attributes-to-display <attributesToDisplay> The attributes of your index to display
--attributes-for-faceting <attributesForFaceting> The attributes for faceting
--template <template> The InstantSearch template to use
--library-version <libraryVersion> The version of the library
--config <config> The configuration file to get the options from
--no-installation Ignore dependency installation
--no-interactive Do not ask any interactive questions
-h, --help output usage information
```
#### `--template`
Supported templates are:
- [`InstantSearch.js`][instantsearchjs-github]
- [`React InstantSearch`][react-instantsearch-github]
- [`React InstantSearch Native`][react-instantsearch-github]
- [`Vue InstantSearch`][vue-instantsearch-github]
- [`Angular InstantSearch`][angular-instantsearch-github]
- [`InstantSearch iOS`][instantsearch-ios-github]
- [`InstantSearch Android`][instantsearch-android-github]
```
create-instantsearch-app my-app --template "React InstantSearch"
```
You can also [create your own template](docs/custom-templates.md) and specify its path.
#### `--config`
The `config` flag is handy to automate app generations.
<h6 align="center">config.json</h6>
```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"],
"attributesForFaceting": ["brand", "location"]
}
```
Create the app based on this configuration:
```
create-instantsearch-app my-app --config config.json
```
## API
`create-instantsearch-app` is based on the module `createInstantSearchApp(path, options?)`. The same [camel cased](https://en.wikipedia.org/wiki/Camel_case) options as the CLI are available.
```javascript
const createInstantSearchApp = require('create-instantsearch-app');
const app = createInstantSearchApp('~/lab/my-app', {
template: 'InstantSearch.js',
libraryVersion: '2.0.0',
attributesToDisplay: ['name', 'description'],
attributesForFaceting: ['keywords'],
});
app.create().then(() => console.log('App generated!'));
```
## Tutorials
- [Creating a custom template](docs/custom-templates.md)
- [Deploying an InstantSearch App](docs/deploy.md)
## Previews
You can use the web templates on CodeSandbox:
- [InstantSearch.js 3](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js)
- [InstantSearch.js 2](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js-2.x)
- [React InstantSearch](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/react-instantsearch)
- [Vue InstantSearch](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch)
- [Angular InstantSearch](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/angular-instantsearch)
- [Autocomplete.js](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/autocomplete.js)
- [JavaScript Client](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/javascript-client)
- [JavaScript Helper](https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/javascript-helper)
## License
Create InstantSearch App is [MIT licensed](LICENSE).
<!-- Badges -->
[version-svg]: https://img.shields.io/npm/v/create-instantsearch-app.svg?style=flat-square
[package-url]: https://npmjs.org/package/create-instantsearch-app
[ci-svg]: https://img.shields.io/travis/algolia/create-instantsearch-app/master.svg?style=flat-square
[ci-url]: https://travis-ci.org/algolia/create-instantsearch-app
[ci-svg]: https://img.shields.io/circleci/project/github/algolia/create-instantsearch-app.svg?style=flat-square
[ci-url]: https://circleci.com/gh/algolia/create-instantsearch-app
[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
[license-url]: LICENSE
<!-- Links -->
[algolia-website]: https://www.algolia.com/?utm_medium=social-owned&utm_source=GitHub&utm_campaign=create-instantsearch-app%20repository
[instantsearchjs-github]: https://github.com/algolia/instantsearch.js
[react-instantsearch-github]: https://github.com/algolia/react-instantsearch
[vue-instantsearch-github]: https://github.com/algolia/vue-instantsearch
[angular-instantsearch-github]: https://github.com/algolia/angular-instantsearch
[instantsearch-ios-github]: https://github.com/algolia/instantsearch-ios
[instantsearch-android-github]: https://github.com/algolia/instantsearch-android