WIP

.sassrc.js

@@ -4,8 +4,6 @@ const CWD = process.cwd()
 
 module.exports = {
   "includePaths": [
-    path.resolve(CWD, 'node_modules'),
-    path.resolve(CWD, 'node_modules', "@blueprintjs"),
-    path.resolve(CWD, 'webpack')
+    "node_modules"
   ]
 }

app/controllers/dashboard_controller.rb

@@ -1,6 +1,16 @@
 class DashboardController < ApplicationController
   before_action :set_global_config
-
+  OUTPUT_DIR = "public/webpack"
+  BUNDLES = {
+    app_bundle:     "./webpack/entry.tsx",
+    app_bundle:     "./webpack/entry.tsx",
+    front_page:     "./webpack/front_page/index.tsx",
+    front_page:     "./webpack/front_page/index.tsx",
+    password_reset: "./webpack/password_reset/index.tsx",
+    password_reset: "./webpack/password_reset/index.tsx",
+    tos_update:     "./webpack/tos_update/index.tsx",
+    tos_update:     "./webpack/tos_update/index.tsx",
+  }
   def tos_update
     # I want to keep an eye on this one in prod.
     # If `tos_update` is firing without us knowing about it, it could cause a

app/views/dashboard/_common_assets.html.erb

@@ -15,7 +15,8 @@ window.process = {
 </script>
 <%= render "addons" %>
 <meta content="width=device-width, initial-scale=1" name="viewport">
-<%= stylesheet_link_tag 'application' %>
+<%= stylesheet_link_tag "application" %>
+<%= stylesheet_link_tag "/webpack/_index.css" %>
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
 <%# Rails.env.production? ? javascript_include_tag(*webpack_asset_paths("new_commons")) : "" %>
 <% if false %>

docker-compose.yml

@@ -51,14 +51,14 @@ services:
      - RABBITMQ_CONFIG_FILE=/farmbot/farmbot_rmq_config
     volumes:
      - ./docker_volumes/rabbit:/farmbot
-  webpack:     # ====================
-    <<: *base_config
-    image: node:10.15.0
-    working_dir: /farmbot
-    command: ./node_modules/.bin/webpack-dev-server --config config/webpack.config.js
-    volumes:
-      - .:/farmbot
-    ports: ["3808:3808"] # Webpack Dev Server
+  # webpack:     # ====================
+  #   <<: *base_config
+  #   image: node:10.15.0
+  #   working_dir: /farmbot
+  #   command: ./node_modules/.bin/webpack-dev-server --config config/webpack.config.js
+  #   volumes:
+  #     - .:/farmbot
+  #   ports: ["3808:3808"] # Webpack Dev Server
   delayed_job: # ====================
     <<: *base_config
     <<: *rails

webpack/css/_index.scss

@@ -1,8 +1,7 @@
 // Blueprint
-@import "~normalize.css";
-@import "~@blueprintjs/core/lib/css/blueprint";
-@import "~@blueprintjs/icons/lib/css/blueprint-icons";
-// Partials
+// @import "~normalize.css";
+@import "@blueprintjs/core/lib/css/blueprint";
+// @import "@blueprintjs/icons/lib/css/blueprint-icons"; // Partials
 @import "animations";
 @import "colors";
 @import "fonts";

webpack/entry.tsx

@@ -8,7 +8,6 @@ import { shortRevision } from "./util";
 import { stopIE } from "./util/stop_ie";
 import { init } from "i18next";
 import { attachAppToDom } from "./routes";
-
 stopIE();
 
 console.log(shortRevision());

webpack/front_page/front_page.tsx

@@ -17,9 +17,8 @@ import { Content } from "../constants";
 import { LaptopSplash } from "./laptop_splash";
 import { TermsCheckbox } from "./terms_checkbox";
 
-export const attachFrontPage = () => {
-  attachToRoot(FrontPage, {});
-};
+export const attachFrontPage =
+  () => attachToRoot(FrontPage, {});
 
 const showFor = (size: string[], extraClass?: string): string => {
   const ALL_SIZES = ["xs", "sm", "md", "lg", "xl"];

webpack/front_page/index.tsx

@@ -1,5 +1,3 @@
-import "../css/_index.scss";
-import "../css/laptop_splash.scss";
 import { detectLanguage } from "../i18n";
 import * as i18next from "i18next";
 import { stopIE } from "../util/stop_ie";

webpack/routes.tsx

@@ -1,4 +1,3 @@
-import "./css/_index.scss";
 import * as React from "react";
 import { store as _store } from "./redux/store";
 import { history } from "./history";

webpack/tos_update/component.tsx

@@ -6,7 +6,6 @@ import { AuthState } from "../auth/interfaces";
 import { Session } from "../session";
 import { prettyPrintApiErrors } from "../util";
 import { API } from "../api";
-import "../css/_index.scss";
 import { Row, Col, Widget, WidgetHeader, WidgetBody } from "../ui";
 import { TermsCheckbox } from "../front_page/terms_checkbox";