Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/corneliusweig/skaffold-create-react-app
Showcase for Skaffold with create-react-app
https://github.com/corneliusweig/skaffold-create-react-app
create-react-app kubernetes react skaffold-example sync-files
Last synced: 29 days ago
JSON representation
Showcase for Skaffold with create-react-app
- Host: GitHub
- URL: https://github.com/corneliusweig/skaffold-create-react-app
- Owner: corneliusweig
- License: apache-2.0
- Created: 2019-10-07T21:34:37.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T16:15:42.000Z (almost 2 years ago)
- Last Synced: 2023-03-02T12:31:13.604Z (over 1 year ago)
- Topics: create-react-app, kubernetes, react, skaffold-example, sync-files
- Language: TypeScript
- Size: 2.94 MB
- Stars: 14
- Watchers: 1
- Forks: 6
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Skaffold with `create-react-app`
===
This is a showcase for Skaffold with create-react-app.
Why?
---
If you want to develop a react app and deploy on kubernetes, you want fast feedback cycles.
Skaffold is a dedicated tool to help with this _inner dev-loop_ and it offers some nifty optimizations around script languages.
This showcase demonstrates how to get this working efficiently.
How?
---
These steps explain how this repository was created.
Use this as a guide to get started with new projects.
1. Run `create-react-app` like so:
npx create-react-app . --template typescript --use-npm
For instructions how to work with `create-react-app` go [here](https://create-react-app.dev/docs/getting-started).
1. Add a `Dockerfile` to instruct the container builder how to construct your container:
```Dockerfile
FROM node:12-alpine
WORKDIR /app
EXPOSE 3000
CMD ["npm", "run", "start"]
COPY package* ./
RUN npm ci
COPY . .
```
1. Add a `.dockerignore` file to ignore unwanted files. This is important so that Skaffold knows what files it may ignore:
```.dockerignore
.git
node_modules
**/*.swp
**/*.tsx~
**/*.swn
**/*.swo
```
1. Add a kubernetes manifest for your app
```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: create-react-app
spec:
selector:
matchLabels:
app: create-react-app
template:
metadata:
labels:
app: create-react-app
spec:
containers:
- name: create-react-app
image: skaffold-create-react-app
ports:
- containerPort: 3000
```
1. Run `skaffold init` and add the following items:
* Tell Skaffold to copy `.ts` or `.tsx` files into your container instead of rebuilding:
```yaml
build:
artifacts:
- image: skaffold-create-react-app
sync:
infer:
- '**/*.ts'
- '**/*.tsx'
- '**/*.css'
```
This sync mode works entirely different to docker-compose with a local volume, as it copies the files into the running container.
The advantage is that this will work no matter how your kubernetes cluster is set up, be it remote or local.
* Tell Skaffold which port to forward so that you can access your app on localhost:
```yaml
portForward:
- resourceType: deployment
resourceName: create-react-app
port: 3000
```
1. Start developing with
skaffold dev --port-forward
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).
1. Access your app on `http://localhost:3000`.
When you make changes, the changed files should be sync'ed into the container and the node watcher should pick up the changes.
In particular, the container should _not rebuild_.
If it does nevertheless, run `skaffold dev -v debug` and look out for temporary files which should be added to `.dockerignore`.
> :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.
**Happy hacking!**