The create-instantsearch-app from algolia

Create a FAQ / cookbook for going beyond CISA core

The problem

We want to provide guidance for some use cases without embedding them inside the CLI.

Solution

Following up on #2, let's add a part in the readme with:

deploy CISA generated app (surge, netlify, codesandbox)
create your own template (build entries, templates, .template.js)

Update documentation on templates

In README.md - Templates:

All your template files that need to be injected values should have the .hbs extension (read more on Handlebars).

This is not true with the build task which renames non-Handlebars files to .hbs. We should update this sentence to something like:

The template files support the Handlebars syntax to inject values passed to create-instantsearch-app.

Proposal: add linting and prettier configurations

What do you think about adding by default the right linting and prettier configurations form https://github.com/algolia/eslint-config-algolia/?

Ability to generate any *-instantsearch project in different setup

It'd be nice to support:

Provide multiple fields for the main attribute?

The problem

Now we can provide one field. What about we could select more than one?

Solution

Provide a multi select in the CLI

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

angular template doesn't import css correctly

Bug description

instantsearch.css isn't listed as a dependency
import in styles.css doesn't seem to work
styles.css isn't imported

How to reproduce

http://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/angular-instantsearch

Expected behavior

InstantSearch.css is implemented

Screenshots

Environment

OS: codesandbox
Create InstantSearch App version:

npx create-instantsearch-app not working

Hi folks! 👋

I ran this npx command found at https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/?language=js#bootstrap-your-application, but it didn't seem to work. Can't tell if that last message is an error, but I don't see a new directory where I ran the command:

$ npx create-instantsearch-app ais-ecommerce-demo-app \
  --template "InstantSearch.js" \
  --app-id B1G2GM9NG0 \
  --api-key aadef574be1f9252bb48d4ea09b5cfe5 \
  --index-name demo_ecommerce \
  --attributes-to-display name

npx: installed 148 in 4.223s

Creating a new InstantSearch app in ais-ecommerce-demo-app.

The template directory must contain a configuration file `.template.js` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, JavaScript Client, JavaScript Helper, React InstantSearch, React InstantSearch Native, Vue InstantSearch

change "main searchable attribute" to "main attribute"

Clearer IMO

The problem

Since we don't lock dependencies our templates can stop working without us knowing.
I think the build is currently broken (I tried retriggring one on master branch and it failed)

Solution

Schedule a daily build that runs the e2e tests

Implementation

Travis cron job should be enough
https://docs.travis-ci.com/user/cron-jobs/

Add an option to deploy to jsFiddle or codeSandbox

[PROPOSAL] Alias to cisa?

As for command line, should we alias create-instantsearch-app to cisa? So that I don't have to type this much :D.

(Actually this is only relevant when used as a globally installed binary, might no be that relevant when used with npm init)

Renovate upgrades fail with template snapshot tests

Renovate doesn't go along nicely with the snapshot testing system because it makes the CI fail for each template dependency update.

See #106 (view build)

A solution would be to ignore all raw dependencies (the ones that don't get injected during the template build task) in snapshots.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

circleci

.circleci/config.yml

cimg/node 16.15

cimg/node 14.19

cimg/node 16.15

github-actions

.github/workflows/release.yml

actions/checkout v3

actions/setup-node v2

npm

package.json

@algolia/cache-in-memory 4

algoliasearch 4

chalk 3.0.0

commander 4.1.1

inquirer 8.0.0

jstransformer-handlebars 1.1.0

latest-semver 2.0.0

load-json-file 6.2.0

lodash.camelcase 4.3.0

metalsmith 2.3.0

metalsmith-ignore 1.0.0

metalsmith-in-place 4.4.1

metalsmith-rename 1.0.0

prettier 1.19.1

semver 6.1.1

validate-npm-package-name 3.0.0

babel-eslint 10.0.3

conventional-changelog-cli 2.0.31

doctoc 1.4.0

eslint 6.7.2

eslint-config-algolia 15.0.0

eslint-config-prettier 6.7.0

eslint-plugin-eslint-comments 3.1.2

eslint-plugin-html 6.0.0

eslint-plugin-import 2.19.1

eslint-plugin-jest 23.1.1

eslint-plugin-prettier 3.1.2

jest 25.1.0

jest-image-snapshot 2.12.0

shipjs 0.24.4

walk-sync 2.0.2

node >= 10

src/templates/Angular InstantSearch/package.json

@angular/animations 12.2.16

@angular/common 12.2.16

@angular/compiler 12.2.16

@angular/core 12.2.16

@angular/forms 12.2.16

@angular/platform-browser 12.2.16

@angular/platform-browser-dynamic 12.2.16

@angular/router 12.2.16

algoliasearch 4

rxjs 6.6.0

tslib 2.3.0

zone.js 0.11.4

@angular-devkit/build-angular 12.2.16

@angular/cli 12.2.16

@angular/compiler-cli 12.2.16

@types/jasmine 3.8.0

@types/node 12.11.1

jasmine-core 3.8.0

karma 6.3.0

karma-chrome-launcher 3.1.0

karma-coverage 2.0.3

karma-jasmine 4.0.0

karma-jasmine-html-reporter 1.7.0

typescript 4.3.5

src/templates/Autocomplete.js 0/package.json

algoliasearch 3.35.1

babel-eslint 10.0.2

eslint 6.8.0

eslint-config-algolia 15.0.0

eslint-config-prettier 6.10.0

eslint-plugin-import 2.20.1

eslint-plugin-prettier 3.1.2

eslint-plugin-eslint-comments 3.1.2

parcel-bundler 1.12.5

prettier 1.19.1

src/templates/Autocomplete/package.json

algoliasearch 4

preact 10.5.14

babel-eslint 10.1.0

eslint 7.32.0

eslint-config-algolia 19.0.2

eslint-config-prettier 8.3.0

eslint-plugin-eslint-comments 3.2.0

eslint-plugin-import 2.24.2

eslint-plugin-jsdoc 36.1.0

eslint-plugin-jsx-a11y 6.4.1

eslint-plugin-prettier 4.0.0

eslint-plugin-react 7.26.0

eslint-plugin-react-hooks 4.2.0

parcel 2.0.0-beta.2

prettier 1.19.1

src/templates/InstantSearch.js 2/package.json

babel-eslint 10.0.2

eslint 5.7.0

eslint-config-algolia 13.2.3

eslint-config-prettier 3.6.0

eslint-plugin-import 2.19.1

eslint-plugin-prettier 3.1.2

parcel-bundler 1.12.5

prettier 1.19.1

src/templates/InstantSearch.js/package.json

algoliasearch 4

eslint 8.15.0

parcel 2.0.1

prettier 2.6.2

src/templates/JavaScript Client/package.json

babel-eslint 10.0.2

eslint 5.7.0

eslint-config-algolia 13.2.3

eslint-config-prettier 3.6.0

eslint-plugin-import 2.19.1

eslint-plugin-prettier 3.1.2

parcel-bundler 1.12.5

prettier 1.19.1

src/templates/JavaScript Helper 2/package.json

algoliasearch 4

babel-eslint 10.0.3

eslint 5.7.0

eslint-config-algolia 13.2.3

eslint-config-prettier 3.6.0

eslint-plugin-import 2.19.1

eslint-plugin-prettier 3.1.2

parcel-bundler 1.12.5

prettier 1.19.1

src/templates/JavaScript Helper/package.json

algoliasearch 3.30.0

babel-eslint 10.0.3

eslint 5.7.0

eslint-config-algolia 13.2.3

eslint-config-prettier 3.6.0

eslint-plugin-import 2.19.1

eslint-plugin-prettier 3.1.2

parcel-bundler 1.12.5

prettier 1.19.1

src/templates/React InstantSearch Hooks Native/package.json

algoliasearch 4.12.1

expo ~44.0.0

expo-status-bar ~1.2.0

instantsearch.js 4.38.1

react 17.0.1

react-dom 17.0.1

react-native 0.64.3

react-native-web 0.17.1

@babel/core ^7.12.9

@types/react ~17.0.21

@types/react-native ~0.64.12

expo-cli 5.5.1

typescript ~4.3.5

src/templates/React InstantSearch Hooks/package.json

algoliasearch 4

instantsearch.js 4.43.1

react 18.1.0

react-dom 18.1.0

@types/react 18.0.15

@types/react-dom 18.0.6

parcel 2.5.0

typescript 4.7.4

src/templates/React InstantSearch Native/package.json

algoliasearch 4

expo 44.0.3

prop-types 15.8.0

react 17.0.2

react-native 0.64.3

@babel/core 7.16.5

babel-preset-expo 9.0.2

eslint 8.5.0

eslint-config-algolia 20.0.0

eslint-config-prettier 8.3.0

eslint-plugin-import 2.25.3

eslint-plugin-prettier 4.0.0

eslint-plugin-react 7.28.0

expo-cli 5.0.3

prettier 2.5.1

src/templates/React InstantSearch/package.json

algoliasearch 4

react 18.1.0

react-dom 18.1.0

react-scripts 2.1.1

eslint 5.6.0

eslint-config-algolia 13.2.3

eslint-config-prettier 3.6.0

eslint-plugin-import 2.19.1

eslint-plugin-prettier 3.1.2

eslint-plugin-react 7.17.0

prettier 1.19.1

prop-types 15.7.2

src/templates/Vue InstantSearch 1/package.json

core-js 2.6.9

vue 2.6.10

@vue/cli-plugin-babel 3.6.0

@vue/cli-plugin-eslint 3.6.0

@vue/cli-service 3.6.0

babel-eslint 10.0.2

eslint 5.7.0

eslint-config-algolia 13.2.3

eslint-config-prettier 4.1.0

eslint-plugin-import 2.19.1

eslint-plugin-prettier 3.1.2

eslint-plugin-vue 5.2.2

prettier 1.19.1

vue-template-compiler 2.6.10

src/templates/Vue InstantSearch 2/package.json

algoliasearch 4

core-js 3.6.5

vue 2.6.11

@babel/eslint-parser 7.17.0

@vue/cli-plugin-babel 4.5.15

@vue/cli-plugin-eslint 4.5.15

@vue/cli-service 4.5.15

@vue/eslint-config-prettier 6.0.0

babel-eslint 10.1.0

eslint 6.7.2

eslint-config-algolia 20.0.0

eslint-plugin-import 2.25.4

eslint-plugin-prettier 3.3.1

eslint-plugin-vue 6.2.2

prettier 2.2.1

vue-template-compiler 2.6.11

src/templates/Vue InstantSearch with Vue 3/package.json

algoliasearch 4.12.1

vue 3.2.25

@vitejs/plugin-vue 2.2.0

@vitejs/plugin-vue-jsx 1.3.7

vite 2.8.0

src/templates/Vue InstantSearch/package.json

algoliasearch 4

core-js 3.6.5

vue 2.6.11

@babel/eslint-parser 7.17.0

@vue/cli-plugin-babel 4.5.15

@vue/cli-plugin-eslint 4.5.15

@vue/cli-service 4.5.15

@vue/eslint-config-prettier 6.0.0

babel-eslint 10.1.0

eslint 6.7.2

eslint-config-algolia 20.0.0

eslint-plugin-import 2.25.4

eslint-plugin-prettier 3.3.1

eslint-plugin-vue 6.2.2

prettier 2.2.1

vue-template-compiler 2.6.11

nvm

.nvmrc

node 14.15.0

Check this box to trigger a request for Renovate to run again on this repository

Generated [email protected] referencing non existing CSS files

Bug description

Generated [email protected] referencing non existing CSS files:

https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css

https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css

How to reproduce

A list of the steps to reproduce the bug.

Run command:

create-instantsearch-app my-app

Select

? InstantSearch template InstantSearch.js
? InstantSearch.js version 3.5.3
? Application ID latency
? Search API key 6be0576ff61c053d5f9a3225e2a90f76
? Index name instant_search
? Attributes to display: name
  Used to generate the default result template

See error
build and run generated app.

Expected behavior

No reference to missing file. Probably a reference to instantsearch.css instead.

Screenshots

N/A

Environment

OS: MacOS / High Sierra
Create InstantSearch App version: 4.1.0

Config file not correctly read

Hello,

I pulled master and ran yarn create instantsearch-app my-app --config config.json, with config.json being:

{
  "name": "TalkSearch",
  "template": "InstantSearch.js",
  "libraryVersion": "2.8.0",
  "appId": "8J7GPSC0XN",
  "apiKey": "28a29bbca9c6d43514d6654de6a8471c",
  "indexName": "dotconferences",
  "searchPlaceholder": "Search for topic, speaker or any sentence",
  "mainAttribute": "video.title",
  "attributesForFaceting": ["conference.year", "speaker.name"]
}

But, the prompt is still asking me all the questions (appID, indexName, etc) and is taking those into account. It seems like the config file is not read.

Create app fails for InstantSearch.js

Bug description

Tried creating a new application using npx create-instantsearch-app 'test'

How to reproduce

Try running npx create-instantsearch-app 'test'

Make the following selections:

Use InstantSearch.js template
Choose latest version (4.40.5)
use the defaults for Application ID, Search API key, and Index name
Choose an attribute to display

Expected behavior

Expect the creation to work with no errors.

Output in terminal

benlower@USA-M1P-BL algolia-org-chart-app % npx create-instantsearch-app 'test'
Need to install the following packages:
create-instantsearch-app
Ok to proceed? (y) y
? The name of the application or widget test

Creating a new InstantSearch app in test.

? InstantSearch template InstantSearch.js
? InstantSearch.js version 4.40.5
? Application ID latency
? Search API key 6be0576ff61c053d5f9a3225e2a90f76
? Index name instant_search
? Attributes to display
Used to generate the default result template
? Attributes to display
Used to filter the search interface Dynamic widgets

📦 Installing dependencies...

npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see request/request#3142
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /Users/benlower/Dropbox/Mac/Documents/GitHub/algolia-org-chart-app/test/node_modules/deasync
npm ERR! command failed
npm ERR! command sh -c node ./build.js
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.9 found at "/opt/homebrew/opt/[email protected]/bin/python3.9"
npm ERR! gyp info spawn /opt/homebrew/opt/[email protected]/bin/python3.9
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/benlower/Dropbox/Mac/Documents/GitHub/algolia-org-chart-app/test/node_modules/deasync/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/benlower/Library/Caches/node-gyp/16.13.1/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/benlower/Library/Caches/node-gyp/16.13.1',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/benlower/Library/Caches/node-gyp/16.13.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/benlower/Dropbox/Mac/Documents/GitHub/algolia-org-chart-app/test/node_modules/deasync',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: make failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 21.4.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd /Users/benlower/Dropbox/Mac/Documents/GitHub/algolia-org-chart-app/test/node_modules/deasync
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v8.4.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/benlower/.npm/_logs/2022-05-14T20_46_53_124Z-debug.log

📦 Dependencies could not be installed.
Error: Command failed: npm install
at checkExecSyncError (node:child_process:826:11)
at execSync (node:child_process:900:15)
at install (/Users/benlower/.npm/_npx/9be8ac332fc6b44b/node_modules/create-instantsearch-app/src/tasks/node/install.js:18:5)
at Object.create (/Users/benlower/.npm/_npx/9be8ac332fc6b44b/node_modules/create-instantsearch-app/src/api/index.js:44:17)
at async run (/Users/benlower/.npm/_npx/9be8ac332fc6b44b/node_modules/create-instantsearch-app/src/cli/index.js:365:3) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 89979,
stdout: null,
stderr: null
}

Try to create the app without installing the dependencies:
create-instantsearch-app test --no-installation

🛑 Aborting the app generation.

✨ Cleaning up /Users/benlower/Dropbox/Mac/Documents/GitHub/algolia-org-chart-app/test.

Environment

OS: macOS Monterey 12.3.1
Create InstantSearch App version: ran from npx on May 14, 2022

The InstantSearch template does not work with the latest release

The InstantSearch.js template does not work with the latest release of InstantSearch.js (v3). The template is built for the v2 not the v3. We have to update the template to make it work for the latest release of InstantSearch.js.

InstantSearch.js CodeSandbox is not using latest version

Bug description

This template: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js is not using the latest version of InstantSearch.js. So we cannot share it over support for people to create reproducible examples using latest version of InstantSearch.js

How to reproduce

Go to https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js, the version is 2.8.0. Current InstantSearch.js version is 2.9.0.

Expected behavior

Version must be latest

Ways to solve

We could either:

update it manually
use /2/ in html (Instant
put InstantSearch.js dependency in package.json and rely on renovate to have it updated
... and have an automated build from Travis to push the templates branch with updates

Always use latest version of instantsearch.js

And make it available as a variable to the boilerplates.

Deprecate old templates

The problem

We currently have two ways to give templates:

So it's not clear which one to use in support

Solution

Since the later provide almost the same functionality as the former, we could deprecate instantsearch templates completely and link back to create-instantsearch-app previews/readme.

What do you think?

Provide demo credentials as an option

The problem

A concise description of why you want a new feature.

You want to quickly make a reproduction without leaking your API keys, you need to look up in the docs to find existing config which works properly.

Solution

A clear description of what you want to happen.

Have an option for demo credentials instead of any of the other questions.

Implementation

Do you have an idea how it could be implemented?

Let the user choose between entering credentials and attribute and a default working set

npx renames `.gitignore` to `.npmignore`

When using:

npx create-instantsearch-app@beta my-app

The template gets cloned correctly except that .gitignore gets renamed .npmignore. This behavior doesn't happend when using:

yarn create instantsearch-app@beta my-app

This won't be easy to debug. A possible solution could be to rename .gitignore files to .gitignore.template in all templates and rename them to .gitignore during the build process (this is what we do for .babelrc).

Reported by @samouss.

algolia / create-instantsearch-app Goto Github PK

create-instantsearch-app's Introduction

create-instantsearch-app has a new home 👋

create-instantsearch-app's People

Contributors

Stargazers

Watchers

Forkers

create-instantsearch-app's Issues

The problem

Solution

The problem

Solution

Bug description

How to reproduce

Expected behavior

Screenshots

Environment

The problem

Solution

Implementation

Rate-Limited

Open

Detected dependencies

Bug description

How to reproduce

Expected behavior

Screenshots

Environment

Bug description

How to reproduce

Expected behavior

Output in terminal

Environment

Bug description

How to reproduce

Expected behavior

Ways to solve

The problem

Solution

The problem

Solution

Implementation

Recommend Projects

Recommend Topics

Recommend Org