Use webpack-dev-server with hot reloading for development (#29)

docker-compose.yml

@@ -33,4 +33,6 @@ services:
       - .:/work:cached
       - node-modules:/work/node_modules:delegated
     tty: true
-    command: sh -c 'yarn install && yarn run web:watch'
+    ports:
+     - "8080:8080"
+    command: sh -c 'yarn install && yarn run web:devserver'

package.json

@@ -8,9 +8,10 @@
     "axios": "^0.18.0",
     "coffee-loader": "^0.9.0",
     "coffeescript": "^2.2.4",
+    "css-hot-loader": "^1.3.9",
     "css-loader": "^0.28.11",
     "date-fns": "^1.29.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.8.3",
     "normalize.css": "^8.0.0",
     "npm-run-all": "^4.1.2",
@@ -28,9 +29,12 @@
     "vuex": "^3.0.1",
     "webpack": "^4.4.1",
     "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.4",
     "zopfli-webpack-plugin": "^0.1.0"
   },
   "scripts": {
+    "web:devserver":
+      "webpack-dev-server --host 0.0.0.0 --colors --mode development",
     "web:build": "webpack --mode development",
     "web:build:release": "webpack --mode production",
     "web:watch": "webpack --mode development --watch"

src/crankypants.cr

@@ -6,6 +6,7 @@ module Crankypants
     setting database_uri : String
     setting port : Int32
     setting interface : String
+    setting asset_host : String
   end
 
   def self.prepare_database
@@ -27,4 +28,5 @@ Crankypants.configure do
   settings.database_uri = "sqlite3://./data/crankypants.db"
   settings.port = 3000
   settings.interface = "0.0.0.0"
+  settings.asset_host = ""
 end

src/crankypants/web/view.cr

@@ -16,6 +16,12 @@ module Crankypants
           render_template({{ filename }})
         {% end %}
       end
+
+      macro asset_url(filename)
+        url = "/#{Crankypants::Web::ASSET_PATH}/{{ filename.id }}"
+        host = Crankypants.settings.asset_host
+        host.empty? ? url : "//#{host}#{url}"
+      end
     end
   end
 end

src/crankypants/web/views/app.slang

@@ -4,7 +4,7 @@ html
     meta name="viewport" content="width=device-width,initial-scale=1.0"
     meta charset="utf-8"
     title Crankypants App
-    link rel="stylesheet" type="text/css" href="/#{Crankypants::Web::ASSET_PATH}/app.css"
-    script type="application/javascript" src="/#{Crankypants::Web::ASSET_PATH}/app-bundle.js" defer=true
+    link rel="stylesheet" type="text/css" href="#{Crankypants::Web::View.asset_url("app.css")}"
+    script type="application/javascript" src="#{Crankypants::Web::View.asset_url("app-bundle.js")}" defer=true
   body
     #app

src/crankypants/web/views/layouts/blog.slang

@@ -4,8 +4,8 @@ html
     meta name="viewport" content="width=device-width,initial-scale=1.0"
     meta charset="utf-8"
     title = page_title
-    link rel="stylesheet" type="text/css" href="/#{Crankypants::Web::ASSET_PATH}/blog.css"
-    script type="application/javascript" src="/#{Crankypants::Web::ASSET_PATH}/blog-bundle.js" defer=true
+    link rel="stylesheet" type="text/css" href="#{asset_url("blog.css")}"
+    script type="application/javascript" src="#{asset_url("blog-bundle.js")}" defer=true
   body
     header role="main"
       .container

src/crankypants_cli.cr

@@ -19,6 +19,10 @@ OptionParser.parse! do |parser|
     Crankypants.settings.interface = interface
   end
 
+  parser.on "--asset-host HOST", "Host to load assets from (default: blank)" do |arg|
+    Crankypants.settings.asset_host = arg
+  end
+
   parser.on "-h", "--help", "Show this help" do
     puts parser
     exit

support/sentry.cr

@@ -4,6 +4,7 @@ sentry = Sentry::ProcessRunner.new(
   process_name: "Crankypants DEV",
   build_command: "crystal build ./src/crankypants_cli.cr -o ./crankypants",
   run_command: "./crankypants",
+  run_args: ["--asset-host", "localhost:8080"],
   files: ["./src/**/*.cr", "./src/**/*.ecr", "./src/**/*.slang"]
 )
 

webpack.config.coffee

@@ -4,7 +4,7 @@
 CleanWebpackPlugin = require "clean-webpack-plugin"
 path = require "path"
 webpack = require "webpack"
-ExtractTextPlugin = require "extract-text-webpack-plugin"
+MiniCssExtractPlugin = require "mini-css-extract-plugin"
 ZopfliPlugin = require "zopfli-webpack-plugin"
 
 
@@ -23,15 +23,12 @@ rules = (env, argv) ->
 
   r.push
     test: /\.(s?)css$/
-    use: ExtractTextPlugin.extract
-      fallback: "style-loader"
-      use: [
-        loader: "css-loader"
-        options:
-          minimize: true
-      ,
-        "sass-loader"
-      ]
+    use: [
+      "css-hot-loader"
+      MiniCssExtractPlugin.loader
+      "css-loader"
+      "sass-loader"
+    ]
 
   r
 
@@ -42,14 +39,18 @@ plugins = (env, argv) ->
 
   p.push new CleanWebpackPlugin ["public/assets"]
 
-  p.push new ExtractTextPlugin
+  p.push new MiniCssExtractPlugin
     filename: "[name].css"
+    chunkFilename: "[id].css"
 
   if argv.mode == "production"
     p.push new ZopfliPlugin
       asset: "[path].gz"
       algorithm: "zopfli"
       minRatio: 0
+  else # development
+    p.push new webpack.NamedModulesPlugin
+    p.push new webpack.HotModuleReplacementPlugin
 
   p
 
@@ -64,7 +65,7 @@ module.exports = (env, argv) ->
   output:
     path: __dirname + "/public/assets"
     filename: "[name]-bundle.js"
-    publicPath: "/assets"
+    publicPath: "http://localhost:8080/assets"
 
   module:
     rules: rules(env, argv)
@@ -76,5 +77,19 @@ module.exports = (env, argv) ->
 
   plugins: plugins(env, argv)
 
+  devServer:
+    inline: true
+    hot: true
+    public: "localhost:8080"
+    contentBase: __dirname + "/public/assets"
+    headers: { "Access-Control-Allow-Origin": "*" }
+    overlay:
+      warnings: true
+      errors: true
+    watchOptions:
+      ignored: /node_modules/
+    stats:
+      colors: true
+
   watchOptions:
     ignored: /node_modules/