{"id":31793658,"url":"https://github.com/yorch/webapp-api-docker-demo","last_synced_at":"2025-10-10T18:29:16.219Z","repository":{"id":37048378,"uuid":"243321502","full_name":"yorch/webapp-api-docker-demo","owner":"yorch","description":"Web Application with API server and Docker Demo in a monorepo","archived":false,"fork":false,"pushed_at":"2023-03-07T05:08:37.000Z","size":10793,"stargazers_count":2,"open_issues_count":15,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-03-22T12:30:58.315Z","etag":null,"topics":["digitalocean","docker","docker-compose","docker-demo","expressjs","javascript","monorepo","nodejs","postgresql","react","traefik","traefik-v2","vultr"],"latest_commit_sha":null,"homepage":"","language":"PLpgSQL","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/yorch.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}},"created_at":"2020-02-26T17:19:16.000Z","updated_at":"2023-03-04T17:48:50.000Z","dependencies_parsed_at":"2023-02-15T14:30:54.111Z","dependency_job_id":null,"html_url":"https://github.com/yorch/webapp-api-docker-demo","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/yorch/webapp-api-docker-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorch%2Fwebapp-api-docker-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorch%2Fwebapp-api-docker-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorch%2Fwebapp-api-docker-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorch%2Fwebapp-api-docker-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yorch","download_url":"https://codeload.github.com/yorch/webapp-api-docker-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorch%2Fwebapp-api-docker-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004910,"owners_count":26083802,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["digitalocean","docker","docker-compose","docker-demo","expressjs","javascript","monorepo","nodejs","postgresql","react","traefik","traefik-v2","vultr"],"created_at":"2025-10-10T18:29:15.076Z","updated_at":"2025-10-10T18:29:16.200Z","avatar_url":"https://github.com/yorch.png","language":"PLpgSQL","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webapp and API Server with Docker Demo\n\nThis is a demo project composed of:\n\n- React Web Application\n- NodeJS / Express server for handling API requests from a Postgres database\n- Docker orchestration to deploy and run the load balancer, webapp, server and database.\n\nThe architecture and tech stack of the deployed application consist of:\n\n- [Traefik](https://traefik.io/): As the reverse proxy and load balancer for the web app and the API server with SSL termination, so all the requests to ports 80 and 443 (SSL / HTTPS) will go to it.\n- React and [React Admin](https://marmelab.com/react-admin/) for the Front End.\n- NodeJS / [Express.js](https://expressjs.com/) for the API server.\n- [TypeORM](https://github.com/typeorm/typeorm) as the [ORM](https://en.wikipedia.org/wiki/Object-relational_mapping) for the API server.\n- [PostgreSQL](https://www.postgresql.org/) for the database.\n- [Nx](https://nx.dev/), a CLI tool for managing monorepos.\n- [Adminer](https://www.adminer.org/) a simple web application to manage databases.\n\n## Requirements\n\n- You will need a server / VPS, ideally that has a public IP address. You can get a \\$5/month VPS from providers as:\n  - [Digital Ocean](https://m.do.co/c/386aa021b4aa)\n  - [Vultr](https://www.vultr.com/?ref=6940743)\n- A domain, it could be a `.com`, `.net`, `.info`, `.cc` or any other domain you like. You need to configure two DNS records for it:\n  - `A` record, that should point to the IP address of your newly configured server.\n  - `CNAME` record like: `*.yourdomain.com` to point to `yourdomain.com`, this will allow you to use any subdomain you may need (like `api.yourdomain.com`) with this stack without having to configure the DNS of your domain every time.\n- Install Docker and [Docker Compose](https://docs.docker.com/compose/) in the server, both Digital Ocean and Vultr have images with Docker pre-installed. You could also use a regular Ubuntu 16.04 or Ubuntu 18.04 image and use a script like [this](https://github.com/yorch/server-simple-setup) to set it up (or do it manually, it's a great way to learn Linux, just check the [source code of the script](https://github.com/yorch/server-simple-setup/blob/master/server-setup.sh), it's pretty straightforward).\n\n## Getting Started\n\n- Once you have your server setup and you are SSH into it, clone this repo (or a fork of this if you created one).\n- Create an `.env` file based on `.env.sample` (ie: `cp .env.sample .env`).\n- Update the env variables in your new `.env` file, mainly `DOMAIN`.\n- Run the build:\n\n  ```sh\n  ./build-with-docker.sh\n  ```\n\n  This command will install all NodeJS dependencies and run the build using `yarn` inside a Docker container and saving the results in your server, so you don't have to install NodeJS / Yarn on the server, which makes this very portable.\n\n- Once the build is complete, the compiled bundles for the web app and server will live in `dist` directory.\n- Next, we need to run Docker Compose to prepare and start all the require containers for the whole stack. We can use:\n\n  ```sh\n  ./run-prod.sh\n  ```\n\n  This will run all the containers configured in `docker-compose.prod.yml`.\n\n## Endpoints\n\nOnce the stack is running, you can access the different parts using:\n\n- Front End / Web application: `https://yourdomain.com`, the domain that you configured in your `.env` file.\n- API Server: `https://api.yourdomain.com`, you can change the subdomain in your `.env` file.\n- Traefik Dashboard: `https://traefik.yourdomain.com`, where you can see the different services configured in your Docker stack and that Traefik is serving.\n- DB Admin / Adminer: `https://adminer.yourdomain.com/`, a simple database management tool, you can use the DB credentials configured in the `.env` file to log in.\n\n## Some Docker commands\n\nOnce you have your Docker stack / services running, you can do a few different things:\n\n- `docker ps` -\u003e To see all the containers that are running:\n- `docker ps -a` -\u003e To see all the containers that are either running or stopped (and that have not been removed with `docker rm`).\n- `docker images` -\u003e To see all the images your Docker host has pulled locally (ie: like when using `docker pull ${imageName}` or just by running a container which image does not exist locally).\n- `docker-compose -f docker-compose.prod.yml down` -\u003e To stop and cleanup your Docker services. When there is a file named `docker-compose.yml`, the `-f` param can be skipped, but in this case, since we have a couple different Docker Compose files, we have to be explicit.\n- `docker-compos -f docker-compose.prod.yml logs` -\u003e To see the logs from all the services in the Docker Compose file.\n\n## Running locally\n\nIf you want to run this project locally, you would need to run Postgres somehow, luckily, we can also use Docker for this (be sure to [install Docker](https://docs.docker.com/docker-for-mac/) in your computer first and to have it running):\n\n```sh\nyarn start-local-db\n```\n\nThis will run a PostgreSQL container and will setup the database with dummy data, you can see the SQL script used in the bootstrap process [here](docker/_db_init).\n\nIt will also run Adminer on port `8090`, so you can manage the database in a simple web application. If you have port conflicts, you can modify the file [`docker-compose.dev.yml`](docker-compose.dev.yml).\n\nTo run the FE and the server, you would need to have NodeJS and Yarn locally installed and then run:\n\n```sh\n# Install dependencies\nyarn\n# Start both services\nyarn start\n```\n\n\u003e Fun fact: Using Docker we could also skipped the dependency of having NodeJS and Yarn locally installed and still be able to work on this repo.\n\n---\n\nThis project was generated using [Nx](https://nx.dev).\n\n\u003cp style=\"text-align: center;\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\" width=\"450\"\u003e\u003c/p\u003e\n\n🔎 **Smart, Fast and Extensible Build System**\n\n## Adding capabilities to your workspace\n\nNx supports many plugins which add capabilities for developing different types of applications and different tools.\n\nThese capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.\n\nBelow are our core plugins:\n\n- [React](https://reactjs.org)\n  - `npm install --save-dev @nrwl/react`\n- Web (no framework frontends)\n  - `npm install --save-dev @nrwl/web`\n- [Angular](https://angular.io)\n  - `npm install --save-dev @nrwl/angular`\n- [Nest](https://nestjs.com)\n  - `npm install --save-dev @nrwl/nest`\n- [Express](https://expressjs.com)\n  - `npm install --save-dev @nrwl/express`\n- [Node](https://nodejs.org)\n  - `npm install --save-dev @nrwl/node`\n\nThere are also many [community plugins](https://nx.dev/community) you could add.\n\n## Generate an application\n\nRun `nx g @nrwl/react:app my-app` to generate an application.\n\n\u003e You can use any of the plugins above to generate applications as well.\n\nWhen using Nx, you can create multiple applications and libraries in the same workspace.\n\n## Generate a library\n\nRun `nx g @nrwl/react:lib my-lib` to generate a library.\n\n\u003e You can also use any of the plugins above to generate libraries as well.\n\nLibraries are shareable across libraries and applications. They can be imported from `@webapp-api-docker-demo/mylib`.\n\n## Development server\n\nRun `nx serve my-app` for a dev server. Navigate to \u003chttp://localhost:4200/\u003e. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `nx g @nrwl/react:component my-component --project=my-app` to generate a new component.\n\n## Build\n\nRun `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nRun `nx test my-app` to execute the unit tests via [Jest](https://jestjs.io).\n\nRun `nx affected:test` to execute the unit tests affected by a change.\n\n## Running end-to-end tests\n\nRun `nx e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).\n\nRun `nx affected:e2e` to execute the end-to-end tests affected by a change.\n\n## Understand your workspace\n\nRun `nx graph` to see a diagram of the dependencies of your projects.\n\n## Further help\n\nVisit the [Nx Documentation](https://nx.dev) to learn more.\n\n## ☁ Nx Cloud\n\n### Distributed Computation Caching \u0026 Distributed Task Execution\n\n\u003cp style=\"text-align: center;\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-cloud-card.png\"\u003e\u003c/p\u003e\n\nNx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.\n\nTeams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.\n\nVisit [Nx Cloud](https://nx.app/) to learn more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyorch%2Fwebapp-api-docker-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyorch%2Fwebapp-api-docker-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyorch%2Fwebapp-api-docker-demo/lists"}