Build CzechIdM Frontend

This tutorial is deprecated. Use this tutorial instead.

Install Node.js

Download and install Node.js for your OS.

Required Node.js version is 4.x.x.

Required npm version is 3.6 or higher.

Instalation on linux (Fedora)

sudo dnf install nodejs

Check nodejs version:

node -v

Check npm version:

npm -v

For update nodejs from 0.x versions:

Install gulp as global

Required Gulp version is 3.9.0

npm install gulp@3.9.0 -g

Check gulp version:

gulp -v

Install dependencies for application module

Go to czechidm-app directory.

cd czechidm-app

This basic application module keeps dependencies for other sub-modules. This module will start whole application.

Run script modules-link defined in package.json. This script will create directory node_modules in parent directory and its symlink in czechidm-app. The goal is to have only one node_modules directory (for all ours modules) with React. This prevents the problem with multiple copies of React. React problem

On Windows, you have to create symlink with command 'mklink /D'. See tips below.
npm run modules-link

Install basic dependencies for application module. This is common for all submodules.

npm install

Install the dependencies for core module

Now you need to install core module. So go to core directory (it's possible to use symlink from czechidm-modules).

cd czechidm-modules/czechidm-core

Install NPM dependencies. Most of the dependencies are installed within czechidm-core module. It is important for avoiding problems with multiple copies of React. In this module, React is used only in peer dependencies. Peer dependency warnings are OK.

npm install

Go back to app module.

cd ../../

(Optional) Install dependencies for other sub modules

Now you can install other application modules. It's recommended to install at least the module czechidm-acc.

Here is how to install optional example module czechidm-example.

All application modules are in czechidm-modules directory (in czechidm-app). Go to folder and create symlink to example module.

cd czechidm-modules
ln -s ../../czechidm-example
On Windows, you have to create symlink with command 'mklink /D'. See tips below.

Go to the example module. You can use symlink in czechidm-modules.

cd czechidm-example

Install NPM dependencies.

npm install

Go to app module.

cd ../../

Finish all modules together

After we have installed all required modules, we have to copy them together. It means creating symlinks from czechidm-modules to app node_modules.

gulp makeModules

Test

gulp test

For watch use test-watch (will work after compiling application … it means after run "gulp" or "gulp build" or "gulp test")

npm run test-watch

Test via gulp (for profile "default" and stage "test". Profile and stage arguments are supported. Profiles could be defined in configuration):

gulp test -p default -s test

Development mode with livereload

gulp

For run with specific profile and stage use:

gulp -p default -s test

default value for profile is default and for stage argument is development.

Build

When you are done, a production ready version of the JS bundle can be created:

gulp build -p default -s test

The built application will be located in dist folder. Application could be deployed to any http server (e.g. Apache).

Syntax verification is executed automatically in every application build and start via gulp

If you want to verify code syntax, go to app module and run:

npm run lint

This will check syntax in app module and in all czechidm linked modules (from directory czechidm-modules).

gulp lint

Does the same check as previous command, but it runs as gulp task.

When you want to unmount some optional module, you have to delete it (or its symlink) from czechidm-modules. Then clear all modules from app node_modules and make new compilation of modules.

rm -r czechidm-modules/czechidm-example
npm prune
gulp makeModules
mklink /D d:\Projekty\BCV\CzechIdMng\Realization\frontend\czechidm-app\czechidm-modules\czechidm-acc d:\Projekty\BCV\CzechIdMng\Realization\frontend\czechidm-acc