v24
Environment Setup
How to setup your local environment to develop custom Apps
Building an App starts with the environment setup. There are a plenty of libraries, tools, languages which you can choose to build your app. The API library can be used with any of them and below is an example of a simple environment.
We will use node.js and npm.

Create app

First of all we'll initialise the application
1
$ npm init
Copied!
After a set of questions this will create a package.json file that contains meta data about your app and it includes the list of dependencies to install from npm when running npm install. package.json will look similar to this:
1
{
2
"version": "0.1.0",
3
"name": "workshop",
4
"title": "Workshop App",
5
"description": "Demo application for workshop session",
6
"homepage": "http://lvis.tv/",
7
"author": {
8
"name": "Monterosa Productions Ltd",
9
"email": "[email protected]",
10
"url": "http://monterosa.co.uk/"
11
},
12
"language": "en",
13
"keywords": [
14
"lvis",
15
"application",
16
"demo"
17
],
18
"engines": {
19
"node": ">= 0.8.0"
20
}
21
}
Copied!

Application structure

The application structure will look similar to this:
1
.
2
├── gulpfile.js
3
├── package.json
4
└── src
5
├── config
6
│ └── lvis
7
│ ├── app-dash.png
8
│ ├── app-store.png
9
│ ├── elements.json
10
│ ├── fields.json
11
│ └── spec.json
12
├── html
13
│ └── index.html
14
├── images
15
├── js
16
│ └── script.js
17
└── styles
18
├── main.less
Copied!
  • gulp tast described in ./gulpfile.js file
  • src/config/lvis folder contains LViS App configuration files

Add dependencies

Next we need to jQuery and the LViS libraries to our app. Our API can be retrieved from Monterosa's private npm registry. Make sure you have npm installed version 6 or greater.

Obtaining npm registry account

To obtain Monterosa's npm registry account please write request to [email protected]
Log into Monterosa' registry with existing account credentials:
1
$ npm login --registry=http://npm.monterosa.co [email protected]
Copied!
Download libraries:
1
$ npm install @monterosa/[email protected]^23 --save
2
$ npm install jquery --save
Copied!

Gulp

As a build system we use gulp. Let's install it globally and add it as a dependency in our project:
1
$ npm install --global gulp-cli
2
$ npm install gulp --save-dev
Copied!
We will now require a few additional modules:
  • gulp-filter — enables you to work on a subset of the original files by filtering them using globbing.
  • gulp-concat — concatenates files
  • gulp-template — Render/precompile Lo-Dash/Underscore templates
  • gulp-less — Less for Gulp
Create tasks in gulpfile.js.
Tasks
Scripts
Styles
HTML
Config
Images
1
var gulp = require('gulp'),
2
filter = require('gulp-filter'),
3
concat = require('gulp-concat'),
4
template = require('gulp-template'),
5
less = require('gulp-less'),
6
stylish = require('jshint-stylish');
7
8
/*
9
* Read package file
10
* Some variables are taken from this file
11
*/
12
13
var pkg = JSON.parse(fs.readFileSync('package.json'));
14
15
gulp.task('watch', function () {
16
gulp.watch('src/html/**/*.html', ['copy:html']);
17
gulp.watch('src/config/**/*', ['copy:config']);
18
gulp.watch('src/images/*', ['copy:images']);
19
gulp.watch('src/styles/*', ['styles']);
20
gulp.watch('src/js/**/*.js', ['scripts'] );
21
});
22
23
gulp.task('copy', ['copy:html', 'copy:config', 'copy:images']);
24
25
gulp.task('default', ['copy', 'styles', 'scripts', 'watch']);
Copied!
1
/*
2
* Builds scripts.
3
*
4
* Feel free to use any superset of JS: TypeScript, CoffeeScript, etc.
5
*/
6
7
gulp.task('scripts', function() {
8
9
var nodeModules = [
10
'node_modules/jquery/dist/jquery.js',
11
'node_modules/lvis-api/lvis.js'
12
];
13
14
var scripts = [
15
'src/js/**/*.js'
16
]
17
18
// Libraries
19
gulp.src(nodeModules)
20
.pipe(concat('lib.js'))
21
.pipe(gulp.dest('dist/assets/js/'));
22
23
// Scripts
24
gulp.src(scripts)
25
.pipe(concat('main.js' ))
26
.pipe(gulp.dest('dist/assets/js'));
27
28
});
Copied!
1
/*
2
* This task builds styles.
3
*
4
* We've chosen LESS preprocessor for you.
5
* But you free to set up any preprocessor of your choice: scss/compass,
6
* stylus, autoprefixer, etc.
7
*/
8
9
gulp.task('styles', function() {
10
return gulp.src('src/styles/main.less')
11
.pipe(less())
12
.pipe(gulp.dest('dist/assets/styles'));
13
});
Copied!
1
/*
2
* Precompile templates using (Lo-Dash/Underscore templates syntax)
3
*/
4
5
gulp.task('copy:html', function () {
6
return gulp.src(['src/html/**'])
7
.pipe(template(pkg))
8
.pipe(gulp.dest('dist'));
9
});
Copied!
1
/*
2
* Copy config files required for Studio
3
*/
4
5
gulp.task('copy:config', function () {
6
pkg.url = '//' + pkg.name + '.localtunnel.me';
7
8
var specFilter = filter('lvis/spec.json', {restore: true});
9
10
return gulp.src(['src/config/**'])
11
.pipe(specFilter)
12
.pipe(template(pkg))
13
.pipe(specFilter.restore)
14
.pipe(gulp.dest('dist/config'));
15
});
Copied!
1
/*
2
* Copy images
3
*/
4
5
gulp.task('copy:images', function() {
6
return gulp.src('src/images/**/*')
7
.pipe(gulp.dest('dist/assets/images'))
8
});
Copied!
Once all tasks are set run $ gulp command which runs initial build and leave watcher running to watch all changes within src/* folder and once any it will re-run necessary task to build the part of your app again.

Local server and tunnelling

In order to distribute the app and set up it within Studio you need to make your app available on the Internet. For development purposes we suggest you run a simple local server and tunnelling its response.
1
$ npm install --save-dev localtunnel
2
$ npm install --save-dev gulp-connect
3
$ npm install --save-dev connect-modrewrite
Copied!
Create gulp tasks
Connect
Tunnelling
1
var gulp = require('gulp'),
2
connect = require('gulp-connect'),
3
localtunnel = require('localtunnel');
4
modrewrite = require('connect-modrewrite');
5
6
/*
7
* Read package file
8
* Some variables are taken from this file
9
*/
10
11
var pkg = JSON.parse(fs.readFileSync('package.json'));
12
13
14
/*
15
* Runs HTTP server using middleware `modrewrite` plugins.
16
* Node's modrewrite plugin works exactly as Apache's mod_rewrite module
17
* Here we proxy all requests from /<pkg_name>/<version>/* to /*.
18
*/
19
20
gulp.task('connect', function() {
21
connect.server({
22
root: 'dist',
23
port: '8080',
24
middleware: function () {
25
return [
26
modrewrite([
27
'^/' + pkg.name + '/.*?/(.*)$ /$1 [L]'
28
])
29
];
30
}
31
});
32
});
Copied!
1
/*
2
* Exposes local HTTP server to the public.
3
* Your web page will be available at //<pkgname>.localtunnel.me
4
*/
5
6
gulp.task('localtunnel', function () {
7
var tunnel = localtunnel(8080, {subdomain: pkg.name}, function(err, tunnel) {
8
if (err) {
9
util.log(err.toString());
10
} else {
11
util.log('Assigned public url: ' + tunnel.url);
12
}
13
});
14
});
Copied!
Extend default task and include connect task in it:
1
gulp.task('default', ['copy', 'styles', 'scripts', 'connect', 'watch']);
Copied!
Now you have everything up and you can proceed with your app.

Setting up your production app

Note that to setup your app as a fully installed App from within Studio, please contact your account manager or support.

Deploy to Production

Because the App build contains only static files (html, js, css, images, etc..) it can be just simply copied to any CDN and distribute from it. For example lets try to upload our app on Amazon S3.
First of all lets add Gulp S3 module
1
$ npm install gulp-s3 --save-dev
Copied!
Create upload task:
1
var gulp = require('gulp'),
2
s3 = require('gulp-s3');
3
4
var pkg = JSON.parse(fs.readFileSync('package.json'));
5
6
// Amazon S3 credentials
7
// They are not real, you have to obtain your own credentials
8
var credentials = {
9
"key": "GYSCH4ASAYAKIAEK5P",
10
"secret": "ySiwtWWsOtlhlBMrV2M7yYjIzo2sYTtIy6qQ5qB6",
11
"bucket": "lvis-apps",
12
"region": "eu-west-1"
13
};
14
15
var opts = {
16
delay: 500,
17
uploadPath: 'my-super-app/' + pkg.version + '/',
18
gzippedOnly: true
19
};
20
21
gulp.task('upload', function () {
22
return gulp.src('dist/**')
23
.pipe(s3(credentials, opts));
24
});
Copied!
Once you run command $ gulp upload all files from 'dist/*' folder will be uploaded to Amazon CDN under the /my-super-app/<version>/ folder. After that you can add register or update (if it was previously added to LViS Studio) your application.

Registering with Studio

After you uploaded your app it will be available under //<host>/<name>/<version>/ URL. And now we are ready to register it with Studio.
To do that you need to go to Accounts section under User menu.
Choose your account
Click Add button and provide link to an App Spec file.
Click Add button and provide link to an App Spec file
If App Spec is valid, the app will be registered with Studio and you will be able to create a new Project within the platform using your app.