added express server for production

package.json

@@ -3,15 +3,22 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server --open --config webpack.dev.js",
-    "prod": "",
-    "build": "webpack --config webpack.prod.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "scripts": {
+    "dev": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "build": "webpack --config ./webpack.config.js --mode production",
+    "prod": "node production-server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "express": "^4.16.4",
+    "react": "^16.8.2",
+    "react-bootstrap": "^1.0.0-beta.6",
+    "react-dom": "^16.8.2"
+  },
   "devDependencies": {
     "@babel/core": "^7.3.3",
     "@babel/polyfill": "^7.2.5",
@@ -19,23 +26,11 @@
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "clean-webpack-plugin": "^2.0.1",
-    "css-loader": "^2.1.1",
     "eslint": "^5.14.1",
     "eslint-loader": "^2.1.2",
     "eslint-plugin-react": "^7.12.4",
-    "html-webpack-plugin": "^3.2.0",
     "http-proxy-middleware": "^0.19.1",
-    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
-    "webpack": "^4.29.5",
+    "webpack-cli": "^3.3.0"
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1",
-    "webpack-merge": "^4.2.1"
-  },
-  "dependencies": {
-    "axios": "^0.18.0",
-    "react": "^16.8.2",
-    "react-bootstrap": "^1.0.0-beta.6",
-    "react-dom": "^16.8.2"
   }
 }

production-server.js

@@ -0,0 +1,31 @@
+const express = require('express')
+const path = require('path')
+const app = express()
+const proxy = require('http-proxy-middleware')
+const port = process.env.PORT || 3001
+
+// body parsing middleware
+app.use(express.json())
+app.use(express.urlencoded({ extended: true }))
+app.use(require('body-parser').text())
+
+app.use(express.static(path.join(__dirname, 'dist')))
+
+//http://localhost:1337
+app.use(proxy('/api', { target: 'http://localhost:1337' }))
+
+app.get('*', (req, res) => {
+  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
+})
+
+// error handling endware
+app.use((err, req, res, next) => {
+  console.error(err)
+  console.error(err.stack)
+  res.status(err.status || 500).send(err.message || 'Internal server error.')
+  next()
+})
+
+app.listen(port, () => {
+  console.log(`Doin' haxor stuff on port ${port}`)
+})

src/components/footer.js

@@ -4,7 +4,7 @@ const Footer = () => {
   return (
     <footer className="text-center footer">
       <div className="container-fluid">
-        <h6 className="mt-3">&#9398; anarchy planet</h6>
+        <h6 className="mt-3">copyleft</h6>
       </div>
     </footer>
   )

src/components/items/ItemList.js

@@ -2,7 +2,6 @@ import React from 'react'
 import ItemRow from './ItemRow'
 const ItemList = props => {
   const { items } = props
-  console.log(items)
   return (
     <tbody>
       {items.map(item => (

src/components/items/Items.js

@@ -1,19 +1,20 @@
 import React from 'react'
 import ItemList from './ItemList'
-import Table from 'react-bootstrap/Table'
+import {Container, Row, Col, Table} from 'react-bootstrap'
+
 const Items = props => {
   const { items } = props
-
   return (
-    <Table striped bordered hover>
+    <Container className="mt-5">
-      <thead>
+      <Row><Col><h3>Items</h3></Col></Row>
-        <tr>
+      <Row><Col><Table striped bordered hover>
+        <thead><tr>
           <th>#</th>
           <th>Item</th>
-        </tr>
+        </tr></thead>
-      </thead>
         <ItemList items={items} />
-    </Table>
+      </Table></Col></Row>
+    </Container>
   )
 }
 

src/components/navbar.js

@@ -2,7 +2,6 @@ import React from 'react'
 import {
   Navbar,
   Nav,
-  NavDropdown,
   FormControl,
   Form,
   Button
@@ -10,24 +9,12 @@ import {
 
 const MainNav = () => {
   return (
-    <Navbar bg="dark" variant="dark" expand="lg">
+    <Navbar bg="dark" variant="dark" expand="md">
-      <Navbar.Brand href="#home">Anarchy Planet</Navbar.Brand>
+      <Navbar.Brand href="/">Client</Navbar.Brand>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="mr-auto">
-          <Nav.Link href="#home">Home</Nav.Link>
+          <Nav.Link href="/">Home</Nav.Link>
-          <Nav.Link href="#link">Link</Nav.Link>
-          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
-            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.2">
-              Another action
-            </NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-            <NavDropdown.Divider />
-            <NavDropdown.Item href="#action/3.4">
-              Separated link
-            </NavDropdown.Item>
-          </NavDropdown>
         </Nav>
         <Form inline>
           <FormControl type="text" placeholder="Search" className="mr-sm-2" />