Project Compilation / Installation

This describes the compilation process of entire project for linux machine.


Top

1 Platform

Platform on which the project can be compiled is any linux machine (bash is required)

2 Requirements

Following programs are necessary to be installed in order to compile and run the project:


2.1 Npm

Npm is package manager. It allows you to install packages for NodeJS, and also run predefined scripts. It uses package.json file.

      sudo apt-get install npm
    

2.2 Sass

Sass is css preprocesor. It is necessary only for developing the main webpage, which is written in Nette.
The main reason was that all the styles got long, as page got bigger.

For instalation, I strongly recommend to use the cleaner instalation method
Sass can be installed using npm:

    sudo npm install node-sass -g
  

It is possible, that it will throw error during instalation. If that happens, this command worked for me...:

    sudo npm install --unsafe-perm -g node-sass
  

Additionally, sass auto compile module is good for Atom.


Here is example of valid scss code:

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li { display: inline-block; }

    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
  

which is compiled to following css code:

    nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}


2.2.1 Easy and clean instalation

The problem can be that npm-related sass is not compatible with nodeJS of version 10. It can be resolved by installing the binary for sass, instead of the npm-version (which is javasctipt implementation of sass processor)


2.3 NodeJs

NodeJS is javascript server.

      sudo apt-get install nodejs
    

2.4 Typescript

Typescript is a language for application-scale JavaScript. It allows to use classes, abstract classes, inheritance etc. It provides compile time code check. Can be installed using npm:

      npm install -g typescript
    

The point is, that in pure javascript, having class:

     class A
     {
        constructor()
        {
          console.log(this.variable);
        }
     }
    

Now this code executes fine, and there are no errors. The point is, that accessing undefined variable gives value 'undefined'


This makes it extremelly difficult to develop huge projects, as any typo can result in bad behavior. Moreover, in pure javascript, variables do not have type, so you can assign anything as a value. And more issues.
This all is, however, solved with typescript

Compiling

This describes the entire compile process


3.1 Path substituting

Typescript compiler allows path referencing. In code, there can be token, which is later defined in tsconfig.json file.


The main point is to get rid of relative paths referencing, such as:

    import {HashSet} from '../../../../../../../containers/data/HashSet.ts';

     export class A
     {
        constructor()
        {
        }
     }
    

This can be solved using tokens, as follows:


file.ts example:

    import {HashSet} from '@HashSet';

     export class A
     {
        constructor()
        {
        }
     }
    

HashSet.ts example:

     export class HashSet
     {
        constructor()
        {
          //TODO
        }
     }
    

tsconfig.json example:

      {
        "compilerOptions": {
          "module": "commonjs",
          "target": "es5",
          "noImplicitAny": false,
          "sourceMap": false,
          "outDir": "build/src",
          "baseUrl": ".",
          "paths": {
            "@HashSet": ["./app/model/other/containers/hashSet/HashSet"]
          }
        },
        "exclude": [
          "app/view/**",
          "src/node_modules",
          "build"
        ]
      }
    

3.1.1 The problem

Upon compilation, the file.ts will become file.js which will contain valid javascript.
During compilation, the Typescript uses the tokens and path substitution to know what file in required, and where it is.
However, in final .js file, The path is not substituted.


The final .js file can look something like this:

      var HashSet_1 = require('@HashSet');

      //here is javascript ugly code
    

The problem is, that '@HashSet' is not a file, nor path and it does NOT exist.
Therefore, the final javascript fill not work.


3.1.2 Solution

The idea is to use bash script to traverse every .js file after typescript compilation, and using the tsconfig.json file, where all tokens are defined, substitute such a token in every .js file to correcponding path. Unfortunatelly, the path must be relative, therefore it is precomputed by the replacing script.


3.2 Client code compilation

The code on client side is compiled to one .js file (bundle.js)
The code, however, can not contain 'import'.
The dependency is solved adding following line:

      ///<reference path="./gameLobby/GameLobby.ts" >

      //some other typescript code...
      

That makes sure that the .ts file is compiled and put above the final javascript code, so that the final class can be used.


When, however, using export keyword:

      export class
    

it does NOT exist on client side, and can NOT be used, because importing / exporting keywords are compiled to require keyword.
Require keyword does not exist in client-side javascript.
To solve this issue, compiling script takes all .ts files, that are marked as shared, and removes the export keyword from them.
Then, client code is compiled, and after that, the substitution process is reverted.
Therefore, do NOT compile client and server at same time, as server compile may fail, because in one particular moment the file will not contain 'export' keyword.


3.3 Shared classes or data

Sometimes is needed to share javascript / typescript code between client and server to avoid writing duplicite code.
In order to do this, some ugly code substitution automation must be done, however, the written bash script that does it is reliable, as long as user works with it how he should.

The compilation process for shared source code (for both server and client) is as follows:


3.4 How to compile the project

This describes the necessary commands for compiling the project


Navigate to the src folder

    cd nodeJsZombies/src
  

Compile the server

    ./compile.sh
  

Compile the client

    ./compileClient.sh
  

Copy the JSON files to build folder

    ./copyJsons.sh
  

In need of restarting the server

    npm run node
  

3.5 How to clean the project

Cleaning is process of recompiling entire project again. (as is normal compiling, only changed files are compiled)


Delete the build directory (do not worry, it is tested, and compiling process will create new directory and all wil work!)

  rm -r ./build

Compile the server (this can take even hours to complete)

  ./compile.sh

Compile the client

  ./compileClient.sh

Server and client are now fully functional. You can run server.

  npm run node