Making a Development Environment

The Javascript console is very useful for testing code and getting instant feedback, but for development purposes you need to be able to store your code somewhere and load your stored code into Content Studio. To set up a development environment on your computer:

Create a folder for your Content Studio extensions somewhere on your computer (for example C:\Users\your-name\cs-extensions).
Create one sub-folder for each extension you want to create (for example C:\Users\your-name\cs-extensions\hello-world).
In each extension sub-folder create a Javascript file (for example C:\Users\your-name\cs-extensions\hello-world\main.js) containing your extension code. For hello-world this could be:
```
require('notifier').notify('Hello world!');
```
Add a file called package.json to each extension sub-folder. This must contain the following JSON data:
```
{ 
  "main" : "js-file-name",
  "name": "extension-name",
  "version" : "extension-version" 
}
```
where:
- js-file-name is the name of your extension Javascript file (for example, main.js). Note that currently this file must contain all your extension code - it cannot load other .js files.
- extension-name is the name of your extension (for example, hello-world). The name may contain alphanumeric characters and hyphens only.
- version is the version number of your extension. Currently this is not used for anything, but it must be supplied.
Open a command prompt window.
Start Content Studio by entering:
```
javaws http://content-engine-host/studio/Studio.jnlp?com.escenic.script.root=dev-folder
```
where:
- content-engine-host is the name of your Content Engine host.
- dev-folder is the absolute path of your extensions folder (C:\Users\your-name\cs-extensions in the example given above).
- On Windows, select View from the menu bar while holding down the Ctrl key. An extra Debug option should be displayed at the bottom of the View menu.
- On Macs, right click between the Content Engine address field and the publication name field in the Content Studio footer:
Select Debug > Developer Mode. All the extensions in your extensions folder will now be loaded and executed. If you have included the hello-world extension described above then you should immediately see the "Hello World!" message appear in the top right corner of the Content Studio window.