Fixed build process a bit more; plus other stuff

8 years ago · 9632d35e23
7 changed files with 53 additions and 9 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
				@@ -1,3 +1,4 @@
 /node_modules
 npm-debug*
+/build
 /dist
--- a/app/index.html
+++ b/app/index.html
@ -0,0 +1,12 @@
				@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Sprinklers3</title>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>
--- a/app/script/App.tsx
+++ b/app/script/App.tsx
@ -38,10 +38,10 @@ class ProgramRow extends React.PureComponent<{ program: Program }, void> {
				@@ -38,10 +38,10 @@ class ProgramRow extends React.PureComponent<{ program: Program }, void> {
@observer
 class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void> {
    render() {
-        const { id, connected, sections, programs } = this.props.device; //src={require("app/images/raspberry_pi.png")}
+        const { id, connected, sections, programs } = this.props.device;
        return (
            <Item>
-                <Item.Image  />
+                <Item.Image src={require<string>("app/images/raspberry_pi.png")} />
                <Item.Content>
                    <Header as="h1">
                        <span>Device </span><kbd>{id}</kbd>
--- a/app/script/index.tsx
+++ b/app/script/index.tsx
@ -9,8 +9,7 @@ const client = new MqttApiClient();
				@@ -9,8 +9,7 @@ const client = new MqttApiClient();
 client.start();
 const device = client.getDevice("grinklers");

-const rootElem = document.createElement("div");
-document.body.appendChild(rootElem);
+const rootElem = document.getElementById("app");

 ReactDOM.render(<AppContainer>
    <App device={device} />
--- a/package.json
+++ b/package.json
@ -6,9 +6,9 @@
				@@ -6,9 +6,9 @@
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rm -rf ./dist",
-    "build": "webpack",
-    "start:dev": "webpack-dev-server"
+    "clean": "rm -rf ./dist ./build",
+    "build": "webpack --config ./webpack/prod.config.js",
+    "start:dev": "webpack-dev-server --config ./webpack/dev.config.js"
  },
  "repository": {
    "type": "git",
--- a/webpack/dev.config.js
+++ b/webpack/dev.config.js
@ -11,7 +11,7 @@ module.exports = {
				@@ -11,7 +11,7 @@ module.exports = {
    ],
    devtool: "inline-source-map",
    output: {
-        path: path.resolve(__dirname, "dist"),
+        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    resolve: {
@ -29,7 +29,7 @@ module.exports = {
				@@ -29,7 +29,7 @@ module.exports = {
    },
    plugins: [
        new HtmlWebpackPlugin({
-            title: "sprinklers3"
+            template: "./app/index.html"
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
--- a/webpack/prod.config.js
+++ b/webpack/prod.config.js
@ -0,0 +1,32 @@
				@@ -0,0 +1,32 @@
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+    entry: [
+        "./app/script/index.tsx"
+    ],
+    devtool: "none",
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "bundle.js"
+    },
+    resolve: {
+        extensions: [".ts", ".tsx", ".js"],
+        alias: {
+            app: path.resolve("./app")
+        }
+    },
+    module: {
+        rules: [
+            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
+            { test: /\.css$/, loader: "style-loader!css-loader" },
+            { test: /\.(ttf|eot|svg|woff(2)?|png|jpg)(\?[a-z0-9=&.]+)?$/, loader: "file-loader" }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "./app/index.html"
+        })
+    ]
+};