Sencha CMD

Parkour's frontend currently uses (Sencha) Ext JS framework version 6.2.0.981.

Sencha provides a CLI tool, Sencha CMD, that automates many tasks related to creating and maintaining an Ext JS application. In the context of developing Parkour, the sencha app build command is one of the most useful CLI tools used for building the application.

Install Sencha CMD

The closest version for Sencha CMD is 6.2.0.103.

Install dependencies

For Linux, Sencha CMD does not come pre-bundled with a relevant Java Runtime Environment, which must be therefore installed prior to installing Sencha CMD.

1. Install the Java dependencies

Debian:

sudo apt install nvidia-openjdk-8-jre

CentOS 7:

sudo yum install java-1.8.0-openjdk java-11-openjdk-devel

Ubuntu 20:

sudo apt install default-jre

2. Install Node 18

CentOS 7:

Add NodeSource repository

sudo curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -
sudo yum install nodejs

Install Sencha CMD

1. Get and install Sencha CMD

wget http://cdn.sencha.com/cmd/6.2.0.103/no-jre/SenchaCmd-6.2.0.103-linux-amd64.sh.zip
unzip SenchaCmd-6.2.0.103-linux-amd64.sh.zip
./SenchaCmd-6.2.0.103-linux-amd64.sh # Follow the installer's instructions

2. Check that Sencha CMD has been successfully installed

sencha help

Build Parkour's frontend

1. Navigate to parkour2/backend/static/main-hub
2. Build app

sencha app build  ## or: sencha app build <production|development>

3. Collect the updated Ext JS files into parkour2/backend/staticfiles

Either manually, by navigating to parkour2/ and running

./manage.py collectstatic --noinput --settings=wui.settings.dev # or ./manage.py collectstatic --noinput --settings=wui.settings.prod

Or using our Makefile rule:

make collect-static

Note

We only have to build the app when there are changes to the assets like CSS files. For other updates, such as changes to JS files, we only have to collect the updated Ext JS files.

Troubleshooting

If you receive an error such as the following

Auto configuration failed
140553343227840:error:25066067:DSO support routines:DLFCN_LOAD:could not load the shared library:dso_dlfcn.c:185:filename(libssl_conf.so): libssl_conf.so: cannot open shared object file: No such file or directory
140553343227840:error:25070067:DSO support routines:DSO_load:could not load the shared library:dso_lib.c:244:
140553343227840:error:0E07506E:configuration file routines:MODULE_LOAD_DSO:error loading dso:conf_mod.c:285:module=ssl_conf, path=ssl_conf
140553343227840:error:0E076071:configuration file routines:MODULE_RUN:unknown module name:conf_mod.c:222:module=ssl_conf
[ERR] 
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: PhantomJS sass build exited with code : 1
[ERR]   at org.apache.t
[ERR] ools.ant.Target.execute(Target.java:392)
[ERR] 
[ERR] Total time: 18 seconds
[ERR] The following error occurred while executing this line:
parkour2/backend/static/main-hub/.sencha/app/build-impl.xml:285: The following error occurred while executing this line:
parkour2/backend/static/main-hub/.sencha/app/sass-impl.xml:189: The following error occurred while executing this line:
parkour2/backend/static/main-hub/.sencha/app/sass-impl.xml:224: com.sencha.exceptions.ExBuild: PhantomJS sass build exited with code : 1

Setting OPENSSL_CONF to /dev/null should get rid of the problem

export OPENSSL_CONF=/dev/null