{"id":22323393,"url":"https://github.com/agussuwerdo/codeigniter-react","last_synced_at":"2025-03-26T05:22:21.875Z","repository":{"id":256856301,"uuid":"856625362","full_name":"agussuwerdo/codeigniter-react","owner":"agussuwerdo","description":"codeigniter 3 with react frontend, configured to deploy in vercel","archived":false,"fork":false,"pushed_at":"2024-09-27T12:34:30.000Z","size":6233,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T07:12:08.336Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ci.werdev.my.id/","language":"PHP","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/agussuwerdo.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":"2024-09-12T22:54:33.000Z","updated_at":"2024-10-31T08:37:20.000Z","dependencies_parsed_at":"2024-09-13T12:30:57.061Z","dependency_job_id":"8deb6ee6-5b94-4f67-a22e-edfef0fee974","html_url":"https://github.com/agussuwerdo/codeigniter-react","commit_stats":null,"previous_names":["agussuwerdo/codeigniter-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agussuwerdo%2Fcodeigniter-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agussuwerdo%2Fcodeigniter-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agussuwerdo%2Fcodeigniter-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agussuwerdo%2Fcodeigniter-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agussuwerdo","download_url":"https://codeload.github.com/agussuwerdo/codeigniter-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245592795,"owners_count":20640896,"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":[],"created_at":"2024-12-04T01:10:21.451Z","updated_at":"2025-03-26T05:22:21.840Z","avatar_url":"https://github.com/agussuwerdo.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# CodeIgniter with React - Vercel Deployment\n\nThis boilerplate project is a web application built using **CodeIgniter 3** as the backend framework and **React** for the frontend. The project is deployed on Vercel with separate URLs for the frontend and backend API.\n\n## Demo Links\n\n- **Frontend**: [https://codeigniter-react.vercel.app](https://codeigniter-react.vercel.app)\n- **Backend API**: [https://codeigniter-react.vercel.app/api](https://codeigniter-react.vercel.app/api)\n- **PHPINFO**: [https://codeigniter-react.vercel.app/api/phpinfo](https://codeigniter-react.vercel.app/api/phpinfo)\n## Project Structure\n\n- **Frontend (React)**: Located inside the `frontend/` directory. This handles the client-side UI and interacts with the backend via API calls.\n- **Backend (CodeIgniter)**: The `backend/` directory contains the CodeIgniter PHP files responsible for handling the API logic.\n\n### Folder Layout:\n\n```\n.\n├── backend/            # CodeIgniter backend for handling API requests\n│   ├── application/    # CodeIgniter application logic (controllers, models, views)\n│   └── system/         # CodeIgniter system files\n├── frontend/           # React frontend application\n│   ├── src/            # React source files\n│   └── build/          # React build output (deployed to Vercel)\n├── vercel.json         # Vercel configuration for builds and routing\n```\n\n## Technologies Used\n\n- **Frontend**: React (with Hooks), React Router for client-side routing.\n- **Backend**: CodeIgniter 3 for handling server-side logic and APIs.\n- **Deployment**: Vercel, providing CI/CD and hosting for both the frontend and backend.\n\n## How It Works\n\n1. **React Frontend**: The frontend is a single-page React application that makes API calls to the CodeIgniter backend.\n2. **API Routing**: The backend serves dynamic content through API routes available at `/api/`.\n3. **Frontend Routing**: All non-API requests are routed to the React `index.html` to handle client-side routing.\n\n## Local Development\n\n### Prerequisites\n\n- Node.js and npm for the frontend development.\n- PHP 7.4+ and MySQL for the CodeIgniter backend.\n- Vercel CLI (optional) for local deployment testing.\n\n### Running Locally\n\n1. **Frontend (React)**:\n\n   ```bash\n   cd frontend\n   npm install\n   npm start\n   ```\n\n   This will start the React development server at `http://localhost:3000`.\n\n2. **Backend (CodeIgniter)**:\n\n   To run the backend locally, you will need to set up a PHP server (e.g., XAMPP, MAMP, or a Dockerized environment). Ensure you configure the database and environment settings in the `api/application/config/` directory.\n\n3. **API Testing**:\n\n   You can modify the API endpoints through the `.env` file when running locally.\n   set the `REACT_APP_API_URL` in the `.env` file inside frontend folder.\n\n4. **Docker**:\n\n    Refer to Makefile to run the app trough Docker.\n\n## Deployment\n\nThe project is deployed to Vercel. Below is the configuration used in the `vercel.json` file for deployment:\n\n```json\n{\n  \"builds\": [\n    { \"src\": \"api/*.php\", \"use\": \"vercel-php@0.7.1\" },\n    {\n      \"src\": \"frontend/build/**\",\n      \"use\": \"@vercel/static\"\n    }\n  ],\n  \"routes\": [\n    { \"src\": \"/api/(.*)\", \"dest\": \"/api/index.php\" },\n    { \"src\": \"/(.*)\", \"dest\": \"/frontend/build/$1\" }\n  ]\n}\n```\n\n### Frontend Deployment\n\n- The React app is built using `npm run build` and deployed under `frontend/build`.\n\n### Backend Deployment\n\n- The CodeIgniter backend is deployed under `api/` and accessible at the `/api/` route.\n\n### Vercel Deployment\n\n- Run `Make deploy` from the root directory\n\n## API Documentation\n\nThe API follows RESTful principles and can be accessed via `/api/`. Here are a few example endpoints:\n\n- `GET /api/controller/param1/param2`: Retrieves data from the controller with dynamic parameters.\n- `POST /api/controller`: Sends data to the backend.\n\n## Future Improvements\n\n- **Authentication**: Add JWT or OAuth for secured API endpoints.\n- **Testing**: Set up unit and integration testing for both frontend and backend.\n- **Error Handling**: Implement global error handling for better user experience.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagussuwerdo%2Fcodeigniter-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagussuwerdo%2Fcodeigniter-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagussuwerdo%2Fcodeigniter-react/lists"}