Added option to use publicPath

Brugarolas · Dec 27, 2018 · bd2b9d8 · bd2b9d8
1 parent f50ebf2
commit bd2b9d8
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "bruga-weather",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React.js personal project made for learning purposes",
   "main": "webpack.config.js",
   "scripts": {
     "start": "webpack-dev-server --open --config ./webpack.config.js --mode development",
-    "build": "webpack -p --mode production"
+    "build": "webpack -p --mode production",
+    "gh-pages": "webpack -p --mode production --publicPath bruga-weather"
   },
   "keywords": [
     "react"
@@ -37,6 +38,7 @@
     "html-loader": "^0.5.5",
     "mini-css-extract-plugin": "^0.5.0",
     "html-webpack-plugin": "^3.2.0",
+    "html-webpack-include-assets-plugin": "^1.0.6",
     "remote-file-webpack-plugin": "^1.0.2",
     "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",

diff --git a/src/assets/styles/icons.less b/src/assets/styles/icons.less
@@ -0,0 +1,20 @@
+/** Icon assets: Check https://www.amcharts.com/free-animated-svg-weather-icons/ */
+@thunder: url('../amcharts-weather-icons/animated/thunder.svg');
+@rainy2: url('../amcharts-weather-icons/animated/rainy-2.svg');
+@rainy3: url('../amcharts-weather-icons/animated/rainy-3.svg');
+@rainy4: url('../amcharts-weather-icons/animated/rainy-4.svg');
+@rainy5: url('../amcharts-weather-icons/animated/rainy-5.svg');
+@rainy6: url('../amcharts-weather-icons/animated/rainy-6.svg');
+@rainy7: url('../amcharts-weather-icons/animated/rainy-7.svg');
+@snowy2: url('../amcharts-weather-icons/animated/snowy-2.svg');
+@snowy3: url('../amcharts-weather-icons/animated/snowy-3.svg');
+@snowy4: url('../amcharts-weather-icons/animated/snowy-4.svg');
+@snowy5: url('../amcharts-weather-icons/animated/snowy-5.svg');
+@snowy6: url('../amcharts-weather-icons/animated/snowy-6.svg');
+@day: url('../amcharts-weather-icons/animated/day.svg');
+@night: url('../amcharts-weather-icons/animated/night.svg');
+@cloudyDay1: url('../amcharts-weather-icons/animated/cloudy-day-1.svg');
+@cloudyDay3: url('../amcharts-weather-icons/animated/cloudy-day-3.svg');
+@cloudyNight1: url('../amcharts-weather-icons/animated/cloudy-night-1.svg');
+@cloudyNight3: url('../amcharts-weather-icons/animated/cloudy-night-3.svg');
+@cloudy: url('../amcharts-weather-icons/animated/cloudy.svg');
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="UTF-8">
     <title>Bruga Weather</title>
-    <link rel="stylesheet" href="/styles/fonts.css">
   </head>
   <body>
     <div id="home"></div>

diff --git a/src/ui/components/icon.js b/src/ui/components/icon.js
@@ -1,27 +1,6 @@
 import React from 'react';
 import './icon.less';
 
-/** Icon assets: Check https://www.amcharts.com/free-animated-svg-weather-icons/ */
-import '@/assets/amcharts-weather-icons/animated/thunder.svg';
-import '@/assets/amcharts-weather-icons/animated/rainy-2.svg';
-import '@/assets/amcharts-weather-icons/animated/rainy-3.svg';
-import '@/assets/amcharts-weather-icons/animated/rainy-4.svg';
-import '@/assets/amcharts-weather-icons/animated/rainy-5.svg';
-import '@/assets/amcharts-weather-icons/animated/rainy-6.svg';
-import '@/assets/amcharts-weather-icons/animated/rainy-7.svg';
-import '@/assets/amcharts-weather-icons/animated/snowy-2.svg';
-import '@/assets/amcharts-weather-icons/animated/snowy-3.svg';
-import '@/assets/amcharts-weather-icons/animated/snowy-4.svg';
-import '@/assets/amcharts-weather-icons/animated/snowy-5.svg';
-import '@/assets/amcharts-weather-icons/animated/snowy-6.svg';
-import '@/assets/amcharts-weather-icons/animated/day.svg';
-import '@/assets/amcharts-weather-icons/animated/night.svg';
-import '@/assets/amcharts-weather-icons/animated/cloudy-day-1.svg';
-import '@/assets/amcharts-weather-icons/animated/cloudy-day-3.svg';
-import '@/assets/amcharts-weather-icons/animated/cloudy-night-1.svg';
-import '@/assets/amcharts-weather-icons/animated/cloudy-night-3.svg';
-import '@/assets/amcharts-weather-icons/animated/cloudy.svg';
-
 /** Icon CSS classes: check https://openweathermap.org/weather-conditions */
 var classes = {
   thunderstorm: ['thunderstorm with light rain', 'thunderstorm with rain', 'thunderstorm with heavy rain', 'light thunderstorm', 'thunderstorm', 'heavy thunderstorm', 'ragged thunderstorm', 'ragged thunderstorm', 'thunderstorm with light drizzle', 'thunderstorm with drizzle', 'thunderstorm with heavy drizzle'],

diff --git a/src/ui/components/icon.less b/src/ui/components/icon.less
@@ -1,3 +1,5 @@
+@import (less, reference) "../../assets/styles/icons.less";
+
 .weather-icon {
   width: 100px;
   height: 100px;
@@ -7,90 +9,90 @@
   background-origin: padding-box;
   background-clip: border-box;
   background-size: contain;
-  background-image: url(/img/cloudy-day-1.svg);
+  background-image: @cloudyDay1;
   margin: -20px;
   margin-top: -6px;
 
   &.thunderstorm {
-    background-image: url(/img/thunder.svg);
+    background-image: @thunder;
   }
 
   &.lightrain {
     &.day {
-      background-image: url(/img/rainy-2.svg);
+      background-image: @rainy2;
     }
     &.night {
-      background-image: url(/img/rainy-4.svg);
+      background-image: @rainy4;
     }
   }
 
   &.rain {
     &.day {
-      background-image: url(/img/rainy-3.svg);
+      background-image: @rainy3;
     }
     &.night {
-      background-image: url(/img/rainy-5.svg);
+      background-image: @rainy5;
     }
   }
 
   &.heavyrain {
-    background-image: url(/img/rainy-6.svg);
+    background-image: @rainy6;
   }
 
   &.hail {
-    background-image: url(/img/rainy-7.svg);
+    background-image: @rainy7;
   }
 
   &.lightsnow {
     &.day {
-      background-image: url(/img/snowy-2.svg);
+      background-image: @snowy2;
     }
     &.night {
-      background-image: url(/img/snowy-4.svg);
+      background-image: @snowy4;
     }
   }
 
   &.snow {
     &.day {
-      background-image: url(/img/snowy-3.svg);
+      background-image: @snowy3;
     }
     &.night {
-      background-image: url(/img/snowy-5.svg);
+      background-image: @snowy5;
     }
   }
 
   &.heavysnow {
-    background-image: url(/img/snowy-6.svg);
+    background-image: @snowy6;
   }
 
   &.clear {
     &.day {
-      background-image: url(/img/day.svg);
+      background-image: @day;
     }
     &.night {
-      background-image: url(/img/night.svg);
+      background-image: @night;
     }
   }
 
   &.fewclouds {
     &.day {
-      background-image: url(/img/cloudy-day-1.svg);
+      background-image: @cloudyDay1;
     }
     &.night {
-      background-image: url(/img/cloudy-night-1.svg);
+      background-image: @cloudyNight1;
     }
   }
 
   &.clouds {
     &.day {
-      background-image: url(/img/cloudy-day-3.svg);
+      background-image: @cloudyDay3;
     }
     &.night {
-      background-image: url(/img/cloudy-night-3.svg);
+      background-image: @cloudyNight3;
     }
   }
 
   &.darkclouds {
-    background-image: url(/img/cloudy.svg);
+    background-image: @cloudy;
   }
 }
diff --git a/src/ui/components/new-city-card.js b/src/ui/components/new-city-card.js
@@ -1,11 +1,12 @@
 import React from 'react';
+import rainy6 from '@/assets/amcharts-weather-icons/animated/rainy-6.svg';
 import './new-city-card.less';
 
 const NewCityCard = (props) => {
   return (
     <div className="new-city-card" onClick={props.onClick} >
       <div className="container icons">
-        <img className="icon-rain" src="/img/rainy-6.svg" />
+        <img className="icon-rain" src={rainy6} />
         <i className="fas fa-city icon-city"></i>
       </div>
       <div className="container">

diff --git a/webpack.config.js b/webpack.config.js
@@ -2,10 +2,13 @@ const path = require('path');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const RemoteFilePlugin = require('remote-file-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
 
 module.exports = (env, args) => {
   const isProduction = args.mode === 'production';
 
+  const publicPath = isProduction ? '/' + (args.publicPath ? args.publicPath + '/' : '') : '/';
+
   const config = {
     entry: './src/index.js',
     stats: { children: false },
@@ -71,22 +74,29 @@ module.exports = (env, args) => {
       ]
     },
     plugins: [
-      new HtmlWebPackPlugin({
-        template: './src/index.html',
-        filename: './index.html',
-        favicon: './src/assets/logo.png',
-        inject: true
-      }),
-      new MiniCssExtractPlugin({
-        filename: "styles/bundle.css?[hash]"
-      }),
       new RemoteFilePlugin([
         {
           url: 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Roboto:100,300,400,500,700,900',
           filepath: 'styles/fonts.css',
           cache: true
         },
-      ])
+      ]),
+      new MiniCssExtractPlugin({
+        filename: "styles/bundle.css?[hash]"
+      }),
+      new HtmlWebPackPlugin({
+        template: './src/index.html',
+        filename: './index.html',
+        favicon: './src/assets/logo.png',
+        inject: true
+      }),
+      new HtmlWebpackIncludeAssetsPlugin({
+        assets: ['styles/fonts.css'],
+        resolvePaths: true,
+        publicPath: true,
+        append: true,
+        hash: true
+      })
     ],
     resolve: {
       alias: {
@@ -96,7 +106,7 @@ module.exports = (env, args) => {
     },
     output: {
       path: __dirname + '/dist',
-      publicPath: '/',
+      publicPath: publicPath,
       filename: 'js/bundle.js?[hash]'
     },
     devServer: {