{"id":16158355,"url":"https://github.com/ajaymahadeven/Scalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL","last_synced_at":"2025-03-18T21:31:27.993Z","repository":{"id":247575472,"uuid":"822194422","full_name":"ajaymahadeven/Scalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL","owner":"ajaymahadeven","description":"This example demonstrates deploying a Next.js app to Azure Functions. The architecture consists of a front-end, Azure Functions as middleware, and a PostgreSQL database (using Docker), forming the back-end. The front-end communicates with the back-end through the middleware, ensuring a detachable front-end.","archived":false,"fork":false,"pushed_at":"2024-09-18T08:14:41.000Z","size":364,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-16T23:42:10.481Z","etag":null,"topics":["azure-functions","docker","docker-compose","learn","nextjs","postgresql"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajaymahadeven.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-06-30T14:44:37.000Z","updated_at":"2025-03-06T17:57:08.000Z","dependencies_parsed_at":"2024-10-27T19:13:21.660Z","dependency_job_id":"16720c87-6828-4db2-90cd-151aacb580cd","html_url":"https://github.com/ajaymahadeven/Scalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL","commit_stats":null,"previous_names":["thenameisajay/scalable-full-stack-setup-next.js-azure-functions-and-postgresql","ajaymahadeven/scalable-full-stack-setup-next.js-azure-functions-and-postgresql"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaymahadeven%2FScalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaymahadeven%2FScalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaymahadeven%2FScalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaymahadeven%2FScalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajaymahadeven","download_url":"https://codeload.github.com/ajaymahadeven/Scalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244310694,"owners_count":20432589,"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":["azure-functions","docker","docker-compose","learn","nextjs","postgresql"],"created_at":"2024-10-10T01:53:57.965Z","updated_at":"2025-03-18T21:31:22.985Z","avatar_url":"https://github.com/ajaymahadeven.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scalable Full-Stack Setup: Next.js, Azure Functions, and PostgreSQL\n\nThis example demonstrates deploying a Next.js app to Azure Functions. The architecture consists of a front-end, Azure Functions as middleware, and a PostgreSQL database (using Docker), forming the back-end. The front-end communicates with the back-end through the middleware, ensuring a detachable front-end.\n\n## Prerequisites\n\n- Familiarity with fundamental API concepts\n- An Azure account with an active subscription\n- Azure CLI version 2.4 or later\n- Docker\n- Node.js\n- Azure Functions Core Tools\n- Azure Functions extension for VS Code\n\n## Azure Functions Documentation\n\n- [Azure Local Development](https://learn.microsoft.com/en-us/azure/azure-functions/create-first-function-vs-code-typescript?source=recommendations\u0026pivots=nodejs-model-v4)\n\n## Environment Variables\n\nThree configuration files are required:\n\n- `.env` in the project root for Docker\n- `.env` in the `frontend` folder\n- `local.settings.json` in the `api` folder for Azure Functions\n\nExamples of these files are provided in the repository.\n\n## Steps to Run the Project\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone \u003crepository_url\u003e\n   cd \u003crepository_folder\u003e\n   ```\n\n2. **Start the PostgreSQL database:**\n\n   In the project root, run:\n\n   ```bash\n   docker-compose up\n   ```\n\n For Linux :\n   Change the permissions of the folder called pg_data_master (docker volume) to 777\n   ```bash\n   sudo chmod 777 pg_data_master\n   ```\n   and the user and group of the folder to 1001\n   ```bash\n   sudo chown -R 1001:1001 pg_data_master\n   ```\n\n   Customize the database credentials in the `docker-compose.yml` file via `.env` or directly.\n\n2. **Set up Azure Functions:**\n\n   Navigate to the `api` folder and install dependencies:\n\n   ```bash\n   cd api\n   npm install\n   ```\n\nFor the initial setup, deploy the functions to Azure by following these steps:\n\n Press `Fn + F5` to deploy the functions.\n\n\n   Follow the prompts to configure and debug the functions locally.\n\n4. **Set up the front-end:**\n\n   Navigate to the `frontend` folder and install dependencies:\n\n   ```bash\n   cd ../frontend\n   npm install\n   ```\n\n5. **Start the front-end:**\n\n   ```bash\n   npm run dev\n   ```\n\n6. **Access the application:**\n\n   Open a browser and navigate to `http://localhost:3000`.\n\n## Testing and Usage\n\n- Navigate to `http://localhost:3000` to see the default \"Hello World\" message from the API.\n- Enter your name to see it reflected, indicating the endpoint is working.\n- Click the \"Populate Data\" button to insert sample data of 5 people into the database.\n- Click the \"Delete Data\" button to remove the data.\n- Click the \"View Data\" button to view the data.\n\n## Note\n\n- The codebase in this repository is designed primarily for demonstrating a scalable architecture and maintainability rather than adhering to strict code quality standards. This approach was chosen due to the focus on architectural design for an in-house product.\n- In some instances, GET methods have been used where POST or DELETE methods might be more appropriate. This decision was made to expedite development and prioritize the architectural aspects.\n- Feedback and suggestions for improvements are welcome. If you identify areas where the code or architecture can be enhanced, please feel free to reach out.\n\n## Conclusion\n\nThis example illustrates deploying a Next.js app with Azure Functions as middleware and a PostgreSQL database back-end. The front-end remains detachable, ensuring a flexible architecture.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE.md](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajaymahadeven%2FScalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajaymahadeven%2FScalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajaymahadeven%2FScalable-Full-Stack-Setup-Next.js-Azure-Functions-and-PostgreSQL/lists"}