Skip to main content
Version: Next

Install CODE & DRAW locally to run with the Community

info

If you are interested in testing your ideas in DRAW, the Olympe Community offers free access to Olympe DRAW, without any installation step required.
If you are not already a member of our Community, go ahead and register to unlock the potential of DRAW.

If you would like to code to create your own bricks, then the below procedure will guide through the necessary steps to install CODE locally. And if you code a cool brick, we would love to hear about it 😊

Local install of CODE & DRAW to run with the Community Olympe Platform

This tutorial guides you through the install of DRAW & CODE locally in order to run with the Community Orchestrator & soft-coded bricks, the Code as data.
Which means that while the coded bricks execute locally, the soft-coded bricks come from the Community.
You can collaborate freely with other Community DRAW users. When a soft-coded brick is updated by its owner for instance, you will get the update in realtime like if you were logged into the DRAW Community instance.

The following main modules will all execute on your local machine

  • DRAW & webpack server
  • CODE

The Community will serve the code as data and run

  • Orchestrator
  • RabbitMQ
  • Neo4J graph database

Local Install

Prerequisites for installing Olympe

You will need to have the following installed:

  • Node.js 14.13.1 or greater
  • Note: while npm is also needed, it comes directly whenever Node.js is installed
  • Yeoman 4.1.0 or greater (can be installed with npm install -g yo)
  • Your favorite IDE e.g. Visual Studio Code

Steps short version

Olympe Yeoman generator, create project, start backend, reset DB, start DRAW

Use this short version if you know what you're doing.
If it your first time here, please proceed with the detailed version.

Install the Olympe Yeoman generator

npm install --global @olympeio/generator-project

Generate an Olympe project

  • create an empty folder where the Olympe platform will be installed
  • navigate to it and run the following to create a project
yo @olympeio/project

Launch DRAW

npm run serve

Compose with DRAW

http://localhost:8888/

Steps detailed version

Install the Olympe Yeoman generator

What is done

Olympe provides package @olympeio/generator-project, a Yeoman generator to help users quickly scaffold a CODE project. The generator installs all dependencies and creates all configuration and runtime files needed to execute Olympe apps and build Olympe libraries.

Instructions

To install it, run

npm install --global @olympeio/generator-project

If you don't have administrator rights on your machine, please install the generator "locally", therefore without the -g option.

Troubleshooting EACCESS errors

If you face EACCESS errors when trying to run the previous command, you probably need to fix how npm is installed on your environment. You'll find more information on the following NPM documentation page: Resolving EACCES permissions errors when installing packages globally

Generate an Olympe project

What is done

  • A folder is created locally where the Olympe Platform will be installed
  • An empty project is created
  • The config file package.json is setup and defines the info about the needed platform dependencies
    • Olympe dependencies: draw & dev-tools
    • Webpack: for running a web server locally
    • React
  • Runs npm install to install all dependencies, which means that if later on you edit your config file package.json, just run this comman manually to re-download the dependencies that need to be updated.

The generator fetches automatically the compatible versions of DRAW, and Olympe runtime.

Instructions

To set up a new project, create an empty directory, navigate to it and call the Yeoman generator:

yo @olympeio/project

The generator will ask you multiple questions. Answer questions like in the following example to create a new project from scratch, named TestLocalCommunity in which we want to create a runnable application with React:

? Do you want to import an existing DRAW project ? No
? Enter a name for your project: TestLocalCommunity
? What is your project meant to be ? Runnable application-s
? Do you want to integrate the React framework ? Yes

The console output will look like this:

generatorPrompting

Setup the connection to the Community
  • locate the config file oConfig.json in the res subfolder
  • it should look like this
{
"composer": {
"suggestedUser": "admin",
"sso": "auto"
}
}
  • edit it to look like this
{
"server": {
"autoConnect": true,
"reconnectionShortDelay": 5000,
"host": "community.fluidapp.io",
"port": 443,
"ssl": true
},
"composer": {
"suggestedUser": "admin",
"sso":"manual"
},
"bus": {
"host": "rabbitmq.olympe.io",
"path": "/mqtt",
"ssl": true,
"port": 443,
"vhost": "community"
}
}
Launch DRAW
Finally, launch DRAW by running
npm run serve
Start composing with DRAW
  • You can finally visit http://localhost:8888/ to start working in DRAW
  • Authenticate with your usual Community credentials
  • See that your Community projects are present

That's all! You can now take a look at our guides and tutorials, and start building a first app and add a first coded function.