---
# System prepended metadata

title: Getting Started

---

---
title: "Getting Started"
description: Setster widget
---

## Prerequisites

A basic understanding of CSS and using Comman Line Interfaces (CLIs) is recommended to start creating a custom Setster Form.

Below are the latest software requirements for building a Setster widget.

-    Confirm Node.js 12.0.0 or higher is installed and currently selected in your project.
     -    Install a Node Version Manager
-    Confirm [NPM](https://www.npmjs.com/) is installed
-    Install the Setster CLI

## MacOS / Linux Setup

#### Install Node

In the terminal for your project, the following command should list what version of node you're currently using. Your machine likely already have a pre-installed version of Node. However, you may need to install the `12.0.0` version which is required for creating a Setster Booking Widget.

#### Confirm Node Version

In your terminal run:

```bash
node -v
```

If the node version listed after running the previous command is `12.0.0` or higher no futher action is required. However, if `12.0.0` is not your Node version you'll need to install a Node version greater than or equal to 12.0.0. It's advisable to use a Node version manager like <a href="https://github.com/nvm-sh/nvm/blob/master/README.md" target="_blank">nvm</a> to install and switch to the <a href="https://nodejs.org/en/blog/release/12.0.0/" target="_blank">Node 12.0.0</a> version from your project directory.

Install nvm

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
```

Confirm nvm

```bash
nvm list
```

Install Node 12.0.0

```bash
nvm install 12.0.0
```

Cd into your new project directory and run:

```bash
nvm use 12.0.0
```

Then, confirm the correct Node version is selected for your workspace by running:

```bash
nvm list
```

ℹ _Now you will be able to easily install and switch between different Node versions using nvm._

#### Confirm Npm

<a href="https://www.npmjs.com/get-npm" target="_blank">
     Npm
</a> should automatically install on your machine upon installing node. To check Npm run the following command to confirm:

```bash
npm -v
```

If this command does not return the npm version <a href="https://www.npmjs.com/get-npm" target="_blank">debug and install npm here</a>.

## Windows Setup

Follow along with the official <a href="https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows" target="_blank">Windows docs</a> to setup NodeJs 12.0.0, npm, and nvm.

## Creating Project

Make a directory to hold all of your Setster projects.

```bash
mkdir myWidgets
```

Move into the directory you just created.

```bash
cd myWidgets
```

### Install Setster CLI

Install the guided Setster project creation comand line interface:

```bash
npm i -g setster-cli
```

This will allow you to create a new Setster Form project from your terminal from any directory.

### Get Account ID

In order to use the Setster Form Builder you'll need to create a Setster account.

After creating a Setster account you'll be able to find your account ID by visiting `setster.com/admin -> Business Profile` at the top of the page. Your account id will be a 5-6 digit number which will be required upon project setup.

### List CLI Options

In order to list all of the available options for the Setster CLI run the following command in your terminal:

```bash
setster-cli
```

This will return a list of options for the CLI

```bash
Setster command line interface

VERSION
  @setster/setster-cli/1.0.0 darwin-x64 node-v16.13.1

USAGE
  $ setster-cli [COMMAND]

COMMANDS
  autocomplete  display autocomplete installation instructions
  create        Command used to create a new Setster Widget project
  help          display help for setster-cli
  remove        Command used to remove an existing Setster Widget project
  start         Command used to start an existing Setster Widget project
```

### Create New Widget

To create a project folder run:

```bash
setster-cli create
```

You'll be prompted to enter a name for your project and press enter. Here we're creating a widget called `myNewWidgetProject`

```bash
Creating new Setster project?
Enter a name for this project:
myNewWidgetProject
```

### Install Dependencies

Before installing your dependencies you'll need to decide if you're going to use <a href="https://www.npmjs.com/get-npm" target="_blank">npm</a> or <a href="https://classic.yarnpkg.com/en/docs/install/#mac-stable" target="_blank">Yarn</a> as your package manager. It's not advisable to switch back and forth between the two because it may have unintended consequences on your installed node_modules.

Move inside the new created folder after you cloned the repo from your terminal with:

```bash
cd setster-widget
```

From inside this folder you need to run one of the following commands:

```bash
yarn install
```

or

```bash
npm install
```

### Start Dev Server

After everything is installed you can either start the widget in development mode or build the widget. When testing it is better to start the widget in development mode. This will create a web server and serve the widget from https://localhost:8081

```bash
#Run in development mode
yarn start:dev
```

Confirm your app is running at `http://localhost:8001/` in your browser.

## Build + Deploy

When building the widget, the code will be minified and concatenated and everything will be moved inside the “build” folder. All files from the “build” folder can be moved to a server which will have to serve the app.html file (or you can open the file in a browser). That is the entry point of the widget.

```bash
#Build
yarn build:staging
```
