Front Overview

HTTP or HTTPS?

By default the local dev server is using HTTP (port 80). You can use the HTTPS by changing the port to 443. You will need to provide a valid certificat or to generate one for development purposes.

You can find more information to generate your certificat here (Online - 12/19/2016).

These are the lines to change:

webpack.config.js

devServer: {
    inline: true,
    historyApiFallback: true,
    noInfo: true,
    port: 80,
    host: 'www.sharinfo.io',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },
  devtool: '#eval-source-map'
}

---

Features & Technologies

Front-end components

• Webpack 2
• Vue.js 2.0
• Vue-router
• Vue-Resource
• VueX
• Vue-SocketIO
• Bootstrap 3
• jQuery 3.1.1

We will make a quick description of the features below.

Webpack 2.0

Webpack is used to make the development easier and simpler. Combined with Vue.js, we can module each view and produce a better workflow. More description here: Webpack configuration wiki.

---

Vue.js 2.0

Vue.js is a light and powerful JS framework. In some points it is very similar to Angular 2.0. If you know Angular you will understand most of the features of Vue.js.
More information here: Documentation Vue.js 2.0.

---

Vue-router

Vue-router is a plugin to handle routes with Vue.js.
More information here : Vue-router.

---

Vue-Resource Vue-resource is a plugin to provide services for making web requests and handle responses using a XMLHttpRequest or JSONP.
More information here : Vue-Resource.

---

VueX Vuex is a state management pattern + library for Vue.js applications.
More information here: VueX.

---

Vue-SocketIO Vue-SocketIO is a plugin to use web sockets (SocketIO, real-time engine) with Vue.js.
More about sockets here : Socket.io.

---

Bootstrap 3 & jQuery 3.1.1 Do we need to present them?

• Bootstrap
• jQuery

---

Customize the App (config.js)

You can customize some options in the app by modifying the config.js file present into the 'src/' folder. The following options are customizable:

• Domain The domain of the application use to set Cookies.
• API URL The base URL of the API to talk with. (without /api/)
• Email Contact The contact e-mail available in the contact view.
• TTL (Time To Live) of an information in days Use to set the max expiry for the datetime pickers.
  /!\ MUST be the same as the server.

Example of the file:

src/Config.js

'use strict';

export default {

domain: '.<your_domain>',
urlAPI: '<your_API_URL>',
contactEmail: <your_@Mail>,
infoTTL: <value>  
};

---

Web Dependencies

We use Font Awesomes, Bootstrap CSS and Google recaptcha with CDN.
You will find the references in the index.html file.

< head > marker

<script src="https://use.fontawesome.com/94d57420a4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity_no="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

< /body > marker

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

More information about Google reCAPTCHA here.