Moved /app to /client

client/components/App.tsx

@@ -3,14 +3,14 @@ import * as React from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { Container } from "semantic-ui-react";
 
-import { MessagesView, NavBar } from "@app/components";
+import { MessagesView, NavBar } from "@client/components";
-import * as p from "@app/pages";
+import * as p from "@client/pages";
-import * as rp from "@app/routePaths";
+import * as rp from "@client/routePaths";
 
 // tslint:disable:ordered-imports
 import "font-awesome/css/font-awesome.css";
 import "semantic-ui-css/semantic.css";
-import "@app/styles/app";
+import "@client/styles/app";
 
 function NavContainer() {
     return (

client/components/DeviceView.tsx

@@ -3,14 +3,14 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Grid, Header, Icon, Item, SemanticICONS } from "semantic-ui-react";
 
-import * as p from "@app/pages";
+import * as p from "@client/pages";
-import * as rp from "@app/routePaths";
+import * as rp from "@client/routePaths";
-import { AppState, injectState } from "@app/state";
+import { AppState, injectState } from "@client/state";
 import { ConnectionState as ConState } from "@common/sprinklersRpc";
 import { Route, RouteComponentProps, withRouter } from "react-router";
 import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
 
-import "@app/styles/DeviceView";
+import "@client/styles/DeviceView";
 
 const ConnectionState = observer(({ connectionState, className }:
     { connectionState: ConState, className?: string }) => {
@@ -72,7 +72,7 @@ class DeviceView extends React.Component<DeviceViewProps & RouteComponentProps<a
         );
         return (
             <Item>
-                <Item.Image src={require("@app/images/raspberry_pi.png")} />
+                <Item.Image src={require("@client/images/raspberry_pi.png")} />
                 <Item.Content className="device">
                     <Header as="h1">
                         <div>Device <kbd>{id}</kbd></div>

client/components/DevicesView.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Item } from "semantic-ui-react";
 
-import DeviceView from "@app/components/DeviceView";
+import DeviceView from "@client/components/DeviceView";
 import { RouteComponentProps, withRouter } from "react-router";
 
 class DevicesView extends React.Component<{deviceId: string} & RouteComponentProps<any>> {

client/components/DurationView.tsx

@@ -4,7 +4,7 @@ import { Form, Input, InputProps } from "semantic-ui-react";
 
 import { Duration } from "@common/Duration";
 
-import "@app/styles/DurationView";
+import "@client/styles/DurationView";
 
 export default class DurationView extends React.Component<{
     label?: string,

client/components/MessageTest.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button, Segment } from "semantic-ui-react";
 
-import { AppState, injectState } from "@app/state";
+import { AppState, injectState } from "@client/state";
 import { getRandomId } from "@common/utils";
 
 class MessageTest extends React.Component<{ appState: AppState }> {

client/components/MessagesView.tsx

@@ -3,9 +3,9 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Message, MessageProps, TransitionGroup } from "semantic-ui-react";
 
-import { AppState, injectState, UiMessage, UiStore } from "@app/state/";
+import { AppState, injectState, UiMessage, UiStore } from "@client/state/";
 
-import "@app/styles/MessagesView";
+import "@client/styles/MessagesView";
 
 @observer
 class MessageView extends React.Component<{

client/components/NavBar.tsx

@@ -3,8 +3,8 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import { Menu } from "semantic-ui-react";
 
-import * as rp from "@app/routePaths";
+import * as rp from "@client/routePaths";
-import { AppState, ConsumeState, injectState } from "@app/state";
+import { AppState, ConsumeState, injectState } from "@client/state";
 
 interface NavItemProps {
     to: string;

client/components/ProgramSequenceView.tsx

@@ -4,11 +4,11 @@ import * as React from "react";
 import { SortableContainer, SortableElement, SortableHandle, SortEnd } from "react-sortable-hoc";
 import { Button, Form, Icon, List } from "semantic-ui-react";
 
-import { DurationView, SectionChooser } from "@app/components/index";
+import { DurationView, SectionChooser } from "@client/components/index";
 import { Duration } from "@common/Duration";
 import { ProgramItem, Section } from "@common/sprinklersRpc";
 
-import "@app/styles/ProgramSequenceView";
+import "@client/styles/ProgramSequenceView";
 
 type ItemChangeHandler = (index: number, newItem: ProgramItem) => void;
 type ItemRemoveHandler = (index: number) => void;

client/components/ProgramTable.tsx

@@ -4,8 +4,8 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import { Button, ButtonProps, Form, Icon, Table } from "semantic-ui-react";
 
-import { ProgramSequenceView, ScheduleView } from "@app/components";
+import { ProgramSequenceView, ScheduleView } from "@client/components";
-import * as rp from "@app/routePaths";
+import * as rp from "@client/routePaths";
 import { Program, SprinklersDevice } from "@common/sprinklersRpc";
 
 @observer

client/components/RunSectionForm.tsx

@@ -2,8 +2,8 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Form, Header, Icon, Segment } from "semantic-ui-react";
 
-import { DurationView, SectionChooser } from "@app/components";
+import { DurationView, SectionChooser } from "@client/components";
-import { UiStore } from "@app/state";
+import { UiStore } from "@client/state";
 import { Duration } from "@common/Duration";
 import log from "@common/logger";
 import { Section, SprinklersDevice } from "@common/sprinklersRpc";

client/components/ScheduleView/index.tsx

@@ -7,7 +7,7 @@ import ScheduleDate from "./ScheduleDate";
 import ScheduleTimes from "./ScheduleTimes";
 import WeekdaysView from "./WeekdaysView";
 
-import "@app/styles/ScheduleView";
+import "@client/styles/ScheduleView";
 
 export interface ScheduleViewProps {
     label?: string | React.ReactNode | undefined;

client/components/SectionChooser.tsx

@@ -5,7 +5,7 @@ import { DropdownItemProps, DropdownProps, Form } from "semantic-ui-react";
 
 import { Section } from "@common/sprinklersRpc";
 
-import "@app/styles/SectionChooser";
+import "@client/styles/SectionChooser";
 
 @observer
 export default class SectionChooser extends React.Component<{

client/components/SectionRunnerView.tsx

@@ -7,7 +7,7 @@ import { Duration } from "@common/Duration";
 import log from "@common/logger";
 import { Section, SectionRun, SectionRunner } from "@common/sprinklersRpc";
 
-import "@app/styles/SectionRunnerView";
+import "@client/styles/SectionRunnerView";
 
 interface PausedStateProps {
     paused: boolean;

client/index.tsx

@@ -3,8 +3,8 @@ import * as ReactDOM from "react-dom";
 import { AppContainer } from "react-hot-loader";
 import { Router } from "react-router-dom";
 
-import App from "@app/components/App";
+import App from "@client/components/App";
-import { AppState, ProvideState } from "@app/state";
+import { AppState, ProvideState } from "@client/state";
 import logger from "@common/logger";
 
 const state = new AppState();
@@ -30,8 +30,8 @@ const doRender = (Component: React.ComponentType) => {
 doRender(App);
 
 if (module.hot) {
-    module.hot.accept("@app/components/App", () => {
+    module.hot.accept("@client/components/App", () => {
-        const NextApp = require<any>("@app/components/App").default as typeof App;
+        const NextApp = require<any>("@client/components/App").default as typeof App;
         doRender(NextApp);
     });
 }

client/pages/LoginPage.tsx

@@ -3,10 +3,10 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Container, Dimmer, Form, Header, InputOnChangeData, Loader, Message, Segment } from "semantic-ui-react";
 
-import { AppState, injectState } from "@app/state";
+import { AppState, injectState } from "@client/state";
 import log from "@common/logger";
 
-import "@app/styles/LoginPage";
+import "@client/styles/LoginPage";
 
 class LoginPageState {
     @observable username = "";

client/pages/LogoutPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Redirect } from "react-router";
 
-import { AppState, ConsumeState } from "@app/state";
+import { AppState, ConsumeState } from "@client/state";
 
 export function LogoutPage() {
     function consumeState(appState: AppState) {

client/pages/ProgramPage.tsx

@@ -5,9 +5,9 @@ import * as React from "react";
 import { RouteComponentProps } from "react-router";
 import { Button, CheckboxProps, Form, Icon, Input, InputOnChangeData, Menu, Modal } from "semantic-ui-react";
 
-import { ProgramSequenceView, ScheduleView } from "@app/components";
+import { ProgramSequenceView, ScheduleView } from "@client/components";
-import * as rp from "@app/routePaths";
+import * as rp from "@client/routePaths";
-import { AppState, injectState } from "@app/state";
+import { AppState, injectState } from "@client/state";
 import log from "@common/logger";
 import { Program, SprinklersDevice } from "@common/sprinklersRpc";
 

client/pages/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { RouteComponentProps } from "react-router";
 
-import { DevicesView, MessageTest} from "@app/components";
+import { DevicesView, MessageTest} from "@client/components";
 
 export { LoginPage } from "./LoginPage";
 export { LogoutPage } from "./LogoutPage";

client/sprinklersRpc/WebSocketRpcClient.ts

@@ -1,7 +1,7 @@
 import { action, autorun, observable, when } from "mobx";
 import { update } from "serializr";
 
-import { TokenStore } from "@app/state/TokenStore";
+import { TokenStore } from "@client/state/TokenStore";
 import { ErrorCode } from "@common/ErrorCode";
 import * as rpc from "@common/jsonRpc";
 import logger from "@common/logger";

client/state/AppState.ts

@@ -2,9 +2,9 @@ import { createBrowserHistory, History } from "history";
 import { computed } from "mobx";
 import { RouterStore, syncHistoryWithStore } from "mobx-react-router";
 
-import { WebSocketRpcClient } from "@app/sprinklersRpc/WebSocketRpcClient";
+import { WebSocketRpcClient } from "@client/sprinklersRpc/WebSocketRpcClient";
-import HttpApi from "@app/state/HttpApi";
+import HttpApi from "@client/state/HttpApi";
-import { UiStore } from "@app/state/UiStore";
+import { UiStore } from "@client/state/UiStore";
 import ApiError from "@common/ApiError";
 import { ErrorCode } from "@common/ErrorCode";
 import log from "@common/logger";

client/state/HttpApi.ts

@@ -1,4 +1,4 @@
-import { TokenStore } from "@app/state/TokenStore";
+import { TokenStore } from "@client/state/TokenStore";
 import ApiError from "@common/ApiError";
 import { ErrorCode } from "@common/ErrorCode";
 

client/state/TokenStore.ts

@@ -1,7 +1,7 @@
 import { observable } from "mobx";
 
-import HttpApi, { ApiError } from "@app/state/HttpApi";
+import HttpApi, { ApiError } from "@client/state/HttpApi";
-import { Token } from "@app/state/Token";
+import { Token } from "@client/state/Token";
 import { TokenGrantPasswordRequest, TokenGrantRefreshRequest, TokenGrantResponse } from "@common/httpApi";
 import logger from "@common/logger";
 

client/state/reactContext.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { AppState } from "@app/state";
+import { AppState } from "@client/state";
 
 const StateContext = React.createContext<AppState | null>(null);
 

client/tsconfig.json

@@ -21,8 +21,8 @@
             "@common/*": [
                 "./common/*"
             ],
-            "@app/*": [
+            "@client/*": [
-                "./app/*"
+                "./client/*"
             ]
         }
     }

client/webpack.config.js

@@ -111,7 +111,7 @@ const rules = (env) => {
                 // Process TypeScript with TSC through HappyPack.
                 {
                     test: /\.tsx?$/, use: "happypack/loader?id=ts",
-                    include: [ paths.appDir, paths.commonDir ],
+                    include: [ paths.clientDir, paths.commonDir ],
                 },
                 // "file" loader makes sure those assets get served by WebpackDevServer.
                 // When you `import` an asset, you get its (virtual) filename.
@@ -147,7 +147,7 @@ const getConfig = module.exports = (env) => {
     const plugins = [
         new HtmlWebpackPlugin({
             inject: true,
-            template: paths.appHtml,
+            template: paths.clientHtml,
             minify: isProd ? {
                 removeComments: true,
                 collapseWhitespace: true,
@@ -161,7 +161,7 @@ const getConfig = module.exports = (env) => {
                 minifyURLs: true,
             } : undefined,
         }),
-        new FaviconsWebpackPlugin(path.resolve(paths.appDir, "images", "favicon-96x96.png")),
+        new FaviconsWebpackPlugin(path.resolve(paths.clientDir, "images", "favicon-96x96.png")),
         // Makes some environment variables available to the JS code, for example:
         // if (process.env.NODE_ENV === "production") { ... }. See `./env.js`.
         // It is absolutely essential that NODE_ENV was set to production here.
@@ -179,14 +179,14 @@ const getConfig = module.exports = (env) => {
             loaders: [{
                 loader: "ts-loader",
                 options: {
-                    configFile: paths.appTsConfig,
+                    configFile: paths.clientTsConfig,
                     happyPackMode: true,
                 },
             }],
         }),
         new ForkTsCheckerWebpackPlugin({
             checkSyntacticErrors: true,
-            tsconfig: paths.appTsConfig,
+            tsconfig: paths.clientTsConfig,
             tslint: paths.resolveRoot("tslint.json"),
         }),
         isDev && new DashboardPlugin(),
@@ -212,10 +212,10 @@ const getConfig = module.exports = (env) => {
             isDev && require.resolve("react-hot-loader/patch"),
             isDev && require.resolve("react-dev-utils/webpackHotDevClient"),
             require.resolve("./polyfills"),
-            paths.appEntry,
+            paths.clientEntry,
         ].filter(Boolean),
         output: {
-            path: paths.appBuildDir,
+            path: paths.clientBuildDir,
             pathinfo: isDev,
             filename: isProd ?
                 'static/js/[name].[chunkhash:8].js' :
@@ -231,7 +231,7 @@ const getConfig = module.exports = (env) => {
         resolve: {
             extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
             alias: {
-                "@app": paths.appDir,
+                "@client": paths.clientDir,
                 "@common": paths.commonDir,
             }
         },

common/paths.js

@@ -24,12 +24,12 @@ exports.publicPath = ensureSlash(url.parse(exports.publicUrl).pathname || "/", t
 
 exports.commonDir = resolveRoot("common");
 
-exports.appDir = resolveRoot("app");
+exports.clientDir = resolveRoot("client");
-exports.appEntry = path.resolve(exports.appDir, "index.tsx");
+exports.clientEntry = path.resolve(exports.clientDir, "index.tsx");
-exports.appHtml = path.resolve(exports.appDir, "index.html");
+exports.clientHtml = path.resolve(exports.clientDir, "index.html");
-exports.appWebpackConfig = path.resolve(exports.appDir, "webpack.config.js");
+exports.clientWebpackConfig = path.resolve(exports.clientDir, "webpack.config.js");
-exports.appTsConfig = path.resolve(exports.appDir, "tsconfig.json");
+exports.clientTsConfig = path.resolve(exports.clientDir, "tsconfig.json");
-exports.appBuildDir = resolveRoot("public");
+exports.clientBuildDir = resolveRoot("public");
 exports.publicDir = exports.appBuildDir;
 
 exports.serverDir = resolveRoot("server");

common/tsconfig.json

@@ -17,8 +17,8 @@
             "@common/*": [
                 "./common/*"
             ],
-            "@app/*": [
+            "@client/*": [
-                "./app/*"
+                "./client/*"
             ]
         }
     },

docker-compose.dev.yml

@@ -11,7 +11,7 @@ services:
       - "8080:8080"
       - "8081:8081"
     volumes:
-      - ./app:/app/app
+      - ./client:/app/client
       - ./common:/app/common
       - ./server:/app/server
     env_file:

package.json

@@ -6,18 +6,18 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "rm -rf ./dist ./build ./public",
-    "build:app": "NODE_ENV=production webpack --config ./app/webpack.config.js --env prod",
+    "build:client": "NODE_ENV=production webpack --config ./client/webpack.config.js --env prod",
     "build:server": "tsc --project server",
     "build": "run-p build:*",
-    "watch:app": "yarn build:app --watch",
+    "watch:client": "yarn build:client --watch",
     "watch:server": "yarn build:server --watch",
-    "start:dev-server": "NODE_ENV=development webpack-dev-server --config ./app/webpack.config.js --env dev",
+    "start:dev-server": "NODE_ENV=development webpack-dev-server --config ./client/webpack.config.js --env dev",
     "start": "NODE_ENV=development node dist/server/index.js",
     "start:pretty": "yarn start | node dist/server/logging/prettyPrint.js",
     "start:nodemon": "nodemon --delay 0.5 --exec \"env NODE_ENV=development node dist/server/index.js | node dist/server/logging/prettyPrint.js\"",
     "start:watch": "run-p watch:server start:nodemon",
     "start:dev": "run-p start:dev-server start:watch",
-    "lint:app": "tslint --project app --force --format verbose",
+    "lint:client": "tslint --project client --force --format verbose",
     "lint:server": "tslint --project server --force --format verbose",
     "lint": "run-p lint:*"
   },

server/express/serveApp.ts

@@ -7,7 +7,7 @@ import * as paths from "@common/paths";
 const index = path.join(paths.publicDir, "index.html");
 
 export default function serveApp(app: Express) {
-    app.use(serveStatic(paths.appBuildDir));
+    app.use(serveStatic(paths.clientBuildDir));
     app.get("/*", (req, res) => {
         res.sendFile(index);
     });

server/tsconfig.json

@@ -21,8 +21,8 @@
       "@common/*": [
         "./common/*"
       ],
-      "@app/*": [
+      "@client/*": [
-        "./app/*"
+        "./client/*"
       ]
     }
   },