{"id":17469808,"url":"https://github.com/corneliusweig/skaffold-create-react-app","last_synced_at":"2025-04-21T15:15:45.499Z","repository":{"id":39013538,"uuid":"213491244","full_name":"corneliusweig/skaffold-create-react-app","owner":"corneliusweig","description":"Showcase for Skaffold with create-react-app","archived":false,"fork":false,"pushed_at":"2023-03-05T15:55:16.000Z","size":3084,"stargazers_count":15,"open_issues_count":17,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T00:59:37.119Z","etag":null,"topics":["create-react-app","kubernetes","react","skaffold-example","sync-files"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/corneliusweig.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":"2019-10-07T21:34:37.000Z","updated_at":"2023-07-31T11:04:20.000Z","dependencies_parsed_at":"2025-03-03T07:42:27.152Z","dependency_job_id":null,"html_url":"https://github.com/corneliusweig/skaffold-create-react-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusweig%2Fskaffold-create-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusweig%2Fskaffold-create-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusweig%2Fskaffold-create-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusweig%2Fskaffold-create-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corneliusweig","download_url":"https://codeload.github.com/corneliusweig/skaffold-create-react-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249834788,"owners_count":21331988,"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":["create-react-app","kubernetes","react","skaffold-example","sync-files"],"created_at":"2024-10-18T15:43:50.851Z","updated_at":"2025-04-20T00:59:47.089Z","avatar_url":"https://github.com/corneliusweig.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Skaffold with `create-react-app`\n===\n\nThis is a showcase for Skaffold with create-react-app.\n\nWhy?\n---\n\nIf you want to develop a react app and deploy on kubernetes, you want fast feedback cycles.\nSkaffold is a dedicated tool to help with this _inner dev-loop_ and it offers some nifty optimizations around script languages.\nThis showcase demonstrates how to get this working efficiently.\n\nHow?\n---\n\nThese steps explain how this repository was created.\nUse this as a guide to get started with new projects.\n\n1. Run `create-react-app` like so:\n\n       npx create-react-app . --template typescript --use-npm\n\n   For instructions how to work with `create-react-app` go [here](https://create-react-app.dev/docs/getting-started).\n\n1. Add a `Dockerfile` to instruct the container builder how to construct your container:\n\n   ```Dockerfile\n   FROM node:12-alpine\n\n   WORKDIR /app\n   EXPOSE 3000\n   CMD [\"npm\", \"run\", \"start\"]\n\n   COPY package* ./\n   RUN npm ci\n   COPY . .\n   ```\n\n1. Add a `.dockerignore` file to ignore unwanted files. This is important so that Skaffold knows what files it may ignore:\n\n   ```.dockerignore\n   .git\n   node_modules\n   **/*.swp\n   **/*.tsx~\n   **/*.swn\n   **/*.swo\n   ```\n\n1. Add a kubernetes manifest for your app\n\n   ```yaml\n   apiVersion: apps/v1\n   kind: Deployment\n   metadata:\n     name: create-react-app\n   spec:\n     selector:\n       matchLabels:\n         app: create-react-app\n     template:\n       metadata:\n         labels:\n           app: create-react-app\n       spec:\n         containers:\n         - name: create-react-app\n           image: skaffold-create-react-app\n           ports:\n           - containerPort: 3000\n   ```\n\n1. Run `skaffold init` and add the following items:\n\n   * Tell Skaffold to copy `.ts` or `.tsx` files into your container instead of rebuilding:\n\n     ```yaml\n     build:\n       artifacts:\n       - image: skaffold-create-react-app\n         sync:\n           infer:\n           - '**/*.ts'\n           - '**/*.tsx'\n           - '**/*.css'\n     ```\n\n     This sync mode works entirely different to docker-compose with a local volume, as it copies the files into the running container.\n     The advantage is that this will work no matter how your kubernetes cluster is set up, be it remote or local.\n\n   * Tell Skaffold which port to forward so that you can access your app on localhost:\n\n     ```yaml\n     portForward:\n     - resourceType: deployment\n       resourceName: create-react-app\n       port: 3000\n     ```\n\n1. Start developing with\n\n       skaffold dev --port-forward\n\n   This last command assumes that you have set up a kubernetes cluster. If you have not, take a look at [minikube](https://github.com/kubernetes/minikube).\n\n1. Access your app on `http://localhost:3000`.\n   When you make changes, the changed files should be sync'ed into the container and the node watcher should pick up the changes.\n   In particular, the container should _not rebuild_.\n   If it does nevertheless, run `skaffold dev -v debug` and look out for temporary files which should be added to `.dockerignore`.\n\n\n\u003e :warning: Note that the container runs `npm run start` which is the dev mode. When going to production, you should run `npm run build` and build a dedicated container.\n\n**Happy hacking!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorneliusweig%2Fskaffold-create-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorneliusweig%2Fskaffold-create-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorneliusweig%2Fskaffold-create-react-app/lists"}