JavaScript Search Framework Tutorial 0: Environment Setup

This preliminary tutorial explains how to set up your local machine (whether it be running on Windows, macOS, or Linux) to be able to actively follow the rest of the tutorials in this series.

This preliminary tutorial isn’t mandatory. If you only want to get a better understanding of the different concepts without setting up a working environment, you can skip ahead to JavaScript Search Framework Tutorial 1: Basic Configuration, Options, and Markup.

Install Git

Make sure Git is properly installed and working on your local machine. It will be needed to clone the repository required for these tutorials.

Git can be downloaded from the following URL:

Install Node.js

Node.js will be used to install the project dependencies and run a developer server for these tutorials.

You can download Node.js from the following URL:

Make sure you are using Node.js v10.x. You can check what Node.js version is installed on your local machine by typing the following command in a terminal:

node --version

Clone the Tutorial Repository

In a terminal, from the folder into which you would like the tutorial repository to be cloned, type the following command lines:

git clone
cd search-ui-seed

This will clone the repository into a new folder named search-ui-seed and navigate to the root of that folder.

Install Project Dependencies

Use npm, which is the package manager for Node.js, to install the project dependencies.

In a terminal, from the root of the search-ui-seed folder, type the following command line:

npm install

This will download and install the dependencies required to build and run the project.

Build Project

Once all dependencies have been correctly installed, type the following command line:

npm run build

This will build the entire project.

Run Server

After the project has been built, type the following command line:

npm run watch

This will run a webpack-dev-server, which you can access to by opening http://localhost:3000 in a web browser (see webpack dev server). When you access the webpack-dev-server, you should see a fully configured search interface pointing to a sample endpoint.

What’s Next?

You should now proceed to JavaScript Search Framework Tutorial 1: Basic Configuration, Options, and Markup.

Recommended Articles