search

ISG-ICS / Wildfires

7 stars 4 forks source link

[Frontend] remove angular server, replaced with static files #8

Closed AC-Unicorn closed 5 years ago

AC-Unicorn commented 5 years ago

Logits of this PR

  1. Enhance the stability of the app by removing angular server, now serving static files using backend server instead
  2. Change the appearance of user-interface to make it cleaner

Changes of this PR

  1. Disable polygon fill color
  2. Remove sidebar (comment out)
  3. Reduce default zoom level to enlarge viewport
  4. Config router for static frontend
  5. Change backend port
  6. Build static frontend with the new port, but the environment file stays unchanged.

Future improvement

  1. Current frontend doesn't support build(ng build --prod) with production mode (not capable with building in AOT(ahead of time) mode), we need to modify codebase to fulfill this requirement, the changes can be many, so I leave them in next PR.
Yicong-Huang commented 5 years ago

fix #3

Yicong-Huang commented 5 years ago

is this PR ready for review?

AC-Unicorn commented 5 years ago

Currently, we still can't build in production mode ( Or aot mode) since the leaflet error still exists. The reason is unclear. So I changed build command in "Package.json" back to default build mode. I think we can merge the PR right now, and I'll do more research about the error, since the reason might be non-trivial.

Yicong-Huang commented 5 years ago

I've just tested on server with host changed to 0.0.0.0. it still gives me the error 

ReferenceError: Can't find variable: L
AC-Unicorn commented 5 years ago

I've just tested on server with host changed to 0.0.0.0. it still gives me the error

ReferenceError: Can't find variable: L

Did you use "Empty Cache and Hard Reload"? assuming you are using chrome.

Yicong-Huang commented 5 years ago

OK that works. but it still cannot talk to backend. please change the production environment to be host='0.0.0.0' in frontend

Yicong-Huang commented 5 years ago

interesting, it still shows that

[Error] Failed to load resource: Could not connect to the server. (tweet-count, line 0)http://0.0.0.0:2333/data/recent-temp

AC-Unicorn commented 5 years ago

interesting, it still shows that

[Error] Failed to load resource: Could not connect to the server. (tweet-count, line 0)http://0.0.0.0:2333/data/recent-temp

Is the backend server running on 2333?

Yicong-Huang commented 5 years ago

yes, the backend is severing on 2333.

and I can get response with http://wildfires.ics.uci.edu:2333/data/recent-temp

Yicong-Huang commented 5 years ago

I've manually changed the environment.ts for the host to be wildfires.ics.uci.edu and it is working now.

However we'd better fix the prod mode soon.

AC-Unicorn commented 5 years ago

By adding a statement in polyfill.js, now the frontend can be compiled in production mode. Angular will build the project into two bundles, one uses ES2015 syntax another one uses ES5 syntax which is older. To be compatible with all browsers, Polyfills in angular are few lines of code which make your application compatible for different browsers.

Yicong-Huang commented 5 years ago

I will postpone merging this PR as it is a relatively hacky way. the online demo is using this branch now.

Yicong-Huang commented 5 years ago

fixed #3