Create basic React application

Saluev · Mar 6, 2019 · b2ce789 · b2ce789
1 parent e8ef3b8
commit b2ce789
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 7 deletions.
diff --git a/frontend/.babelrc b/frontend/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/react"]
+}
diff --git a/frontend/index.js b/frontend/index.js
@@ -1,9 +1,12 @@
-const express = require("express");
+import express from 'express'
+import template from './src/template'
 
-app = express();
+let app = express();
 
-app.listen(process.env.APP_FRONTEND_PORT);
+app.use('/dist', express.static('../dist'));
 
 app.get("*", (req, res) => {
-    res.send("Hello, world!")
+    res.send(template("Habr demo app"));
 });
+
+app.listen(process.env.APP_FRONTEND_PORT);
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,8 +4,8 @@
   "description": "This is an app demo for Habr article.",
   "main": "index.js",
   "scripts": {
-    "build": "echo 'build'",
-    "start": "node index.js",
+    "build": "webpack",
+    "start": "node /app/server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -19,6 +19,17 @@
   },
   "homepage": "https://github.com/Saluev/habr-app-demo#readme",
   "dependencies": {
-    "express": "^4.16.3"
+    "express": "^4.16.3",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.3.3",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "webpack": "^4.29.5",
+    "webpack-cli": "^3.2.3"
   }
 }
diff --git a/frontend/src/client.js b/frontend/src/client.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import {render} from 'react-dom'
+import App from './components/app'
+
+render(
+    <App/>,
+    document.querySelector('#app')
+);
diff --git a/frontend/src/components/app.js b/frontend/src/components/app.js
@@ -0,0 +1,10 @@
+import React, {Component} from 'react'
+
+class App extends Component {
+
+    render() {
+        return <h1>Hello, world!</h1>
+    }
+}
+
+export default App
diff --git a/frontend/src/template.js b/frontend/src/template.js
@@ -0,0 +1,16 @@
+export default function template(title) {
+    let page = `
+        <!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>${title}</title>
+            </head>
+            <body>
+                <div id="app"></div>
+                <script src="/dist/client.js"></script>
+            </body>
+        </html>
+      `;
+    return page;
+}
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
@@ -0,0 +1,36 @@
+const path = require("path");
+
+clientConfig = {
+  mode: "development",
+  entry: {
+    client: ["./src/client.js", "@babel/polyfill"]
+  },
+  output: {
+    path: path.resolve(__dirname, "../dist"),
+    filename: "[name].js"
+  },
+  module: {
+    rules: [
+        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
+    ]
+ }
+};
+
+serverConfig = {
+  mode: "development",
+  target: "node",
+  entry: {
+    server: ["./index.js", "@babel/polyfill"]
+  },
+  output: {
+    path: path.resolve(__dirname, ".."),
+    filename: "[name].js"
+  },
+  module: {
+    rules: [
+        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
+    ]
+ }
+};
+
+module.exports = [clientConfig, serverConfig];