Skip to content

corneliusweig/skaffold-create-react-app

Repository files navigation

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!