Project

The project constists of three parts:

• The front-end (./src -> when compiled ./dist) UI based on VueJS.
• The back-end API (./docker_api) uses a very simple Python Flask server, the back-end is deployed inside a docker container with the Cheerp compiler.
• The docker image for the front-end (./docker_web) that only hosts the statically build files.

One part that is not finished yet is storage, and sharing code. This is the next TODO on my list.

Build

For nodejs projects it can be difficult to setup a dev environment. It’s probably important you use a new nodejs version, at least one compatible the one used: node-v10.12.0-linux-x64.

cd node-v10.12.0-linux-x64/bin
export PATH=$PATH:$PWD

Please verify that it’s working with:

trigen@zenbook:~/projects/cheerpweb[master]> node -v
v10.12.0
trigen@zenbook:~/projects/cheerpweb[master]> npm -v
6.4.1

Then use the Makefile when developing:

• make dev - build and start a hot swapping debug server (very convenient while developing)
• make api_dev - start the API server in a docker image running on port 5000.

One note on the above: also uncomment the line that uses //localhost:5000/compile instead of https://cheerp.cppse.nl/api/compile in src/App.vue.

Other useful directives:

• make build - build the release version (in ./dist) of the UI (takes a while)
• make docker_api - build the container that hosts the Cheerp compiler + Python Flask API server.
• make docker_web - build the container that hosts the UI’s static files.
• make prepare - wget the node version for this project, extract and install it to /usr/local.
• make release - there are a bunch of other Makefile directives, but better just use this one to do everything required for a release.

Build status

Resources used for this project

Followed this readme for webpack: https://webpack.js.org/guides/getting-started/

Followed this for bulma: https://bulma.io/documentation/customize/with-webpack/

For vuejs: https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a

For devserver: https://itnext.io/vue-js-and-webpack-4-from-scratch-part-2-5038cc9deffb

Pass “reference” to child components https://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component