> For the complete documentation index, see [llms.txt](https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/development-setup.md).

# Development Setup

## NPM (Package Manager)

NPM is a package manager for NodeJS and other web technologies. It originally stood for "Node Package Manager" but there are now packages for much more than just NodeJS. \
To install NPM, use the [Get NPM page](https://www.npmjs.com/get-npm). To confirm NPM install correctly, you can run `npm -v` in a terminal / command prompt and the version of NPM should be returned. 

## Web Server

As we create the HTML Files, we will want to be able to see them from within our CasparCG server and a web browser. To accomplish this, we will be starting a lightweight web server with [HTTP-Server.](https://www.npmjs.com/package/http-server)

### Web Server Installation

To install HTTP-Server, run the command `npm install -g http-server`. This will globally install the package and allow you to run the `http-server` command from any folder. \
Once installed, we can run the command `http-server -p8080 -c-1`. The `-p` flag is the port the server will run on and the `-c` flag is the cache time for the files; which we will disable by setting the value to `-1`. Disabling the cache ensure that any changes we make to the files will be reloaded from the web server, not the browser's cache.

### Using the Web Server

To launch the web server, we will open a new command prompt / terminal in the root folder of our project ( `html-lower-third` ) and run the command mentioned above, `http-server -p8080 -c-1`. That folder isn't created until the [File Setup](/casparcg-html-template-guide/html-templates/the-basics.md) section but, there will be a link there to bring you back here.

## SCSS

We will be using SCSS to style the graphic in this guide. SCSS is a CSS pre-processor that makes writing CSS more like a scripting language. You can find the full documentation on the [SCSS website](https://sass-lang.com/). 

### SCSS Installation

To install SCSS you can run the command `npm install -g sass`. To check the SCSS installation, run `sass --version` and the version should be returned. \
To begin watching for SCSS files, we can run the command `sass --watch scss:css`. This will watch all the SCSS files within the `scss` folder and create the CSS files in the `css` folder.

### Using SCSS

Like our web server, we will open a new command prompt / terminal in the root folder of our project ( `html-lower-third` ). Then we can run the command we defined above, `sass --watch scss:css`, and on each file save, the SCSS files we be parsed into CSS files in the `css` folder.

## Development Widget ( Optional )

In addition to serving our files and converting our SCSS files, we will also need a way to call the [AMCP commands](/casparcg-html-template-guide/amcp-commands-review.md). This is typically done by the CasparCG Server but, developing with the server can be a bit tedious. Each time a change is made to any file, the CG ADD command would need to be ran again along with all of the required data. We can use CasparCG remote development console to refresh the page without the CG ADD command but then we will need to manually run `update` with the required data to setup the graphic. To solve both of these problems, we would recommend using the [CasparCG HTML template widget](https://github.com/chrisryanouellette/CasparCG_HTML_Widget). This widget is a single script file that can included by our `lower-third.1.html` file. It will give use a small widget that allows us to run AMCP commands from the browser as well as store the template data in the browser's local storage. Within the widget's settings, we can run the update command when the page refreshes and the required data will be added as an argument into the `update` function. When we get into [Handling Updates](/casparcg-html-template-guide/javascript/handling-updates.md) we will discuss how to setup the widget to provide the data we need.

### Widget Installation

To begin, clone the [HTML Widget's repository](https://github.com/chrisryanouellette/CasparCG_HTML_Widget) into the `html-lower-third` folder created in the [File Setup ](/casparcg-html-template-guide/html-templates/the-basics.md)section of this guide. Then copy the `dev.js` file that is in the `dist` folder into the `js` folder in our project. Finally add `<script src="./js/dev.js"></script>` to the bottom of the `lower-third.1.html` file.&#x20;

When accessing a file from the browser, you will need to add `?debug=true` to the end of the URL so the widget functionality is allowed. The URL for this guide would look like this `http://localhost:8080/lower-third.1.html?debug=true`.

#### Resources

* Download page for [Node Package Manager](https://www.npmjs.com/get-npm) ( NPM ) and NodeJS.
* Node package [http-server](https://www.npmjs.com/package/http-server) on NPM's website.
* [SCSS](https://sass-lang.com/)' website.
* Node package [SCSS ](https://www.npmjs.com/package/sass)on NPM's website.
* [HTML Development Widget](https://github.com/chrisryanouellette/CasparCG_HTML_Widget) on GitHub's website.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/development-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.