Development Setup
Here we will ensure our package manager ( NPM ) is installed and then we will setup our development environment.
Last updated
Was this helpful?
Here we will ensure our package manager ( NPM ) is installed and then we will setup our development environment.
Last updated
Was this helpful?
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 . To confirm NPM install correctly, you can run npm -v in a terminal / command prompt and the version of NPM should be returned.
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
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.
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 section but, there will be a link there to bring you back here.
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 .
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.
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.
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.
In addition to serving our files and converting our SCSS files, we will also need a way to call the . 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 . 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 we will discuss how to setup the widget to provide the data we need.
To begin, clone the into the html-lower-third folder created in the 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.
Download page for ( NPM ) and NodeJS.
Node package on NPM's website.
' website.
Node package on NPM's website.
on GitHub's website.