This project was created with the vue-cli. Plugins can be added through the vue-cli utility, and for building the project, you can use one of the following commands.
npm install
npm run serve
npm run build
npm run build:watch
npm run build:report
npm run test:unit
For coverage
npm run coverage:unit
npm run test:e2e
Or for headless mode
npm run test:e2e -- --headless
npm run lint
In the previous section "Compiles and watch for changes for development", there is part of the solution for the integration with the backend Cylc UI Server.
Running the comment to build and watch the solution, will produce a index.html
in the ./dist/ folder. When running the Cylc Hub, you must remember to point
the static files directory to the location of your ./dist folder.
If you have a folder used a workspace, you could check out both projects in
that directory. Then, in your working copy of the Cylc Hub, it should be
enough to point the static files directory to ../cylc-ui/dist/.
This way with both Cylc Hub and Cylc UI running, you can work on either -
or both - projects. Changes done in your Tornado application should reflect immediately
or upon process restart. While the changes done in your Vue.js application
will be automatically handled by your build:watch command.
This project utilizes vue-i18n for internationalization. While this project is not part of Vue.js, it is maintained by one of the Vue.js core developers.
Messages for internationalization are kept in JSON files. Look at
src/lang/ for each locale. For example, for British English, the message
files are kept under src/lang/en-GB.
The locale is defined by a variable $i18n, which is accessible in each
component. So in a component you should be able to change the locale -
if necessary - by calling this.$i18n.locale = 'pt-BR'.
After applying changes to the code, might be a good idea to pass the new version of the application through an accessibility tool such as WAVE.
There is also a browser extension which makes testing the development version much easier.
The framework used for validation in this project is vee-validate.
For the moment, the code in this repository is created using ES6, then Babel/WebPack take care to produce the final JavaScript code executed on browsers.
TypeScript is most likely the future for us, especially as Vue.js announced their 3.x release includes porting their whole code base to TypeScript. However, we are still pending as of the time of writing a decision on the libraries used for displaying the workflow graphs.
This is an important decision, and as such may take a little longer to be over. Choosing a library that does not export types, would require us to find time to type the library and maintain that type code alongside any library updates.
So for the time being, we are continuing with ES6, and once we have chosen the project dependencies, we can assess the amount of work to adopt TypeScript given our code base, ability of other developers to adapt to TypeScript, and the ease of use of the libraries in our code base.