{"id":16583064,"url":"https://github.com/mazgi/template.containerized-nextjs-project","last_synced_at":"2025-03-06T02:44:52.344Z","repository":{"id":41954163,"uuid":"295511602","full_name":"mazgi/template.containerized-nextjs-project","owner":"mazgi","description":"A template repository for developing Web Frontend and API powered by TypeScript \u0026 Docker :whale:","archived":false,"fork":false,"pushed_at":"2023-07-20T01:21:43.000Z","size":5458,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-05-02T00:20:47.428Z","etag":null,"topics":["dockerize","graphql","nestjs","nextjs","openapi","template-repository","typescript"],"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/mazgi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["mazgi"],"patreon":"mazgi"}},"created_at":"2020-09-14T19:00:36.000Z","updated_at":"2023-04-21T09:17:22.000Z","dependencies_parsed_at":"2024-01-16T19:13:24.075Z","dependency_job_id":null,"html_url":"https://github.com/mazgi/template.containerized-nextjs-project","commit_stats":null,"previous_names":["mazgi/template.dockerized-nextjs-project"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazgi%2Ftemplate.containerized-nextjs-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazgi%2Ftemplate.containerized-nextjs-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazgi%2Ftemplate.containerized-nextjs-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazgi%2Ftemplate.containerized-nextjs-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mazgi","download_url":"https://codeload.github.com/mazgi/template.containerized-nextjs-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242138800,"owners_count":20078007,"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":["dockerize","graphql","nestjs","nextjs","openapi","template-repository","typescript"],"created_at":"2024-10-11T22:34:51.455Z","updated_at":"2025-03-06T02:44:52.315Z","avatar_url":"https://github.com/mazgi.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mazgi","https://patreon.com/mazgi"],"categories":[],"sub_categories":[],"readme":"# template.containerized-nextjs-project\n\n[![unit-tests](https://github.com/mazgi/template.containerized-nextjs-project/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/mazgi/template.containerized-nextjs-project/actions/workflows/unit-tests.yml)\n[![e2e-tests](https://github.com/mazgi/template.containerized-nextjs-project/actions/workflows/e2e-tests.yml/badge.svg)](https://github.com/mazgi/template.containerized-nextjs-project/actions/workflows/e2e-tests.yml)\n[![build-production-images](https://github.com/mazgi/template.containerized-nextjs-project/actions/workflows/build-production-images.yml/badge.svg)](https://github.com/mazgi/template.containerized-nextjs-project/actions/workflows/build-production-images.yml)\n\nThis repository is a template for developing Web Applications using [Next.js](https://nextjs.org/) and TypeScript.\n\n## How to Use\n\n\u003cu\u003eDocker and [Docker Compose](https://docs.docker.com/compose/)\u003c/u\u003e are needed. If you want to develop and run locally, that's all.\n\n### Step 1: Write out your IDs and information in the .env file\n\nIf you have an old `.env` file, you are able to reset it by removing it.\n\n```console\nrm -f .env\n```\n\n```.env\nUID=1234\nGID=1234\nDOCKER_GID=2345\nBIND_IP_ADDR=192.168.0.1\nPUBLIC_IP_ADDR_OR_FQDN=203.0.113.1\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003e :open_file_folder: Expand details for the .env file and environment variables...\u003c/summary\u003e\n\n:information_source: If you are using Linux, write out UID, GID, and GID for the `docker` group, into the `.env` file to let that as exported on Docker Compose as environment variables.\n\n```console\ntest $(uname -s) = 'Linux' \u0026\u0026 {\n  echo -e \"DOCKER_GID=$(getent group docker | cut -d : -f 3)\"\n  echo -e \"GID=$(id -g)\"\n  echo -e \"UID=$(id -u)\"\n} \u003e\u003e .env || :\n```\n\n:information_source: If you develop in a remote environment such as VM, Cloud, a PC placed in another room, and others, write the IP address and FQDN into the `.env` file, such as `BIND_IP_ADDR` and `PUBLIC_IP_ADDR_OR_FQDN`, the same as the previous steps.\n\nThough you don't need to define these values if you are developing and running locally and connecting locally to local.\n\n```console\ncat\u003c\u003cEOE \u003e\u003e .env\nBIND_IP_ADDR=192.168.0.1\nPUBLIC_IP_ADDR_OR_FQDN=203.0.113.1\nEOE\n```\n\nThe `BIND_IP_ADDR` is used to bind your services, such as web applications you are developing, RDBMS, and others. And `PUBLIC_IP_ADDR_OR_FQDN` is used to connect and identify your services, such as Web API endpoints, allowed origins for CORS settings, and others.\n\nIn almost all situations, the BIND_IP_ADDR is your local IP address, and you are able to get this value via CLI and GUI such as `ip addr show`, `ifconfig`, `ipconfig`, and others.  \nTypically, the `BIND_IP_ADDR` and `PUBLIC_IP_ADDR_OR_FQDN` are the same if you use a VM in your local and other regular situations.\n\nHowever, if you are developing in an environment under NAT, you should get your public IP address or FQDN and set this value as PUBLIC_IP_ADDR_OR_FQDN.  \nThis situation can happen if you develop on a Cloud VM such as Amazon EC2, Azure VM, Google Compute Engine(GCE), etc.\n\n#### Environment Variable Names\n\nEnvironment variable names and uses are as follows.\n\n| Name       | Required on Linux | Value                                                                                                                                   |\n| ---------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| DOCKER_GID | **Yes**           | This ID number is used to provide permission to read and write your docker socket on your local machine from your container.            |\n| GID        | **Yes**           | This ID number is used as GID for your Docker user, so this ID becomes the owner of all files and directories created by the container. |\n| UID        | **Yes**           | The same as the above UID.                                                                                                              |\n\n| Name                   | Value                                                            |\n| ---------------------- | ---------------------------------------------------------------- |\n| BIND_IP_ADDR           | It's used to bind your services.                                 |\n| PUBLIC_IP_ADDR_OR_FQDN | It's used by the Frontend to connect the BFF you are developing. |\n\n\u003c/details\u003e\n\n### Step 2: Start services via Docker Compose\n\nYou start Docker Compose services/containers as below.\n\n```console\ndocker compose up\n```\n\nNow you can access your services at the following ports.\n\n- Frontend: `http://${PUBLIC_IP_ADDR_OR_FQDN}:3000`\n- BFF: `http://${PUBLIC_IP_ADDR_OR_FQDN}:4000`\n  - GraphQL Playground: `http://${PUBLIC_IP_ADDR_OR_FQDN}:4000/graphql`\n  - OpenAPI Web UI: `http://${PUBLIC_IP_ADDR_OR_FQDN}:4000/swagger`\n- Storybook: `http://${PUBLIC_IP_ADDR_OR_FQDN}:6006`\n\n\u003cdetails\u003e\n\n\u003csummary\u003e :open_file_folder: Expand additional operations for starting, testing, and more...\u003c/summary\u003e\n\nYou are able to start services in the background as below.\n\n```console\ndocker compose up --wait\n```\n\nAnd you can start following logs for specific the service/container as below.  \nIf you want to stop following logs, type `^c`.\n\n```console\ndocker compose logs --follow --no-log-prefix bff\n```\n\n```console\ndocker compose logs --follow --no-log-prefix frontend\n```\n\nYou run tests as below.\n\n```console\ndocker compose exec bff npm run test\n```\n\n```console\ndocker compose exec frontend npm run test\n```\n\nIf you want to run tests in the \"watch\" mode, you are able to start services to do it.\n\n```console\ndocker compose --profile dev-all up\n```\n\nOr if you `up` any service to \"watch\" mode, it implicitly enabling the profile `dev-all`.\n\n```console\ndocker compose up bff-test-watch\n```\n\n```console\ndocker compose up frontend-test-watch\n```\n\nThe following official documents help you understand the behavior on this page.\n\n- https://docs.docker.com/compose/profiles/\n- https://docs.docker.com/compose/extends/\n\n\u003c/details\u003e\n\nAnd you are able to stop services as below.\n\n```console\ndocker compose down\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazgi%2Ftemplate.containerized-nextjs-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmazgi%2Ftemplate.containerized-nextjs-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazgi%2Ftemplate.containerized-nextjs-project/lists"}