Merge pull request #9 from BolajiOlajide/dockerize-starter

Orjiewuru Kingdom Isaac · web-flow · commit 54914c7d6e2a · 2018-08-27T09:50:17.000+01:00
Dockerize starter
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,6 @@
+node_modules/
+LICENSE
+.vscode/
+.idea/
+yarn.lock
+package-lock.json
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:carbon
+
+LABEL maintainer="KINGDOM ISAAC"
+LABEL version="1.0"
+
+ENV HOME=/app
+WORKDIR $HOME
+
+COPY package.json .
+RUN npm install
+COPY . .
+
+EXPOSE 8080
+
+CMD [ "./start.sh" ]
diff --git a/README.md b/README.md
@@ -56,6 +56,17 @@ npm run report-coverage
 * 0.0.1
   * Work in progress
 
+### Docker
+
+Build the image with the command
+```sh
+docker build . -t react-webpack-start
+```
+This builds the image with the tag `react-webpack-start`. Once this is completed, you can instantiate the container with the image with the command
+```sh
+docker run -p 8080:8080 -v rws:/app react-webpack-start:latest
+```
+
 ## Meta
 
 Orjiewuru Kingdom – [@kingisaac95](https://twitter.com/kingisaac95) – kingdom.orjiewuru@gmail.com
diff --git a/src/app/App.js b/src/app/App.js
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Header from './components/Header';
 import Content from './views/Content';
 
 const App = () => (
-  <div>
+  <Fragment>
     <Header />
     <Content />
-  </div>
+  </Fragment>
 );
 
 export default App;
diff --git a/src/index.html b/src/index.html
@@ -10,4 +10,4 @@
 <body>
   <section id="root"></section>
 </body>
-</html>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,6 @@ import ReactDOM from 'react-dom';
 import App from './app/App';
 import './index.scss';
 
-export const Root = () => <App />
+export const Root = () => <App />;
 
 ReactDOM.render(<Root />, document.getElementById('root'));
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -13,10 +13,10 @@ body {
 
 hr {
   border: 0;
-    border-top: 1px solid $white;
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible;
+  border-top: 1px solid $white;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
 }
 
 .bgimg {
diff --git a/start.sh b/start.sh
@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+./node_modules/.bin/webpack-dev-server --mode development --host 0.0.0.0 # replacing this instead of npm start because of some flags
+
+# if you intend to use docker for production, you can add a ternary here to toggle scripts
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
 <body>
   <section id="root"></section>
 </body>
 -</html>
 +</html>