Business Apps

This post will cover most of our development operations procedures. This includes but is not limited to; creating, building, and running new docker images, django projects, and react apps.

What is Docker? Why do we use it?

Docker is used on our development server (LocDocPortal2.0 - aws lightsail). Docker is a container management system. It keeps all the files (and their dependencies) nicely packaged in their own little container. This enables us to use one development server for many projects. It also makes packaging and sharing applications much easier.

What is Django? Why do we use it?

Django is a web-framework. Although it is capable of acting as a front-end and back-end, we primarily use it for back-end development. It is perfect for creating API's as well as lightweight web apps.

Example: https://api.locdocinc.com/api/v1/

What is React? Why do we use it?

React is a front-end web framework. It gives the development team the ability to create highly responsive and reusable code for a number of different use cases. The OMS front-end is built using React.

Example: http://dev.locdocinc.com:3000/

Docker on the Development Server - Setup, Usage, Commands

server: 3.92.118.87

• Prerequisites

  • Docker is installed

  • Docker-Compose is installed

  • Node.js v12 or higher

  • NVM

  • NPX

  • NPM

• Docker File

  • No Extension, named "Dockerfile"

  • Strict Syntax specifying infrastructure

  • From choose a docker image from https://hub.docker.com

  • Example Dockerfile

FROM node:12
WORKDIR /app/
COPY package.json /app/
RUN npm install
COPY . /app/
EXPOSE 3000
CMD npm start

• Docker-Compose - https://docs.docker.com/compose/

  • Container Orchestration

  • Handles the building and deconstruction of Projects that utilized docker images

  • syntax is .yml (YAMAL)

  • Should live in Parent Directory (highest level project directory)

  • Example docker-compose.yml

version: "3.2"
services:
 # db:
 #   image: postgres:latest
 #   ports:
 #     - "5432:5432"
 #   environment:
 #     POSTGRES_PASSWORD: password
 #     POSTGRES_USER: postgres
 backend:
 build: ./backend
 volumes:
      - ./backend:/app/backend
 ports:
      - "8080:8080"
 stdin_open: true
 tty: true
 # depends_on: 
 #      - db
 # links: 
 #  - db:db
 command: python3 manage.py runserver 0.0.0.0:8080
 frontend:
 build: ./frontend
 volumes:
      - ./frontend:/app
 # One-way volume to use node_modules from inside image
      - /app/node_modules
 ports:
      - "3000:3000"
 stdin_open: true
 tty: true
 environment:
      - NODE_ENV=development
 # depends_on:
 #   - backend
 command: npm start

• Sample File Structure for Containerized React App

/Test_project
---/frontend
--- ---Dockerfile
---/backend
--- ---Dockerfile
---docker-compose.yml

Docker/Docker-Compose Commands

docker commands can be ran from anywhere

docker-compose commands must be ran from project directory containing docker-compose.yml file

View running docker containers (similar to linux "ps aux")

$sudo docker ps

Stop all containers (instances of containers) - Run from directory containing docker-compose.yml file (a.k.a. project directory)

$sudo docker-compose down

Stop and remove orphans - only for maintenance

$sudo docker-compose down --remove-orphans

Start Container

$sudo docker-compose up

Start Container with new Build - Use build option if you change docker file, docker-compose file, or contents of build directory

$sudo docker-compose up --build

Run a command on a container

$sudo docker-compose run --rm frontend {{command}}

EXAMPLE

$sudo docker-compose run --rm frontend npm run build
$sudo docker-compose run --rm frontend npm install react-router-dom

View a running container' logs

$sudo docker logs -ft {{container_instance}}  #run sudo docker ps to see instance names

EXAMPLE

$sudo docker logs -ft oms_frontend_1

Creating a new React project from Scratch using Docker

1. Set up Folder Structure (From Home Folder)

$mkdir {{project_name}}
$cd {{project_name}}

2. Create React App

~/{{project_name}}$npx create-react-app frontend

3. Add Docker File to frontend

$cd frontend
$touch Dockerfile

4. Create a Dockerfile for project (or use the one specified above)

5. Create a docker-compose file in project directory.

~/{{project_name}}$touch docker-compose.yml

6. Create a Docker-Compose file or use the one specified above.

7. Start the development server - for the first time (use --build)

$sudo docker-compose up --build

8. Start the development server going forward - ran from project folder

$sudo docker-compose up

Create a new Django REST API Project from scratch using VENV and Docker

1. From project folder, using python3 virtual environment, create a new django project

$django-admin.py startproject {{project_name}}

2. Change the name of the django project folder, to backend

$mv {{project_name}} backend

3. Add Dockerfile to backend

$cd backend
$touch Dockerfile

4. Create a Dockerfile for project (or use the one specified above)

5. Create a requirements.txt file in backend folder and add django to it

Django=={{latest_version}}

6. Add the development server IP or URL to Allowed Hosts in Django settings file

ALLOWED_HOSTS = ['dev.locdocinc.com']

7. Build django migrations and then migrate them, add a superuser

$sudo docker-compose run --rm backend python manage.py makemigrations
$sudo docker-compose run --rm backend python manage.py migrate
$sudo docker-compose run --rm backend python manage.py createsuperuser

8. After following the superuser creation steps, you are now ready to build your application

9. Create an "App" inside the Django Project

$sudo docker-compose run -rm backend python manage.py startapp {{app_name}}

10. Add the app to Django Settings - You may need to rebuild the docker container in order for the settings module to be able to read the file system.

Setting Up Django Rest Framework to work with React Frontend

1. Add djangorestframework to your requirements.txt file

2. Add rest_framework to Django installed apps settings

3. Follow remaining installation instructions on https://www.django-rest-framework.org/#