{"id":18479616,"url":"https://github.com/devopsinsiders/reacttodouimonolith","last_synced_at":"2025-04-08T16:30:37.613Z","repository":{"id":205518927,"uuid":"714410897","full_name":"devopsinsiders/ReactTodoUIMonolith","owner":"devopsinsiders","description":"📝 ReactTodoUIMonolith 🖥️ Repository is housing the user interface code developed in React for the Todo application's monolithic architecture. This repository is responsible for managing the frontend aspects, including user interactions and presentation logic, all within a single, cohesive structure. 🌟","archived":false,"fork":false,"pushed_at":"2024-01-04T16:20:43.000Z","size":2286,"stargazers_count":6,"open_issues_count":0,"forks_count":26,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-06T12:15:32.027Z","etag":null,"topics":["monolithic","reactjs","todoapp"],"latest_commit_sha":null,"homepage":"https://devopsinsiders.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devopsinsiders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-04T20:22:09.000Z","updated_at":"2024-09-05T18:35:34.000Z","dependencies_parsed_at":"2024-01-04T17:44:40.714Z","dependency_job_id":null,"html_url":"https://github.com/devopsinsiders/ReactTodoUIMonolith","commit_stats":null,"previous_names":["devopsinsiders/todoapp-frontend-react","devopsinsiders/reacttodouimonolith"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devopsinsiders%2FReactTodoUIMonolith","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devopsinsiders%2FReactTodoUIMonolith/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devopsinsiders%2FReactTodoUIMonolith/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devopsinsiders%2FReactTodoUIMonolith/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devopsinsiders","download_url":"https://codeload.github.com/devopsinsiders/ReactTodoUIMonolith/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223335059,"owners_count":17128521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["monolithic","reactjs","todoapp"],"created_at":"2024-11-06T12:15:40.348Z","updated_at":"2024-11-06T12:15:46.256Z","avatar_url":"https://github.com/devopsinsiders.png","language":"JavaScript","readme":"# Readme for Todo App 📝\n\n### Installation 🚀\n\n1. **Install Node.js and NPM on Ubuntu:**\n   - Make sure you have Node.js 16.x and NPM installed on your machine. If not, you can install them using the following commands:\n     ```bash\n     curl -s https://deb.nodesource.com/setup_16.x | sudo bash\n     sudo apt install nodejs -y\n     ```\n\n### Configuration ⚙️\n\n2. **Update Backend URL:**\n   - Open the `src/TodoApp.js` file.\n   - Locate the variable storing the backend URL and update it with the appropriate value. (* See Below for PrivateIp Configuration)\n\n### Building and Running 🏗️\n\n3. **Install Dependencies:**\n   - Run the following command to install project dependencies:\n     ```bash\n     npm install\n     ```\n\n4. **Build the Project:**\n   - Execute the following command to build the project:\n     ```bash\n     npm run build\n     ```\n\n### Deployment 🚀\n\n5. **Deploy to Nginx Server:**\n   - Copy the generated artifacts from the build process.\n   - Deploy the artifacts to your Nginx server. Ensure that the server is properly configured to serve the application.\n\n## * Using Private IP on the Backend VM 🌐\n\nTo use a Private IP on the Backend VM, follow the steps below:\n\n### 1. Configure NGINX on the Backend VM ⚙️\n\nOpen the NGINX configuration file:\n\n```bash\nsudo nano /etc/nginx/sites-available/default\n```\n\n### 2. Insert Proxy Configuration 🔄\n\nCopy and paste the following code just above the `root /var/www/html` line:\n\n```nginx\nlocation /api {\n   proxy_pass http://\u003cPrivateIP of BackendVM\u003e:8000;\n   proxy_set_header Host $host;\n   proxy_set_header X-Real-IP $remote_addr;\n   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n   proxy_set_header X-Forwarded-Proto $scheme;\n}\n```\n\nReplace `\u003cPrivateIP of BackendVM\u003e` with the actual Private IP address of your Backend VM.\n\n### 3. Update Frontend Configuration ⚙️\n\nOpen the `src/TodoApp.js` file in your frontend project.\n\nUpdate the Backend URL by replacing the existing line with the following:\n\n```javascript\nconst API_BASE_URL = 'http://\u003cFrontendVM Public IP\u003e:80/api';\n```\n\nReplace `\u003cFrontendVM Public IP\u003e` with the actual Public IP address of your Frontend VM.\n\n## Important Note 📌\n\nMake sure to restart NGINX on the VM after making the changes:\n\n```bash\nsudo service nginx restart\n```\n\nThese configurations enable communication between the Frontend and Backend using Private IP on the Backend VM. Ensure that the IPs and ports are correctly set to match your environment.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevopsinsiders%2Freacttodouimonolith","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevopsinsiders%2Freacttodouimonolith","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevopsinsiders%2Freacttodouimonolith/lists"}