{"id":28767155,"url":"https://github.com/deoomen/frontend-dockerized","last_synced_at":"2026-03-09T22:03:40.248Z","repository":{"id":299047076,"uuid":"1001016751","full_name":"deoomen/frontend-dockerized","owner":"deoomen","description":"A comprehensive Docker-based development environment for modern JavaScript frameworks with intelligent port detection and multi-framework support.","archived":false,"fork":false,"pushed_at":"2026-01-20T10:26:36.000Z","size":18,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-20T19:43:06.404Z","etag":null,"topics":["app-router","docker","docker-compose","expo","next","next-js","nextjs","react","react-js","react-native","react-router","reactjs","reactnative","vite","vite-js","vitejs","vue-js","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Makefile","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/deoomen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2025-06-12T17:17:54.000Z","updated_at":"2026-01-20T10:26:40.000Z","dependencies_parsed_at":"2025-06-14T11:18:21.399Z","dependency_job_id":"6219a17b-7e27-4231-9a8a-a4c77e3adb07","html_url":"https://github.com/deoomen/frontend-dockerized","commit_stats":null,"previous_names":["deoomen/frontend-dockerized"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/deoomen/frontend-dockerized","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoomen%2Ffrontend-dockerized","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoomen%2Ffrontend-dockerized/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoomen%2Ffrontend-dockerized/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoomen%2Ffrontend-dockerized/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deoomen","download_url":"https://codeload.github.com/deoomen/frontend-dockerized/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoomen%2Ffrontend-dockerized/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30314410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T20:05:46.299Z","status":"ssl_error","status_checked_at":"2026-03-09T19:57:04.425Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["app-router","docker","docker-compose","expo","next","next-js","nextjs","react","react-js","react-native","react-router","reactjs","reactnative","vite","vite-js","vitejs","vue-js","vuejs"],"created_at":"2025-06-17T13:01:11.015Z","updated_at":"2026-03-09T22:03:40.242Z","avatar_url":"https://github.com/deoomen.png","language":"Makefile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Dockerized Template\n\n🚀 A comprehensive Docker-based development environment for modern JavaScript frameworks with intelligent port detection and multi-framework support. This template provides a containerized setup that ensures consistent development environments across different machines while automatically configuring ports based on your chosen framework.\n\n## ✨ Features\n\n- 🐳 **Docker-based development environment** - Consistent setup across all machines\n- 🧠 **Intelligent framework detection** - Automatically detects and configures your framework\n- ⚛️ **Multiple framework support**:\n  - **Expo** (React Native) - Port 8081\n  - **Fastify** - Port 3000\n  - **Next.js** (App Router) - Port 3000\n  - **React** (with React Router v7) - Port 5173\n  - **Vue.js** - Port 5173\n  - **Vite** - Port 5173\n  - **Custom frameworks** - Port 8080\n- 🎯 **Smart port management** - No manual port configuration needed\n- 🔧 **Make-based workflow** - Simple commands for all operations\n- � **Hot reload support** - Instant development feedback\n- 👤 **Non-root user setup** - Secure container execution\n- 📦 **Volume mounting** - Persistent development files\n- 🛠️ **Extensible architecture** - Easy to add new frameworks\n\n## 🎯 Smart Port Management\n\n**Zero configuration required!** The template automatically detects your framework and configures the appropriate ports:\n\n| Framework | Default Port | Detection Method | Status |\n| ---- | --- | --- | --- |\n| Expo | 8081 | `\"expo\"` or `\"@expo/\"` | ✅ Fully Supported |\n| Fastify | 3000 | `\"next\"` dependency | ✅ Fully Supported |\n| Next.js | 3000 | `\"next\"` dependency | ✅ Fully Supported |\n| React | 5173 | `\"react\"` (without Next.js) | ✅ Fully Supported |\n| Vue.js | 5173 | `\"vue\"` dependency | ✅ Fully Supported |\n| Vite | 5173 | `\"vite\"` dependency | ✅ Fully Supported |\n| **Custom** | **8080** | **Unknown framework** | ✅ **Supported via `init-framework`** |\n\n### How It Works\n\nWhen you run `make up`, the system will:\n\n1. 📝 Scan your `package.json` for framework dependencies\n2. 🔍 Detect the framework type automatically\n3. ⚙️ Configure appropriate ports without manual intervention\n4. 🚀 Start your development server with the correct configuration\n\n**Example output:**\n\n```bash\n$ make up\nDetected framework: next (port: 3000)\nUsing ports: Host: 3000 -\u003e Container: 3000\nSoon your project will be available at http://localhost:3000\n```\n\n## 📋 Prerequisites\n\n- [Docker](https://docs.docker.com/get-docker/) (with Docker Compose v2+)\n- [Make](https://www.gnu.org/software/make/) (usually pre-installed on Linux/macOS)\n\n## 🚀 Quick Start\n\n### 1. Clone or use this template\n\n```bash\ngit clone \u003crepository-url\u003e\ncd react-dockerized\n```\n\n### 2. Configure your project (optional)\n\nEdit the `.env` file to customize your project settings:\n\n```env\nIMAGE_NAME=frontend-dockerized-app\nPROJECT_NAME=my_project\nNODE_ENV=development\n```\n\n### 3. Initialize your application\n\nChoose one of the predefined frameworks:\n\n**For Next.js (recommended for web apps):**\n\n```bash\nmake init-next\n```\n\n**For React Router (traditional React apps):**\n\n```bash\nmake init-react\n```\n\n**For Expo (React Native apps):**\n\n```bash\nmake init-expo\n```\n\n**For Vue.js applications:**\n\n```bash\nmake init-vue\n```\n\n**For Vite applications:**\n\n```bash\nmake init-vite\n```\n\n### 4. Start the development server\n\n```bash\nmake up\n```\n\n### 5. Open your application\n\nNavigate to the automatically detected port in your browser (depending on your framework).\n\n## 🔧 Custom Framework Support\n\nFor frameworks not directly supported, use the `init-framework` command with a custom create command:\n\n### Syntax\n\n```bash\nmake init-framework CREATE_COMMAND=\"\u003cyour-custom-command\u003e\"\n```\n\n### Examples\n\n**Create a Svelte application:**\n\n```bash\nmake init-framework CREATE_COMMAND=\"npm create svelte@latest my_project\"\n```\n\n**Create a Remix application:**\n\n```bash\nmake init-framework CREATE_COMMAND=\"npx create-remix@latest my_project\"\n```\n\n**Create a Nuxt.js application:**\n\n```bash\nmake init-framework CREATE_COMMAND=\"npx nuxi@latest init my_project\"\n```\n\n**Note:** Custom frameworks will default to port **8080**. The development server will be available at [http://localhost:8080](http://localhost:8080).\n\n## 📖 Available Commands\n\nRun `make help` to see all available commands with descriptions.\n\n### Example npm commands\n\n```bash\n# Install packages\nmake npm install lodash\n\n# Install dev dependencies - note about double `--`!\nmake npm install typescript -- --save-dev\n\n# Run custom scripts\nmake npm run build\n\n# Check versions\nmake npm list\n```\n\n## 🛠️ Development Workflow\n\n### Getting Started\n\n1. **Initialize your project:**\n\n   ```bash\n   make init-next  # or any other supported framework\n   ```\n\n2. **Start development:**\n\n   ```bash\n   make up\n   ```\n\n3. **Install additional packages:**\n\n   ```bash\n   make npm install \u003cpackage-name\u003e\n   ```\n\n4. **Run custom npm scripts:**\n\n   ```bash\n   make npm run \u003cscript-name\u003e\n   ```\n\n5. **Access container for debugging:**\n\n   ```bash\n   make shell\n   ```\n\n6. **Stop development:**\n\n   ```bash\n   make down\n   ```\n\n## 📁 Project Structure\n\nAfter initialization, your project will have the following structure:\n\n```text\nreact-dockerized/\n├── .env                    # Environment configuration\n├── compose.yaml           # Docker Compose services\n├── Dockerfile             # Container definition\n├── Makefile              # Development commands\n├── LICENSE               # MIT License\n├── README.md             # This file\n├── docker/               # Docker utilities\n│   ├── detect-framework.sh   # Framework detection script\n│   ├── entrypoint.sh         # Container startup script\n│   └── port-config.sh        # Port configuration logic\n└── \u003cyour-project\u003e/       # Your application (created after init)\n    ├── package.json\n    ├── src/\n    └── ... (framework-specific files)\n```\n\n## ⚙️ Configuration\n\n### Environment Variables (.env)\n\n| Variable | Description | Default Value |\n| --- | --- | --- |\n| `IMAGE_NAME` | Docker container name | `react-dockerized-app` |\n| `PROJECT_NAME` | Directory name for your project | `my_project` |\n| `NODE_ENV` | Node.js environment | `development` |\n| `PORT_HOST` | Host port (auto-detected) | Framework-dependent |\n| `PORT_CONTAINER` | Container port (auto-detected) | Framework-dependent |\n\n### Port Configuration\n\nPorts are automatically detected, but you can override them by modifying the port mapping in `compose.yaml`:\n\n```yaml\nports:\n  - \"3001:${PORT_CONTAINER}\"  # Change 3001 to your desired host port\n```\n\n### Custom Framework Configuration\n\nWhen using `init-framework` with custom commands, the system will:\n\n1. Use port **8080** as default for unknown frameworks\n2. Attempt to detect the framework from the generated `package.json`\n3. Update port configuration accordingly after detection\n\n## 🔧 Troubleshooting\n\n### Permission Issues\n\nIf you encounter permission issues, the Dockerfile creates a non-root user with UID 1000. Make sure your host user has the same UID or adjust the Dockerfile accordingly:\n\n```bash\n# Check your UID\nid -u\n\n# If different from 1000, modify Dockerfile:\n# ARG USER_UID=\u003cyour-uid\u003e\n```\n\n### Container Not Starting\n\n1. **Check if the port is already in use:**\n\n   ```bash\n   lsof -i :3000  # or your framework's port\n   ```\n\n2. **Ensure Docker is running:**\n\n   ```bash\n   docker --version\n   docker compose version\n   ```\n\n3. **Check container logs:**\n\n   ```bash\n   docker logs react-dockerized-app\n   ```\n\n### Project Not Found\n\nIf the project directory doesn't exist, run one of the init commands first:\n\n```bash\nmake init-next  # or init-react, init-expo, init-vue, init-vite\n```\n\n### Framework Not Detected\n\nIf your framework isn't detected properly:\n\n1. Check if the framework dependency is in `package.json`\n2. Try rebuilding with framework detection:\n\n   ```bash\n   make build-smart\n   ```\n\n3. For custom frameworks, ensure your command creates a valid `package.json`\n\n## 🤝 Contributing\n\nWe welcome contributions to improve this template! Here's how you can help:\n\nFor detailed contributing guidelines, see [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## 📄 License\n\nThis project is open source and available under the **MIT License**. See the [LICENSE](LICENSE) file for the full license text.\n\nYou are free to:\n\n- ✅ Use this project commercially\n- ✅ Modify and distribute\n- ✅ Include in private projects\n- ✅ Use for educational purposes\n\n---\n\nHappy coding! 🚀\n\nIf you find this template helpful, please consider giving it a ⭐!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeoomen%2Ffrontend-dockerized","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeoomen%2Ffrontend-dockerized","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeoomen%2Ffrontend-dockerized/lists"}