Configure webpack to run properly in docker environment

marclerodrigues · marclerodrigues · commit b3e6fa30f4cd · 2017-05-01T14:59:33.000-03:00
diff --git a/.env b/.env
@@ -1,9 +1,11 @@
-ASSET_HOST=localhost:3000
+ASSET_HOST=localhost:8080
 APPLICATION_HOST=localhost:3000
 PORT=3000
 SECRET_KEY_BASE=development_secret
 SMTP_ADDRESS=smtp.example.com
 SMTP_DOMAIN=example.com
 SMTP_PASSWORD=password
 SMTP_USERNAME=username
+DEV_SERVER_URL=http://locahost:8080
+NODE_ENV=development
 
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>App</title>
+    <title><%= yield :title %></title>
     <%= csrf_meta_tags %>
 
-    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag    'application', media: 'all' %>
   </head>
 
   <body>
     <%= yield %>
+    <%= javascript_include_tag 'application' %>
+    <%= javascript_pack_tag 'application' %>
   </body>
 </html>
diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js
@@ -5,14 +5,18 @@ const { env } = require('process')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 
+const defaultPaths = require('./paths');
+
 const configPath = resolve('config', 'webpack')
 const loadersDir = join(__dirname, 'loaders')
-const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
+const customPaths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
+const paths = customPaths ? customPaths : defaultPaths
 const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
 
 // Compute public path based on environment and ASSET_HOST in production
 const ifHasCDN = env.ASSET_HOST !== undefined && env.NODE_ENV === 'production'
-const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`
+const defaultServerUrl = devServer ? `http://${devServer.host}:${devServer.port}` : env.DEV_SERVER_URL
+const devServerUrl = `${defaultServerUrl}/${paths.entry}/`
 const publicUrl = ifHasCDN ? `${env.ASSET_HOST}/${paths.entry}/` : `/${paths.entry}/`
 const publicPath = env.NODE_ENV !== 'production' ? devServerUrl : publicUrl
 
diff --git a/config/webpack/paths.js b/config/webpack/paths.js
@@ -0,0 +1,22 @@
+module.exports = {
+  config: 'config/webpack',
+  entry: 'packs',
+  output: 'public',
+  manifest: 'manifest.json',
+  node_modules: 'node_modules',
+  source: 'app/javascript',
+  extensions:
+    [
+      '.coffee',
+      '.js',
+      '.jsx',
+      '.sass',
+      '.scss',
+      '.css',
+      '.png',
+      '.svg',
+      '.gif',
+      '.jpeg',
+      '.jpg'
+    ]
+}
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -26,11 +26,13 @@ services:
 
   webpack:
     image: jmfirth/webpack
-    command: webpack-dev-server --hot --inline --progress --host 0.0.0.0 --config config/webpack.config.js
+    command: webpack-dev-server --hot --inline --progress --color --host 0.0.0.0 --config config/webpack/development.js
     ports:
-      - '3808:3808'
+      - '8080:8080'
     volumes:
       - .:/app
+    env_file:
+      - .env
 
 volumes:
   bundle_path:
