teocci / js-fijs-sample Goto Github PK

This basic implementation shows how to use FIJS with npm and webpack.

• Create a new module using npm:

npm init

• Add webpack and plugins:

npm i webpack webpack-cli --save-dev
npm i webpack-dev-server --save-dev
npm i css-loader --save-dev
npm i copy-webpack-plugin --save-dev

• Create directories src, img and css:

mkdir src
mkdir css
mkdir img

• Copy package.json and webpack.config.js files from this repository into your project directory.

• In the src directory copy index.html and index.js

• Install FIJS:

npm i flight-indicators-js@latest

• Copy the svg images form the library into the img directory

cp -v node_modules/flight-indicators-js/img/*.svg ./img

• Copy the flight-indicators.css file form the library into the css directory

cp -v node_modules/flight-indicators-js/css/flight-indicators.css ./css

• Your directory must look like:

project/
|-css/
    |-flight-indicators.css
    |-style.css
|-img/
    |-*.svg
|-src/
    |-index.js
    |-index.html
|-package.json
|-webpack.config.js

• Finally, start the dev server:

npm run start

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
...
webpack 5.65.0 compiled successfully in 847 ms

• Then open http://localhost:8080/ in your browser.

Teocci ([email protected])

The code supplied here is covered under the MIT Open Source License.

Flight Indicators JS svg images was developed based on Flight Indicators jQuery plugin.