├── README.md
├── client
├── Dockerfile
├── package-lock.json
├── package.json
├── public
│ └── index.html
└── src
│ ├── App.css
│ ├── App.js
│ └── index.js
├── docker-compose.yml
├── nginx
├── Dockerfile
└── default.conf
├── server
├── Dockerfile
├── index.js
├── package-lock.json
└── package.json
└── setup.sql
/README.md:
--------------------------------------------------------------------------------
1 | # Build-and-Dockerize-a-Full-stack-React-app-with-Node.js-MySQL-and-Nginx-for-reverse-proxy
2 |
3 | Run `npm i` inside the client directory
4 |
5 | Run `npm i` inside the server directory
6 |
7 | Run `docker-compose up --build` inside the mainn project directory
8 |
9 | Access the Adminer using route `http://localhost:8000/`.
10 |
11 |
12 | To log in, use `mysql_db` as the server Username as `root` and password as `MYSQL_ROOT_PASSWORD`.
13 |
14 | To start interacting with the application, open `http://localhost:3050/` on a browser.
15 |
16 | Check out the step by step explained guide [here](https://www.section.io/engineering-education/build-and-dockerize-a-full-stack-react-app-with-nodejs-and-nginx/)
17 |
18 | https://www.section.io/engineering-education/build-and-dockerize-a-full-stack-react-app-with-nodejs-and-nginx/
19 |
--------------------------------------------------------------------------------
/client/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:alpine
2 | WORKDIR /app
3 | COPY package.json ./
4 | COPY package-lock.json ./
5 | COPY ./ ./
6 | RUN npm i
7 | CMD ["npm", "run", "start"]
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.14.1",
7 | "@testing-library/react": "^11.2.7",
8 | "@testing-library/user-event": "^12.8.3",
9 | "axios": "^0.21.1",
10 | "bootstrap": "^5.0.2",
11 | "react": "^17.0.2",
12 | "react-bootstrap": "^1.6.1",
13 | "react-dom": "^17.0.2",
14 | "react-scripts": "4.0.3",
15 | "web-vitals": "^1.1.2"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 | CRUD Application
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .form{
6 | display: inline-block;
7 | justify-content: center;
8 | }
9 |
10 | .form input{
11 | width: 250px;
12 | margin: 10px;
13 | }
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions */
2 | /* eslint-disable no-restricted-globals */
3 | import React, { Component } from 'react';
4 | import './App.css';
5 | import axios from 'axios';
6 | import { Button, Container, Card, Row } from 'react-bootstrap'
7 |
8 | class App extends Component {
9 | constructor(props) {
10 | super(props)
11 | this.state = {
12 | setBookName: '',
13 | setReview: '',
14 | fetchData: [],
15 | reviewUpdate: ''
16 | }
17 | }
18 |
19 | handleChange = (event) => {
20 | let nam = event.target.name;
21 | let val = event.target.value
22 | this.setState({
23 | [nam]: val
24 | })
25 | }
26 |
27 | handleChange2 = (event) => {
28 | this.setState({
29 | reviewUpdate: event.target.value
30 | })
31 | }
32 |
33 | componentDidMount() {
34 | axios.get("/api/get")
35 | .then((response) => {
36 | this.setState({
37 | fetchData: response.data
38 | })
39 | })
40 | }
41 |
42 | submit = () => {
43 | axios.post('/api/insert', this.state)
44 | .then(() => { alert('success post') })
45 | console.log(this.state)
46 | document.location.reload();
47 | }
48 |
49 | delete = (id) => {
50 | if (confirm("Do you want to delete? ")) {
51 | axios.delete(`/api/delete/${id}`)
52 | document.location.reload()
53 | }
54 | }
55 |
56 | edit = (id) => {
57 | axios.put(`/api/update/${id}`, this.state)
58 | document.location.reload();
59 | }
60 | render() {
61 |
62 | let card = this.state.fetchData.map((val, key) => {
63 | return (
64 |
65 |
66 |
67 | {val.book_name}
68 |
69 | {val.book_review}
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | )
78 | })
79 |
80 | return (
81 |
82 |
Dockerized Fullstack React Application
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | {card}
93 |
94 |
95 |