Enable dev to setup both front-end and backend.

src/docker-compose.yml

@@ -1,7 +1,6 @@
-version: '3.3'
+version: "3.3"
 
 services:
-
   python-web-api-dev:
     build:
       context: .
@@ -36,6 +35,24 @@ services:
     networks:
       - andela-soc-dev-network
 
+  front-end-client-dev:
+    build:
+      context: .
+      dockerfile: ./frontend_config/Dockerfile-frontend
+
+    depends_on:
+      - python-web-api-dev
+
+    environment:
+      PORT: 3000
+      NODE_ENV: development
+      HOST: 0.0.0.0
+
+    ports:
+      - "3000:3000"
+
+    command: yarn start
+
 networks:
   andela-soc-dev-network:
     driver: bridge

src/frontend_config/Dockerfile-frontend

@@ -0,0 +1,8 @@
+FROM node:carbon
+WORKDIR /app
+COPY ./andela-societies-frontend /app
+RUN rm -f /app/config.js
+RUN rm -f /app/webpack.config.dev.js
+COPY ./frontend_config/config.js /app/config.js
+COPY ./frontend_config/webpack.config.dev.js /app/webpack.config.dev.js
+RUN yarn install

src/frontend_config/config.js

@@ -0,0 +1,34 @@
+const BACK_END_URL = 'http://0.0.0.0:5000/api/v1';
+
+const configs = {
+  production: {
+    AUTH_API: 'https://api-prod.andela.com/login?redirect_url=',
+    APP_URL: 'https://societies.andela.com',
+    API_BASE_URL: 'https://societies-api.andela.com/api/v1',
+  },
+  staging: {
+    AUTH_API: 'https://api-prod.andela.com/login?redirect_url=',
+    APP_URL: 'https://staging-societies.andela.com',
+    API_BASE_URL: 'https://api-staging-societies.andela.com/api/v1',
+  },
+  development: {
+    AUTH_API: 'https://api-prod.andela.com/login?redirect_url=',
+    APP_URL: 'http://soc-dev.andela.com:3000/',
+    API_BASE_URL:
+      BACK_END_URL ||
+      'https://private-ae5c2-andelasocietiesapi.apiary-mock.com/api/v1',
+  },
+  testing: {
+    AUTH_API: 'https://api-prod.andela.com/login?redirect_url=',
+    APP_URL: 'http://soc-dev.andela.com:3000',
+    API_BASE_URL: 'https://societies-api-dev.andela.com/api/v1',
+  },
+  sandbox: {
+    AUTH_API: 'https://api.andela.com/login?redirect_url=',
+    APP_URL: 'http://soc-sandbox.andela.com:4021',
+    API_BASE_URL: 'http://api-soc-sandbox.andela.com:4022/api/v1',
+  },
+};
+
+const config = configs[process.env.NODE_ENV];
+export default config;

src/frontend_config/webpack.config.dev.js

@@ -0,0 +1,58 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+module.exports = {
+  devtool: 'inline-source-map',
+  entry: ['babel-polyfill', './src/index'],
+  output: {
+    path: path.resolve(__dirname, 'public'),
+    filename: 'bundle.js',
+    publicPath: '/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+          {
+            loader: 'eslint-loader',
+          },
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg|jpg|otf)$/i,
+        use: ['file-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development',),
+    }),
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+    }),
+  ],
+  resolve: {
+    extensions: ['.jsx', '.js'],
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    host: process.env.HOST || 'soc-dev.andela.com',
+    port: process.env.PORT || 3000,
+    hot: true,
+    disableHostCheck: true,
+  },
+};