Start developing HTML5 application with VIFIB PaaS: the WebRunner

This guide will teach you:

• How to order a webrunner
• How to acces your webrunner
  
• How to set up your environment
• How to start developping

Order a Webrunner

Go on www.vifib.com in order to order a webrunner

Access Web Runner

Read your connection parameters

Here are displayed all the information needed to access webrunner' services

1. Backend URL: ipv6 url to directly access your runner
2. SSH command: used to access your runner in ssh when you provided a ssh public key
3. Url: Url to access your runner once you set your account
4. Public Url: Url of the public folder of your runner
5. Webdav url: url for webdav access of your runner it access the root of your runner. Same users as the one for the runner
6. Git public url: public url of your repositories.
7. Git private url: private url for your repositories. You can use it to push
8. Access url: Url to set up your account and then login into your webrunner
9. Monitor Url: Url to access the monitoring interface of your instance. Default password is "passwordtochange". Use this url to get the recovery code needed to set up your runner

Connect to monitor interface

In order to set up the first account of your web runner you need to get the recovery code available in the monitor interface. To do so use the "Monitor Url" available as a connection parameter. The default password is "passwordtochange"

Get your credential

Once in your monitoring interface access the "setting.cgi" panel in order to get the "recovery-code" needed to set your account into the webrunner. Do not forget to change the monitor-password. Note that the shell-password to access the shell inside the webrunner is available here

Set Up your account

Now that you have the recovery password access the "Access Url" in order to set up your account into the runner. You should access the following page.

Set up your environment

Access terminal

Now that you have set your account. You can set up a minimal development environment to develop your first html5 application. To proceed access the terminal into the runner with the 'shell-password' available in your monitoring interface.

Set up the environment

Now we need to set up an empty git folder in order for you to start your application. We will then link this directory to your public directory so that you can directly display any modification you make. Type the following commands into the terminal

       
       $ cd project
       $ git init myproject
       $ cd ..
       $ ln -s $(pwd)/project/myproject $(pwd)/public/
    

Once done you can start developing by accessing the editor

Start developing

Now that we have set a minimal environment to develop. we can start adding files and edit them. This is possible from the editor tab

Go to your tree

By default the runner display the tree to edit software profiles. In our case where we want to develop an HTML5 application, we need to access another part of the tree, to do so you can click on the switch button in the editor interface

Create your first file

Now we will create our first file in our repository. Open the project folder and right click on your project to add a new file in it. A popup will appear to name the file/ eg: "index.html"

Editor interface

Here we will detail how to use the editor interface.

1. The switch button
2. The favorite menu for fast access to file marked as "Favorite"
3. Expand: It expands the editor into the full window. Shortcut: Crtl+e
4. Save: Save the current file. Shortcut: Ctrl+s
5. Menu: Menu offering various actions on the file
6. Tabs: Files are open in tabs. If the title of the file is diplayed after a "*" it means the files hasn't been saved
7. Tree: Display the current tree. More option are available by right clicking on files and diresctories
8. Editor: To edit files. It uses Ace editor with most of its shorcut availables

Access your website

Once you started creating you application you can access it using the "Public Url" giving the full path of your application. In our case the full is ${public_url}/myproject/index.html

Now that we started to develop our application. We will use git in order to trace, share and save our work. To do so access the terminal and copy the following command for your first commit:

    $ cd project/myproject/
    $ git config --global user.name "Your Name"
    $ git config --global user.email "my.email@domain.com"
    $ git config --global core.editor nano
    $ git add *
    $ git status
    $ git commit