The frontend of Portus

Webpack and yarn

We are using webpack and yarn to manage our frontend needs. Note that this coexists with the Ruby on Rails assets pipeline. In order to build the JS, you first have to install the dependencies with:

$ yarn install

If you want to check whether all the dependencies have been successfully installed, you just have to perform the following:

$ yarn check

Once you have done this, you can simply build the frontend code with:

$ webpack --config config/webpack.js

That being said, often it is convenient to watch for changes:

$ webpack --watch --config config/webpack.js

Since this was a common operation, we added it in our package.json file, so the following is equivalent (and shorter to write):

$ yarn run webpack

Note that all this is automated in our docker-compose setup. Otherwise, in other developments (e.g. vagrant or bare metal, you will have to perform this manually).

Frameworks being used, practices, etc.

• We are using VueJS wherever we can: it gives us a lot of flexibility and it helps us to keep up with all the requirements of a modern web application.
• We are using the latest version of Javascript whenever we can (in combination with Babel, which helps us to keep things compatible with most browsers).
• We are using packages like jsdom, mocha and expect to test our Javascript code. You can find these tests in /spec/javascripts. That being said, most of behavior is tested in feature tests, which use Capybara under the hood and they can be found in /spec/features.