├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── componentes ├── ButtonOpen.jsx ├── CameraVisualizer.css └── CameraVisualizer.jsx ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js ├── setupTests.js ├── test.json └── utils └── utils.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - node 5 | 6 | script: 7 | - npm run test:coveralls 8 | - npm run deploy -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Jin Jose Manuel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

DP2 react dummy deploy

2 | 3 | This project has the purpose to show how to deploy a reac app into a AWS S3 bucket. 4 | 5 | ## Run It 6 | 7 | First, `git clone` the project and enter to the project folder. Then, follow the next instructions: 8 | 9 | - Install all package dependencies 10 | 11 | ```shell 12 | npm install 13 | ``` 14 | 15 | --- 16 | 17 | #### Run in _development_ mode: 18 | 19 | - Runs the application is development mode. By defaullt it runs on port 3000. 20 | 21 | ```shell 22 | npm start 23 | ``` 24 | 25 | Now got to [http://localhost:3000/](http://localhost:3000/) 26 | 27 | 28 | #### Deploy to _AWS S3 bucket_: 29 | 30 | - Deploys the app to an aws S3 bucket. 31 | 32 | 1. Make the build folder, wich will contain all required files for our app. 33 | 34 | ```shell 35 | npm run build 36 | ``` 37 | 38 |

39 | img 40 |

41 | 42 | 2. After the execution of that command, you will be able to see a new folder: "./build". 43 | 3. Log in into your aws account and create an S3 bucket with all read permissions enabled. 44 | 4. In the created bucket, in the "properties" option switch to "enable" the option to host static web sites. 45 | 46 |

47 | img 48 |

49 |

50 | img 51 |

52 | 53 | 6. Drag all the content of the "build" folder and drag them into the S3 bucket panel to satart to load them. 54 | 55 |

56 | img 57 |

58 |

59 | img 60 |

61 | 62 | 8. Select all files to load. 63 | 9. Allow public read to everybody. 64 | 65 |

66 | img 67 |

68 |

69 | img 70 |

71 | 72 | 12. Once all the files have been loaded correctly, in your browser go to the corresponding URL to check the app runnig. 73 | 74 | - For example purposes an already deployed app can be accesed here: 75 | [http://dp2-test-deploy.s3-website-us-east-1.amazonaws.com/](http://dp2-test-deploy.s3-website-us-east-1.amazonaws.com/). 76 | 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dp2-react-template-deploy", 3 | "version": "0.1.0", 4 | "homepage": "https://JinSSJ3.github.io/dp2-react-template-deploy", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/JinSSJ3/dp2-react-template-deploy.git" 8 | }, 9 | "dependencies": { 10 | "@testing-library/jest-dom": "^5.12.0", 11 | "@testing-library/react": "^11.2.6", 12 | "@testing-library/user-event": "^12.8.3", 13 | "axios": "^0.21.1", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-router-dom": "^5.2.0", 17 | "react-scripts": "4.0.3", 18 | "web-vitals": "^1.1.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject", 25 | "deploy": "gh-pages -d build" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JinSSJ3/dp2-react-template-deploy/09a1ba596c904bdf7dcfb14e05e87910b83eccce/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | DP2 test 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JinSSJ3/dp2-react-template-deploy/09a1ba596c904bdf7dcfb14e05e87910b83eccce/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JinSSJ3/dp2-react-template-deploy/09a1ba596c904bdf7dcfb14e05e87910b83eccce/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | 36 | to { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | 41 | .button { 42 | border-radius: 10px; 43 | border: none; 44 | color: white; 45 | padding: 15px 32px; 46 | text-align: center; 47 | text-decoration: none; 48 | display: inline-block; 49 | font-size: 16px; 50 | margin: 4px 2px; 51 | cursor: pointer; 52 | } 53 | 54 | .primary { 55 | 56 | 57 | background-color: #071e25; 58 | color: #ffffff; 59 | border: 2px solid #071e25; 60 | } 61 | 62 | 63 | .secondary { 64 | background-color: rgba(255, 255, 255, 0.5); 65 | color: #071e25; 66 | border: 2px solid #071e25; 67 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | import { useState } from "react"; 4 | import { playVideoFromCamera } from "./utils/utils"; 5 | import CameraVisualizer from "./componentes/CameraVisualizer"; 6 | import ButtonOpen from "./componentes/ButtonOpen"; 7 | 8 | const App = (props) => { 9 | const [visible, setVisible] = useState(false); 10 | const [listaResultado, setListaResultado] = useState([]); 11 | // Updates the select element with the provided set of cameras 12 | 13 | const handleOpen = () => { 14 | setVisible(playVideoFromCamera()); 15 | }; 16 | 17 | function sendParent(lista) { 18 | setListaResultado(lista); 19 | } 20 | 21 | return ( 22 |
23 |
24 | logo 25 | 26 |
34 | 35 | 36 | 39 | 40 | 51 |
52 | 53 | 54 | 55 |

Esto es una prueba de WebRTC

56 | 57 |
    58 | {listaResultado.map((resultadoItem, index) => ( 59 |
  • {resultadoItem.title}
    • 60 | ))} 61 |
62 | 63 | 69 | Learn React 70 | 71 | {/* */} 72 |
73 |
74 | ); 75 | }; 76 | 77 | export default App; 78 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/componentes/ButtonOpen.jsx: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import React, { useEffect } from "react"; 3 | import "./../App.css"; 4 | const ButtonOpen = (props) => { 5 | 6 | 7 | const handleGet = async () => { 8 | let result = undefined; 9 | try { 10 | result = await axios.get("https://jsonplaceholder.typicode.com/todos/1"); 11 | } catch (errro) { 12 | result = {}; 13 | } 14 | let resultlist=[]; 15 | for(let i=0; i<10;i++){ 16 | resultlist.push(result.data); 17 | } 18 | props.sendParent(resultlist); 19 | 20 | //aqui se lo envio al compo. padre 21 | 22 | }; 23 | return ( 24 |
25 | 28 |
29 | ); 30 | }; 31 | 32 | export default ButtonOpen; 33 | -------------------------------------------------------------------------------- /src/componentes/CameraVisualizer.css: -------------------------------------------------------------------------------- 1 | #localVideo { 2 | border: 1px solid white; 3 | 4 | background-color: #000000; 5 | border-radius: 10px; 6 | -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */ 7 | -webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */ 8 | box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */ 9 | 10 | -moz-transform: translate(0, 10px); /* FF3.5+ */ 11 | -o-transform: translate(0, 10px); /* Opera 10.5 */ 12 | -webkit-transform: translate(0, 10px); /* Saf3.1+, Chrome */ 13 | } -------------------------------------------------------------------------------- /src/componentes/CameraVisualizer.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./CameraVisualizer.css"; 3 | 4 | const CameraVisualizer = (props) => { 5 | if (props.visibleXXX) { 6 | return ( 7 |
8 |
15 | ); 16 | } else { 17 | return
; 18 | } 19 | }; 20 | 21 | export default CameraVisualizer; 22 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('dp2-test') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/test.json: -------------------------------------------------------------------------------- 1 | [ 2 | "hola", 3 | "esto", 4 | { 5 | "prueba": "test", 6 | "axios": 28 7 | } 8 | ] -------------------------------------------------------------------------------- /src/utils/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @param {"audio" | "video"} type 4 | * @returns la lista de dispositivos multiedia de un determinado tipo 5 | */ 6 | export async function getConnectedDevices(type) { 7 | const devices = await window.navigator.mediaDevices.enumerateDevices(); 8 | return devices.filter((device) => device.kind === type); 9 | } 10 | 11 | /** 12 | * @param {object} constraints 13 | * @returns los dispositivos que se logró tener acceso 14 | */ 15 | export const openMediaDevices = async (constraints) => { 16 | return await window.navigator.mediaDevices.getUserMedia(constraints); 17 | }; 18 | 19 | /** 20 | * LOCAL PLAYBACK 21 | * 22 | * 23 | */ 24 | export async function playVideoFromCamera() { 25 | try { 26 | const constraints = { video: true, audio: true }; 27 | const stream = await window.navigator.mediaDevices.getUserMedia(constraints); 28 | const videoElement = document.querySelector("video#localVideo"); 29 | videoElement.srcObject = stream; 30 | 31 | return true; 32 | } catch (error) { 33 | console.error("Error opening video camera.", error); 34 | return false; 35 | } 36 | } 37 | export async function closeCamera() { 38 | const constraints = { video: true, audio: true }; 39 | const stream = await window.navigator.mediaDevices.getUserMedia(constraints); 40 | stream.getTracks().forEach(function (track) { 41 | track.stop(); 42 | }); 43 | } 44 | --------------------------------------------------------------------------------