Hyper Open Edge Cloud

How to start an empty HTML5 project in Web Runner

  • Last Update:2016-11-10
  • Version:001
  • Language:en

Set up your environment

Access terminal

To start developing, you can go to the Editor page directly.

You have access to a shell by clicking on the shell button, such as shown below. You will have to enter the commands given in this tutorial in the shell input.

Please, remember that this shell feature is a light shell emulator, and can't run commands such as text editors (vim/emacs/...), or pagers (less/more/...).

However, you can access to a more complete web-shell. To proceed access the terminal into the runner with the 'shell-password' available in your monitoring interface.

SlapOS runner is a web based development tool which uses slapgrid to install and instantiate the software

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/

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

Save your changes with git

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 add *
    $ git status
    $ git commit -m "Initial commit"



If you are using the web terminal (on the dedicated page), you can also declare the default text editor (nano and vim are currently available) :
    $ git config --global core.editor nano 
 
 
 
Or :