Local Development Frontend Tutorial

fabiankirstein commented 5 years ago

Our initial concept is not working anymore. We will investifate further.

fabiankirstein commented 5 years ago

Will come this week....

fabiankirstein commented 5 years ago

A first test:

Install serveStatic module: npm install serve-static --save-dev
- Add the following line Gruntfile.js at top: var serveStatic = require('serve-static');
- Replace all occurrences of connect.static with serveStatic
In /app/scripts/js/util.js: getLocationBase() and getApiLocationBase() Replace location.protocol + "//" + location.hostname +":" + getPort() with 'http://bbc6.sics.se:8080'
- Use grunt serve to run web server
- Disable CORS in web browser

fabiankirstein commented 5 years ago

@cbotsikas Can you try this before we make more formal description?

cbotsikas commented 5 years ago

@FabiApfelkern yes, i'll check it.

cbotsikas commented 5 years ago

@FabiApfelkern I've tried it but I could only make it work with an extension on Firefox. With Chrome although it should have the cors disabled, it still complained about them. You forgot to mention that we also need to run 'npm install' (obviously) and 'bower install'. Since i don't like that we need to modify the application's code to make this solution work (someone could accidentally commit those changes) along with the fact that disabling CORS is not a good idea, here's a solution using local proxy to the live server (currently, I only found the need for /hopsworks-api, do we need more?):

Install required modules: npm install and bower install
Install serveStatic module: npm install serve-static --save-dev
Install grunt-connect-proxy module: npm install grunt-connect-proxy --save-dev
Modify Gruntfile.js according to my attached patch: hopsLocal.zip
Use command grunt serve to run local web server

Note that I had to modify port from 9000 to 9001 because for some reason there's a check while determining the port to connect to the api and was changing the port to 8080.... 😕

fabiankirstein commented 5 years ago

Thanks @cbotsikas. Yes, I also don't like to change the code. But does your solution also change the code? @michaelalemu Can you check this?

cbotsikas commented 5 years ago

Yes i do modify the Gruntfile.js and the package.json files but those, i guess, are acceptable changes that we can afford to do permanently on the repo. I'm not changing any application source file. We could have a separate repo with all the necessary code to run and develop locally. I can investigate further if for some reason we shouldn't apply my modification in this repo.

michaelalemu commented 5 years ago

Thanks @cbotsikas. Yes, I also don't like to change the code. But does your solution also change the code? @michaelalemu Can you check this?

I've checked it and @cbotsikas solution seems to be working fine.

cbotsikas commented 5 years ago

I've changed the latest frontend module in order to support our local development method, without the need of changing any files.

Please note that the latest code is under the aegis-0.6 branch and the working directory is aegis-web/yo. Install all requirements executing:

npm install
bower install

and run your local UI using the grunt serve command

This should open your browser at http://localhost:9001 using our live server at http://bbc6.sics.se:8080

Also note that, all requests are proxied via localhost so that from your browser you shouldn't see any requests to bbc6.sics.se:8080.

fabiankirstein commented 5 years ago

I guess we can close this?

cbotsikas commented 5 years ago

Yes, this was forgotten open..

aegisbigdata / documentation

Local Development Frontend Tutorial #66