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 ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.