SpringBot Development Environment: Source Code Virtual Machine

SpringBot development environment: working on the codebase using the virtual machine setup


Setup project source

There are two different virtual machine setup options you can select from:

  1. Drive Mapping
  2. Remote code editing over SSH using VS Code

Note: Some Mac users have experienced technical difficulties running VirtualBox.

Option 1: Drive Mapping

It is possible to map a drive from your development (local / host) environment into your server (virtual) environment. This allows you to use software on your development environment to edit your source and these changes are immediately reflected in your server environment.

Setup

On development environment:

First, setup your application source code on your local environment

NB: It is best practice to store the source on an encrypted drive. From this point on, on Windows it is assumed that G: is your encrypted drive, and on Mac or Linux your whole drive is encrypted.

  1. Setup Project Drive or Directory
    Windows
    All project source files should be cloned in G:.

    Mac or Linux
    Create the directory /data/repository:

    sudo mkdir /data
    cd /data
    sudo mkdir repository
    sudo chown user:user repository
    cd repository
    
  2. Clone your repository (substituting in your provided git URL) and switch to the develop branch
    Git client
    You can download a free git client such as Git Kraken and clone your repository into your [project drive or directory]
    Command line
    If you prefer to use the command line (i.e, “Command Prompt” for windows, “Terminal” for Linux and Mac), you can install the git command line tool from https://git-scm.com/downloads for your operating system. The commands to enter to clone your application repository are:

    cd [project drive or directory]
    git clone https://git.codebots.com/cb[subdomain]/[project-slug].git
    cd [project-slug]
    git checkout develop
    

In VirtualBox, make sure your server is not running and go to Settings > Shared Folders

  • Click the “Add new folder” icon on the right
  • Set the folder path to wherever all of your git repositories reside (e.g G:)
  • Folder name: repository
  • Do not check Read Only
  • Do not check Auto Mount
  • Check Make Permanent (if given the option)
    Image

We now need to power on the machine.

On server environment:

  1. You need to find out the ID for the account that was created on Ubuntu during the setup. Type in the following and press enter:

    cat /etc/passwd
    
  2. Take note of the UID and GID assigned to the user account. It should be 1000 for both as per the image below, but may be different:
    Image
  3. Create a bash script to mount the core on boot

    sudo nano /home/mount_core.sh
    
  4. Put the contents below in the file, replacing the uid and gid in the second last line if required.

    #!/bin/bash
    echo "Running mount_core.sh..."
        
    lsmod > /tmp/lsmod
        
    sleep 5
    if [ ! -d "/data/repository" ]; then
         echo "CREATE /data"
         sudo mkdir /data
         echo "CREATE /data/repository"
         sudo mkdir /data/repository
         sudo chown -R user:user /data
    fi
        
    # The uid and gid need to match the value of your passwd file
    sudo mount -t vboxsf repository /data/repository/ -o rw,uid=1000,gid=1000
    exit 0
    
  5. Make it executable and run the script.

    sudo chmod 755 /home/mount_core.sh
        
    /home/mount_core.sh
    
  6. Check that your mapped source is now visible, and that it is owned by the user account

    ll /data/
    

    Image

  7. Make sure the script runs when the virtual machine reboots

    Create another script

    sudo nano /etc/rc.local
    

    Copy the following into the file and press “CRTL-X” then “Y” to save and exit

    #!/bin/sh -e
    /home/mount_core.sh
    exit 0
    

    Make the script executable

    sudo chmod +x /etc/rc.local
    
  8. Create a bash script to create a location on your virtual machine that your application will be served from.

    sudo nano /home/reset_application.sh
    
  9. Copy the contents below into the file

    #!/bin/bash
    if ([ "$1" == "" ])
    then
        echo "You must specify an application to setup/reset"
        exit 1
    fi
        
    STD_DOMAIN=$1
        
    if [ ! -d "/data/local" ]; then
         echo "CREATE /data/local"
         mkdir /data/local
    fi
        
    echo "SETUP $STD_DOMAIN"
        
    rm -rf /data/local/${STD_DOMAIN}
    mkdir /data/local/${STD_DOMAIN}
    mkdir /data/local/${STD_DOMAIN}/clientside
    mkdir /data/local/${STD_DOMAIN}/serverside
        
    ln -s /data/repository/${STD_DOMAIN}/domain /data/local/${STD_DOMAIN}/domain
    ln -s /data/repository/${STD_DOMAIN}/models /data/local/${STD_DOMAIN}/models
        
    ln -s /data/repository/${STD_DOMAIN}/clientside/angular.json /data/local/${STD_DOMAIN}/clientside/angular.json
    ln -s /data/repository/${STD_DOMAIN}/clientside/package.json /data/local/${STD_DOMAIN}/clientside/package.json
    ln -s /data/repository/${STD_DOMAIN}/clientside/tsconfig.json /data/local/${STD_DOMAIN}/clientside/tsconfig.json
    ln -s /data/repository/${STD_DOMAIN}/clientside/tslint.json /data/local/${STD_DOMAIN}/clientside/tslint.json
    ln -s /data/repository/${STD_DOMAIN}/clientside/src /data/local/${STD_DOMAIN}/clientside/src
        
    ln -s /data/repository/${STD_DOMAIN}/serverside/build.gradle /data/local/${STD_DOMAIN}/serverside/build.gradle
    ln -s /data/repository/${STD_DOMAIN}/serverside/docs /data/local/${STD_DOMAIN}/serverside/docs
    ln -s /data/repository/${STD_DOMAIN}/serverside/gradle.properties /data/local/${STD_DOMAIN}/serverside/gradle.properties
    ln -s /data/repository/${STD_DOMAIN}/serverside/settings.gradle /data/local/${STD_DOMAIN}/serverside/settings.gradle
    ln -s /data/repository/${STD_DOMAIN}/serverside/src /data/local/${STD_DOMAIN}/serverside/src
        
    echo "FINISHED SETUP"
        
    exit 0
    
  10. Make the script executable

    sudo chmod 755 /home/reset_application.sh
    
  11. This script can now be run in the following manner to create a local application instance:

    /home/reset_application.sh [projectname]
    

NB: For applications using SpringBot 0.3.0.0 or older, you will need to follow Running SpringBot 0.3.0.0 so that your application is able to be served correctly.

Update

None! Every change made in the development environment is reflected in the server environment.

Option 2: Remote code editing over SSH using VS Code

This option is beneficial if you use Visual Studio Code (or VS Code) as your primary IDE for development. You can download the latest version of VS Code from the official website.

Setup

On server environment:

  1. Create the directory /data/repository
sudo mkdir /data
cd /data
sudo mkdir repository
sudo chown user:user repository
cd repository
  1. Clone your repository (substituting in your git URL) and switch to the develop branch
cd /data/repository/
git clone https://git.codebots.com/cb[subdomain]/[project-slug].git
cd [project-slug]
git checkout develop

On development environment:

  1. Install Plugin

    • Open VS Code, select the Extensions tab
      Image
    • Search for Remote - SSH and install the extension.
      Image
    • You should now see a Remote - SSH icon in the left hand tray of VS Code.
      Image
  2. Setup Config

    • Click on the Remote - SSH icon and click on Configure a SSH Host
      Image
    • Select C:\Users\[You]\.ssh\config and add the following to the file. Press Ctrl > S for Windows or Cmd > S for Mac to save the config.

      Host springbot.vm
       User user
       HostName 192.168.56.101
      
  3. Add a setting to your user preferences to prompt for a password.

    • Press Ctrl > Shift > P for Windows or Cmd > Shift > P for Mac to show all commands and type in “user” to find the “Preferences: Open User Settings” option.
      Image
    • In the top right hand corner, select the “Open Settings (JSON)” option. This will open the settings.json file.
      Image
    • Paste the following into the settings.json file.

      "remote.SSH.showLoginTerminal" : true,
      

      Image

    • Press Ctrl + S for Windows or Cmd + S for Mac to save, then close the file.
    • Restart VS Code
  4. Connect

    • On the left tray you should now see springbot.vm. Hovering over it will present you an add folder icon.
      Image
    • Clicking this icon will open a new VS Code window. If this is the first time you have connected, you will see a warning and a prompt to continue. Type “yes” and press Enter.
      Image
    • You will be prompted to enter your password:
      This password prompt will appear twice.
      Image
    • Once you have logged in, you will see the a message confirming you are connected to the SSH host.
      Image
    • You will now be able to open a folder on your server to start editing code. In the Explorer tab in the top left, click on the “Open Folder” button, and navigate to /data/repository/[projectname]
      Image
      Image
    • You will need to login again, so follow the steps above (entering your password in twice).
    • You should now see your application open in the Explorer tab on the left. You can navigate through the folders, open and edit files and your changes will be reflected on the server.
      Image

Update

None! Every change is made in the server environment directly.

What’s next?

Now that you have setup your development environment, you can Running SpringBot.

Back to the Techies Qualification
Running SpringBot.

Last updated: 09 September 2019


Start modelling your app today.