[GitHub] [incubator-zipkin] abesto opened a new pull request #2618: [zipin-lens] Fix #2615: Bundle Fontawesome into the app

[GitBox <gi...@apache.org>]

abesto opened a new pull request #2618: [zipin-lens] Fix #2615: Bundle Fontawesome into the app
URL: https://github.com/apache/incubator-zipkin/pull/2618
 
 
   On #2615 the idea of migrating to Create React App was discussed. That feels like a bigger undertaking, I took the more direct route to fixing this issue.
   
   Note: https://github.com/webpack-contrib/extract-text-webpack-plugin says " Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.", and we're on Webpack v4, so I did that.
   
   ### Testing
   
   #### Dev mode
   
   ```
   cd zipkin-lens
   rm -rf node_modules
   npm install
   npm install --only=dev
   npm run start
   ```
   
   http://localhost:8000 now looks like this:
   
   ![2019-05-28-231159_478x580](https://user-images.githubusercontent.com/59982/58515845-0d54fc00-819e-11e9-852d-0c0d91ab479f.png)
   
   #### Production mode
   
   ```
   cd zipkin-lens
   rm -rf node_modules
   npm install
   npm install --only=dev
   rm -rf target
   npm run build
   cd target/classes
   ```
   
   Notice that we now have a new directory with the fonts files (the `file-loader` specified for the fonts filed can be replaced with a `url-loader` to inline the fonts into CSS if preferred):
   
   ```
   $ tree zipkin-lens
   zipkin-lens/
   ├── app-80c52891f798f53ed6c5.min.js
   ├── favicon.ico
   ├── index.html
   ├── main.80c52891f798f53ed6c5.css
   └── webfonts
       ├── fa-brands-400-921f1150167369cf4c400135a4905728.woff2
       ├── fa-brands-400-9d56249d09070f656a1c52e566448f0d.woff
       ├── fa-brands-400-ab673bac3a9e36cb1d4e54777c413fe3.ttf
       ├── fa-brands-400-ab6ad0116ae2dfcfb5f850c9d0fc363f.svg
       ├── fa-brands-400-f2594ef62455697f61dc99862c19afba.eot
       ├── fa-solid-900-1dc5b6dd4bf409a6f919be38603f76a0.woff2
       ├── fa-solid-900-20b351a6af2d523589fd193785e7d7f0.eot
       ├── fa-solid-900-63726a69fa60cb67459140ccaf679f96.ttf
       ├── fa-solid-900-997f6b1819184c54248de33c81b7bb0c.woff
       └── fa-solid-900-ab6ad0116ae2dfcfb5f850c9d0fc363f.svg
   
   1 directory, 14 files
   ```
   
   Now let's set up a simple webserver so we can look at the output:
   
   ```
   mv zipkin-lens zipkin
   python3 -m http.server
   ```
   
   http://localhost:8000/zipkin now looks like this:
   
   ![2019-05-28-231828_471x573](https://user-images.githubusercontent.com/59982/58516134-ea771780-819e-11e9-8482-5fbe79bfbb35.png)
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services