/worlds-of-game

Primary LanguageJavaScriptMIT LicenseMIT

Codacy Badge

Requirement : nodeJS has to be installed

@see Node.js follow recommended installation

Requirement : Java_JDK 8 has to be installed

Requirement : git bash is used as prefered shell to "push" on GitHub website

@see Git Bash follow recommended installation Install with npm

Webpack Installation

  • Project creation

Create folder of project

In this folder execute Git Bash

Or with shell

mkdir folder name
cd folder name
  • Initialization of Webpack

In Git Bash shell

npm init 
npm install webpack webpack-cli --save-dev

Webpack bundler is been installed

Complete informations in different files :

In your repository you have to see

 |- /dist
 |- /src
   |- index.js
 |- index.html
 |- webpack.config.js
 |- package.json

In src/index.js file, add

function component() {
    const element = document.createElement('div');
  
    element.innerHTML = 'Hello ' + ' webpack';
  
    return element;
  }
  
  document.body.appendChild(component());

In index.html file, add

  <!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    
  </head>
  <body>
    <script src="./www/dist/index.js"></script>
  </body>
</html>

In webpack.config.js file, add

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    }
};

In package.json file, add

{
  "name": "webpack-projet",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run dev",
    "dev": "webpack --mode=development --watch",
    "prod": "webpack --mode=production --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}

If you load index.html on browser, "Hello webpack" message is displayed.

Installation of Babel compiler

In shell

npm install babel-loader babel-core --save-dev

In webpack.config.js file, following this

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    },

add:

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
    }]
}

Dynamic server Installation

In shell

npm install browser-sync browser-sync-webpack-plugin --save-dev

In webpack.config.js file

Add

plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9000,
            server: {
                baseDir: [
                    './www/'
                ]
            },
            files: [
                'www/index.html'
            ]
        })
    ],

Run application Web

In shell

npm start

Whenever a file linked to the entry point is modified, automatically browser displays web page and actualizes this.

you should prefere local server for uses

Cordova Installation

@see installation cordova

Installation

npm install cordova

Creation a project

node_modules/.bin/cordova create MyApp

Installation Cordova in project MyApp

cd MyApp
npm install cordova

Android platform installation

./node_modules/.bin/cordova platform add android

Run application on device

./node_modules/.bin/cordova run android --device

Framework test Mocha with chai

Install with npm

npm install --save-dev mocha
npm install --save-dev chai
npm install @babel/preset-env --save-dev
npm install @babel/register --save-dev
npm install @babel/core --save-dev

In root project create ".babelrc" file and add code like that

{
    "presets": ["@babel/preset-env"]
}

In package.json file change informations like that

"scripts": {
    "test": "mocha --require @babel/register --recursive"
  },

@see installation Mocha @see installation Chai

Créer un dossier "test" ajoute un fichier "NomDuTest.spec.js" et inséré votre code de test dans le fichier.

//Exemple
var assert = require('chai').should()
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1, 2, 3].indexOf(4), -1);
    });
  });
});

Lancer le test

npm test

Connection to Webserveur (Alwaysdata)

We will connect to the Words of Game server with the following identifiers:

Login : YOU_LOGIN
Passeword: YOU_PASSWORD

Requirement

Download and install the software Filezilla.

To begin

Connection with filezilla FTP

Hote : ftp-worldsofgame.alwaysdata.net
Login : YOUR_FTP_LOGIN
Password : YOU_FTP_PASSWORD