Merge pull request cefjoeii#5 from espizo/docker-support

Add docker support

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:latest
+
+RUN mkdir -p /usr/src/app/react-src
+WORKDIR /usr/src/app
+
+RUN npm install -g nodemon
+
+COPY package.json /usr/src/app/
+RUN npm install
+
+COPY react-src/package.json /usr/src/app/react-src
+RUN npm install
+
+COPY . /usr/src/app
+
+EXPOSE 3000 4200

README.md

@@ -37,7 +37,7 @@ npm install
 
 Run the *main server*. It listens on port 3000.
 ```bash
-node server
+CORS=1 node server
 ```
 View it on the browser.
 
@@ -56,11 +56,7 @@ npm install
 
 Run the *development server* for React. It listens on port 4200.
 ```bash
-npm start
-```
-Since it's running on a different port, we need to enable CORS. Locate the file called *server.js* on the root directory. Find and uncomment this line of code. Remember to comment it back out when deploying.
-```js
-// app.use(cors());
+REACT_APP_API_URL=http://localhost:3000 npm start
 ```
 
 To make a production build, simply run on *react-src* folder via the terminal.
@@ -70,6 +66,10 @@ npm run build
 
 It re-creates a folder named *public* on the root directory. This is where the production-ready front-end of the web application resides.
 
+## Docker
+```bash
+docker-compose up
+```
 <br>
 
 ## Contributing

docker-compose.yml

@@ -0,0 +1,31 @@
+version: '2'
+services:
+  db:
+    image: mongo:latest
+  api:
+    build: .
+    image: mern-crud
+    command: nodemon server
+    ports:
+      - "3000:3000"
+    environment:
+      - "DB=mongodb://db/mern-crud"
+      - "CORS=1"
+      - "DEBUG=express:*"
+    volumes:
+      - .:/usr/src/app
+      - /usr/src/app/node_modules
+    depends_on:
+      - db
+  web:
+    image: mern-crud
+    command: npm start --prefix react-src
+    ports:
+      - "4200:4200"
+    environment:
+      - "REACT_APP_API_URL=http://localhost:3000"
+    volumes:
+      - ./react-src:/usr/src/app/react-src
+      - /usr/src/app/react-src/node_modules
+    depends_on:
+      - api

react-src/src/components/App/App.js

@@ -12,15 +12,12 @@ import './App.css';
 
 class App extends Component {
 
-  // Set this to an empty string when making a production build
-  server = ''; // server = 'http://localhost:3000';
-
-  // Leave the parameter empty when making a production build
-  socket = io.connect(); // socket = io.connect(this.server);
-
   constructor() {
     super();
 
+    this.server = process.env.REACT_APP_API_URL || '';
+    this.socket = io.connect(this.server);
+
     this.state = {
       users: [],
       online: 0

server.js

@@ -37,8 +37,10 @@ app.use(express.static('public'));
 app.use(bodyParser.json());
 
 // Enable cross-origin access through the CORS middleware
-// NOTICE: For React development server only! Comment it out when deploying.
-// app.use(cors());
+// NOTICE: For React development server only!
+if (process.env.CORS) {
+  app.use(cors());
+}
 
 // Initialize routes middleware
 app.use('/api/users', require('./routes/users'));