Merge pull request #241 from AgileVentures/104-dockerize-for-local-de…

…velopment

104 Dockerize for local Development ( Can also be used for Production )

.dockerignore

@@ -0,0 +1,9 @@
+.git
+*Dockerfile*
+*docker-compose*
+node_modules
+*README.md*
+*.eslintrc*
+CODE_OF_CONDUCT.md
+CONTRIBUTION_GUIDE.md
+.env

README.MD

@@ -2,31 +2,33 @@
 
 # AgileVentures Website React Front End
 
+## Project Installation
 
-Project Installation
---------------------
+---
 
 1. Fork the project by clicking on the Fork button on the top-right section of this page.
 2. Clone it using the following command in your local working directory
+
 ```bash
 $ git clone https://github.com/[YOUR_GIT_USERNAME]/WebsiteOne-FE.git
 #or ( using ssh)
 $ git clone  git@github.com:[YOUR_GIT_USERNAME]/WebsiteOne-FE.git
 ```
-3. Install dependencies  
+
+3. Install dependencies
+
 ```bash
 $ cd WebsiteOne-FE
 $ yarn install
 ```
-Run the application
--------------------
+
+## Run the application
 
 ```bash
 $ yarn start
 ```
 
-Run tests
----------
+## Run tests
 
 ```bash
 $ yarn test
@@ -35,13 +37,13 @@ $ yarn test
 On windows:
 
 ```bash
-  yarn windows-test 
+  yarn windows-test
 ```
 
-**Note :**  At this level, you should be able to run the project. In case an upgrade is needed for semantic UI, following the section below.
+**Note :** At this level, you should be able to run the project. In case an upgrade is needed for semantic UI, following the section below.
+
+## Rebuild the semantic UI asserts
 
-Rebuild the semantic UI asserts
-----------------------------------
 This command needs to be run with **npm** - **yarn** does not support interactive prompt installs
 
 ```bash
@@ -52,9 +54,11 @@ Then remove the dependency from package.json and delete the package-lock.json fi
 
 This will create a new semantic folder
 and copy our defaut file:
+
 ```bash
 cp site.variables semantic/src/site/globals/`
 ```
+
 Then you can build semantic-ui
 `gulp build` or `./../node_modules/gulp/bin/gulp.js build`
 use the default values
@@ -63,11 +67,30 @@ and copy the folder to our src folder
 
 ```bash
 cp -R dist/* ../src/assets/
+
 ```
 
+## Using Docker for local Development
+
+---
+
+### Prerequisite
+
+- Ensure you have docker installed. [Install docker](https://docs.docker.com/install/)
+
+### Instructions
+
+- Change to the project root directory. (./WebsiteOne-FE)
+- Create an image with the following command
+  > docker build -f docker/Dockerfile -t websiteone-fe:dev .
+- Run the created image with
+  > docker run -p 80:80 websiteone-fe:dev
+- Access the application on localhost port 80
+  > http://127.0.0.1:80
+
 ### [Code of Conduct](./CODE_OF_CONDUCT.md).
-### [Contribution Guide](./CONTRIBUTION_GUIDE.md).
 
+### [Contribution Guide](./CONTRIBUTION_GUIDE.md).
 
 ### License
 

docker-config/vhost.conf

@@ -0,0 +1,9 @@
+server {
+  listen 80;
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html =404;
+  }
+}

docker/Dockerfile

@@ -0,0 +1,21 @@
+FROM node:10.13.0-alpine as production-build
+COPY .  .
+
+# Install yarn
+RUN npm install -g yarn
+
+# Install only production dependencies
+RUN yarn install
+
+# create the production build (./build)
+RUN yarn build
+
+# Server the production build created with NginX
+FROM nginx:1.13.9-alpine
+LABEL app="websiteone-fe"
+
+COPY --from=production-build ./dist /usr/share/nginx/html
+COPY docker-config/vhost.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+WORKDIR /usr/share/nginx/html
+CMD ["nginx", "-g", "daemon off;"]