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.

2. Add a Dockerfile to instruct the container builder how to construct your container:

   FROM node:12-alpine
   
   WORKDIR /app
   EXPOSE 3000
   CMD ["npm", "run", "start"]
   
   COPY package* ./
   RUN npm ci
   COPY . .

3. Add a .dockerignore file to ignore unwanted files. This is important so that Skaffold knows what files it may ignore:

   .git
   node_modules
   **/*.swp
   **/*.tsx~
   **/*.swn
   **/*.swo
   

4. Add a kubernetes manifest for your app

   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

5. Run skaffold init and add the following items:

   • Tell Skaffold to copy .ts or .tsx files into your container instead of rebuilding:

     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:

     portForward:
     - resourceType: deployment
       resourceName: create-react-app
       port: 3000

6. 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.

7. 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.

⚠️ 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!