Help running fzf

[wgmayer0]

I am trying to run it using the official instructions. I don't have experience with Node.js, but here I downloaded all of the fzf files using npm install on arch linux.

When I try to run the code I get:

[Ajit]

I don't have experience with Node.js

Thanks for telling your expertise upfront. There are quite a few things which are wrong here, and rather to overwhelm you, I'd suggest to use this as a starter. Alternatively, you can use CodeSandbox which you can consider as an online VSCode+browser setup.

For the starter, you'd need to:

1. Clone the repository to your machine
2. Do npm install inside to install add dependencies
3. Run npm run dev to start a server

Now for any change you would make, you don't have to re-run the server, just need to save the file. (CodeSandbox works this way too.)

[wgmayer0]

I hate to say it, but even using your files I am getting that same issue regarding `Cross Origin`. Not sure what the problem is.

[Ajit]

What's the URL you are visiting after you run the server? Also, what's the code in main.js?

Do note that you need to visit the URL that you get when you run npm run dev to run the server as it would serve the website.

[Ajit]

Also, I'd suggest to come to GitHub to view my reply. I have updated my previous comment so you might not have received the edit via email.

[Ajit]

Most importantly, if you've just started learning JS/ES6+/Node.js, I'd suggest to not to look into any library. Rather, learn the core concepts of JavaScript first. You then can look into bundlers/build tools (like Webpack, Parcel, Vite) followed by discovering ways of importing third party libraries.

[wgmayer0]

Ok I have tried everything to get the module to run. Could you give me some example configuration code that you know works with firefox? I should be able to modify that how I need it. I am wondering if you can include:

1. index.html
2. style.css
3. script.js

I am new to node.js so I am wondering what files I would need. This package depends on Node.js, correct?

[Ajit]

The GitHub repo mentioned in this comment #103 (comment) has the code you need.

Again, you’re getting ahead of yourself.

[wgmayer0]

Ok I made a folder, git-cloned those exact files into it, and then tried to run index.html in firefox. I got this:

…

On Mon, Mar 07, 2022 at 08:37:24PM -0800, ajit wrote: The GitHub repo mentioned in this comment #103 (comment) has the code you need. Again, you’re getting [ahead of yourself](#103 (comment)). -- Reply to this email directly or view it on GitHub: #103 (comment) You are receiving this because you authored the thread. Message ID: ***@***.***>

[wgmayer0]

[wgmayer0]

This is my exact file structure.

[Ajit]

and what is inside your package.json and in your main.js?

[wgmayer0]

Ok so with running the server that is where I am getting stuck. Right now I am getting this

[wgmayer0]

main.js:

import './style.css'

import { Fzf } from 'fzf'

const list = ['go', 'javascript', 'python', 'rust', 
              'swift', 'kotlin', 'elixir', 'java', 
              'lisp', 'v', 'zig', 'nim', 'rescript', 
              'd', 'haskell']

const fzf = new Fzf(list)

const entries = fzf.find('as')
const result = entries.map(entry => entry.item).join(", ")

console.log(result)

// if you'd look in index.html file, you will find a `div` with id `app`
document.querySelector('#app').innerHTML = result

package.json:

{
  "name": "issue-fzf-103",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.8.0"
  },
  "dependencies": {
    "fzf": "^0.5.1"
  }
}

[wgmayer0]

index.html is what I am running in the browser

[Ajit]

That's not what you need to run, rather you need to run the link that you see in the console (which is localhost:3000 in your case). Try running that.

[wgmayer0]

Ok great - it ran. Now what would I do to start using it in a javascript application? I would like to make a webpage that essentially has a command palette. I read your recommendation and would like to implement this type of functionality into a webpage. I am a heavy vim user if that tells you anything, lol.

[wgmayer0]

Also is there a way to run this client side without the client needing to depend on a server? I'd like the only thing the client to be communicating with to be the database and everything else run client side... is that possible? Can I port the code to pure javascript? I don't really understand the need for node.js. I feel like if it can be expressed in go, then it could theoretically be written in pure javascript. Great job porting it by the way. It is an amazing tool. I am just asking for understanding.

[Ajit]

That's a whole added level of complexity, and rather using this lib you could look into https://github.com/kentcdodds/genie or (vanilla JS) https://github.com/timc1/kbar (needs React). The added complexity is about building a user interface — responding to keyboard and making sure it at least conforms to some accessibility guidelines.

If you really want to use this library, you can look into the source code of this browser extension as it also uses this lib.

[Ajit]

If you're feeling adventurous, you can use this library in Vim with Deno. Here's a plugin one made.

[wgmayer0]

That's a whole added level of complexity, and rather using this lib you could look into https://github.com/kentcdodds/genie or (vanilla JS) https://github.com/timc1/kbar (needs React). The added complexity is about building a user interface — responding to keyboard and making sure it at least conforms to some accessibility guidelines.

If you really want to use this library, you can look into the source code of this browser extension as it also uses this lib.

Thanks I will look into these!

[Ajit]

Can I port the code to pure javascript? I don't really understand the need for node.js.

Vite uses Node.js, not FZF

[wgmayer0]

Update - ended up using webpack to run the FZF package from the client. Great package!