0% found this document useful (0 votes)
94 views

Mescalito - Codeigniter REST API React Docker Separation of Concern PDF

Using the Hello World guide, you'll start a branch, write comments, and open a pull request in 3 sentences or less to learn Git and GitHub without any code.

Uploaded by

qbark
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
94 views

Mescalito - Codeigniter REST API React Docker Separation of Concern PDF

Using the Hello World guide, you'll start a branch, write comments, and open a pull request in 3 sentences or less to learn Git and GitHub without any code.

Uploaded by

qbark
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Learn Git and GitHub without any code!

Using the Hello World guide, you’ll start a branch, write comments, and open a pull request.

Read the guide

mescalito / Codeigniter-REST-API-React-Docker-Separation-of-Concern

Code Issues Pull requests 3 Actions Projects Wiki Security Insights

master Go to file Add file Code About

No description or website provided.


mescalito Update README.md … on 17 Jan 19
# docker # react # php

my-mysql-scripts adding validation to API endpoint to save form data into DB 11 months ago # codeigniter # apache # mysql

php include react app into CodeIgniter 11 months ago Readme

README.md Update README.md 11 months ago

docker-compose.yml 1. Docker: dynamically load schema into docker DB. 2. Add dump SQL 11 months ago Releases

No releases published

README.md

Packages
Web App with Codeigniter REST API + React + Docker No packages published

following Frontend Backend Separation of Concern


Languages
This repo contains a modern web app. The app follows the Separation of concerns software architecture design
pattern. The app is made in ReactJS (client side) and a Codeigniter API (serverside).
HTML 82.3% PHP 16.5%
Other 1.2%
Video
https://youtu.be/FP3KICYV69k

Orchestration
Docker will take care of all provisioning, installation and configuration for you. Docker will create the DB Schema
as well as populating the database.

The default docker images in used are:

For PHP

https://hub.docker.com/_/php

For MySQL

https://hub.docker.com/_/mysql

Requirements
Install docker (if you don't have it).

$ sudo apt-get update

$ sudo apt-get install docker-ce docker-ce-cli containerd.io

Setup
1. Clone repo this repo:
$ git clone [email protected]:mescalito/cielo.git

2. Run inside repo folder:

$ docker-compose up

App URL
You are good to go. Open your browser and navigate to:

http://127.0.0.1:8000

Relevant files
./docker-compose.yml

version: '3.3'
services:
db:
build:
context: ./my-mysql-scripts
dockerfile: Dockerfile
container_name: mysql8
image: mysql:latest
command: --default-authentication-plugin=mysql_native_password
restart: always
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: test_db
MYSQL_USER: devuser
MYSQL_PASSWORD: devpass
ports:
- 3306:3306
web:
build:
context: ./php
dockerfile: Dockerfile
container_name: php74
depends_on:
- db
volumes:
- ./php:/var/www/html/
ports:
- 8000:80

./my-mysql-scripts/Dockerfile

FROM mysql
COPY ./db_dump.sql /docker-entrypoint-initdb.d/

./php/Dockerfile

FROM php:7.4-apache
RUN apt-get update && apt-get upgrade -y && apt-get install -y nano
RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli \
&& a2enmod headers \
&& sed -ri -e 's/^([ \t]*)(<\/VirtualHost>)/\1\tHeader set Access-Control-Allow-Origin
"*"\n\1\2/g' /etc/apache2/sites-available/*.conf
ENV TERM xterm
EXPOSE 80

Clientside: React app


For the courious. Clientside App is located inside the repo in:

./php/react_app/

Run webpack-dev-server command with

$ npm start

Open your browser

http://127.0.0.1:8080
Run webpack command with

$ npm build

Run cross-env NODE_ENV=production webpack command with

$ npm prod

Distribution path:

/home/qqq/code/docker/php/react_app/dist

UI
simple, powerful and pretty modern web apps.

You might also like