From 421db6783fe28352301c714ddffb4e9eab7c4c59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Harrtell?= Date: Sat, 4 Apr 2015 16:51:31 +0200 Subject: [PATCH] Browserify tutorial --- doc/tutorials/browserify.md | 88 +++++++++++++++++++++++++++++++++++++ doc/tutorials/index.hbs | 1 + 2 files changed, 89 insertions(+) create mode 100644 doc/tutorials/browserify.md diff --git a/doc/tutorials/browserify.md b/doc/tutorials/browserify.md new file mode 100644 index 0000000000..8012f73b22 --- /dev/null +++ b/doc/tutorials/browserify.md @@ -0,0 +1,88 @@ +--- +title: Basic project setup using NPM and Browserify +layout: doc.hbs +--- + +# Introduction + +When going beyond modifying existing examples you might be looking for a +way to setup your own code with dependency management together with external +dependencies like OpenLayers 3. + +This tutorial serves as a suggested project setup using NPM and Browserify +for the most basic needs. There are several other options and in particular +you might be interested in +[compiling your own code together with OpenLayers 3](closure.html). + +## Initial steps + +Create a new empty directory for your project and navigate to it by running +`mkdir new-project && cd new-project`. Initialize your project using `npm init` +and answer the questions asked. + +At this point you can ask NPM to add required dependencies by running +`npm install --save-dev openlayers browserify watchify uglify-js`. Watchify and +Uglify will be used to monitor for changes and to build into a minified +bundle. + +## Application code and index.html + +Place your application code in `index.js`. Here is a simple starting point: + +```js +var ol = require('openlayers'); + +var map = new ol.Map({ + target: 'map', + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + view: new ol.View({ + center: [0, 0], + zoom: 0 + }) +}); +``` + +You will also need an `ìndex.html` file that will use your bundle. Here is a simple +example: + +```html + + + + Using Browserify with OpenLayers + + + + +
+ + + +``` + +## Creating a bundle + +With simple scripts you can introduce the commands `npm run build` and `npm start` to +manually build your bundle and watch for changes, respectively. Add the following +to the script section in `package.json`: + +```json +"scripts": { + "start": "watchify index.js --outfile bundle.js", + "build": "browserify index.js | uglifyjs --compress --output bundle.js" +} +``` + +Note that `bundle.js` will contain your application code and all dependencies +used in your application, in this case the official full build of OpenLayers 3. +If you only need parts of OpenLayers 3 you can create +[custom builds](../../builder). diff --git a/doc/tutorials/index.hbs b/doc/tutorials/index.hbs index 92305cbb8f..0d488bf1bc 100644 --- a/doc/tutorials/index.hbs +++ b/doc/tutorials/index.hbs @@ -7,4 +7,5 @@ layout: doc.hbs * [Introduction to OpenLayers 3](introduction.html) * [Basic Concepts](concepts.html) +* [Bundle Application and OpenLayers using Browserify](browserify.html) * [Compile Application and OpenLayers together](closure.html)