Merge branch '8-docker' into 'main'

dockerize application

See merge request swp-ws21-fahrtenbuch/team-einhorn/fahrtenbuch!4

server/Dockerfile

+# pull latest node image
+FROM node:lts-alpine
+
+# set container's workdir
+WORKDIR /server
+
+# install dependencies
+COPY package.json ./
+RUN npm install
+
+# copy source
+COPY . .
+
+EXPOSE 4000
+
+CMD ["npm", "run", "dev"]
\ No newline at end of file

server/package.json

+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/server.ts",
+  "scripts": {
+    "dev": "nodemon",
+    "build": "tsc",
+    "start": "node ./dist/server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "dotenv": "^10.0.0",
+    "express": "^4.17.1",
+    "pg": "^8.7.1",
+    "sequelize": "^6.9.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.13",
+    "@types/node": "^16.11.6",
+    "@types/validator": "^13.6.6",
+    "nodemon": "^2.0.14",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.4.4"
+  }
+}

server/src/server.ts

+import "dotenv/config";
+import express from "express";
+import dbInit from "./db/db_init";
+import apiRouter from "./routes";
+
+let init = async () => {
+  await dbInit();
+  const app = express();
+
+  app.use(express.json());
+  app.use(apiRouter);
+  const port = process.env.PORT || 4000;
+  app.listen(port, () => console.log(`Server listening on port: ${port}`));
+};
+
+init().then(() => {});

server/tsconfig.json

+{
+  "compilerOptions": {
+      "module": "commonjs",
+      "esModuleInterop": true,
+      "target": "es6",
+      "noImplicitAny": true,
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "outDir": "dist",
+      "baseUrl": ".",
+      "paths": {
+          "*": [
+              "node_modules/*"
+          ]
+      }
+  },
+  "include": [
+      "src/**/*"
+  ]
+}

src/client/components/home.tsx

-import * as React from "react";
-import { Link } from "react-router-dom";
-
-function Home() {
-  return (
-    <div>
-      <Link to={"/qr/testId"}>QR</Link>
-    </div>
-  );
-}
-
-export default Home;

src/client/index.tsx

-import * as React from "react";
-import { render } from "react-dom";
-import AppRouter from "./router";
-import "./css/app";
-
-function App() {
-  return <AppRouter />;
-}
-
-render(<App />, document.getElementById("app"));

src/client/router.tsx

-import * as React from "react";
-import Header from "./components/header";
-import CreateLogEntry from "./components/createLogEntry";
-import Home from "./components/home";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import VehicleTypes from "./components/vehicleTypes";
-
-function AppRouter() {
-  return (
-    <BrowserRouter>
-      <Header />
-      <div className="mainView">
-        <Switch>
-          <Route path={["/", "/home"]} component={Home} exact />
-          <Route path="/qr/:vehicleId" component={CreateLogEntry} />
-          <Route path="/vehicleTypes" component={VehicleTypes} exact />
-          <Route path="/login" exact />
-          <Route />
-        </Switch>
-      </div>
-    </BrowserRouter>
-  );
-}
-
-export default AppRouter;

src/server/server.ts

-import * as express from 'express';
-import apiRouter from './routes';
-import * as path from 'path';
-import dbInit from "./db/db_init";
-
-let init = async ()=>{
-    await dbInit();
-    const app = express();
-
-    app.use(express.static('public'));
-    app.use(express.json());
-    app.use(apiRouter);
-    app.get('/*', function(req, res) {
-        res.sendFile(path.join(__dirname, '/../public/index.html'), function(err) {
-            if (err) {
-                res.status(500).send(err)
-            }
-        })
-    })
-    const port = process.env.PORT || 3000;
-    app.listen(port, () => console.log(`Server listening on port: ${port}`));
-}
-
-init().then(() => {})

tsconfig.client.json

-{
-  "compilerOptions": {
-    "outDir": "./public/js/",
-    "noImplicitAny": true,
-    "module": "es6",
-    "moduleResolution": "node",
-    "target": "es5",
-    "jsx": "react",
-    "allowSyntheticDefaultImports": true,
-    "lib":[
-      "es2015", "dom"
-    ]
-  },
-  "include": [
-    "src/client/**/*"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

tsconfig.server.json

-{
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "noImplicitAny": true,
-    "module": "commonjs",
-    "target": "ES6",
-    "allowSyntheticDefaultImports": true,
-    "lib": [
-      "es2017"
-    ],
-    "types": [
-      "node", "express"
-    ]
-  },
-  "include": [
-    "src/server/**/*"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

webpack.config.js

-const path = require('path');
-const nodeExternals = require('webpack-node-externals');
-const ESLintPlugin = require('eslint-webpack-plugin');
-
-const serverConfig = {
-    mode: process.env.NODE_ENV || 'development',
-    entry: './src/server/server.ts',
-    module: {
-        rules: [
-            {
-                test: /\.ts?$/,
-                loader: 'ts-loader',
-                exclude: /node_modules/,
-                options: {
-                    configFile: 'tsconfig.server.json'
-                }
-            }
-        ]
-    },
-    resolve: {
-        extensions: ['.ts', '.js']
-    },
-    output: {
-        filename: 'server.js',
-        path: path.resolve(__dirname, 'dist')
-    },
-    plugins: [new ESLintPlugin({fix: true, files: "./src/server"})],
-    target: 'node',
-    node: {
-        __dirname: false
-    },
-    externals: [nodeExternals()]
-};
-
-const clientConfig = {
-    mode: process.env.NODE_ENV || 'development',
-    entry: './src/client/index.tsx',
-    devtool: 'inline-source-map',
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                loader: 'ts-loader',
-                exclude: /node_modules/,
-                options: {
-                    configFile: 'tsconfig.client.json'
-                }
-            },
-            {
-                test: /\.scss$/,
-                use: ['style-loader', 'css-loader', 'sass-loader']
-            }
-        ]
-    },
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js', '.css', '.scss']
-    },
-    plugins: [new ESLintPlugin({fix: true, files: "./src/client"})],
-    output: {
-        filename: 'app.js',
-        path: path.resolve(__dirname, 'public/js'),
-        publicPath: '/'
-    }
-};
-
-module.exports = [serverConfig, clientConfig];