I'm trying to develop an angular app using tilt on a local k3s cluster. When I make a change to a file in local, I see that the change is taken into account by tilt, and I can see the change reflected in the pod.
The change isn't reflected in the browser though, despite running the command ng serve --port 8080 --live-reload --watch.
What am I doing wrong?
Github issue
https://github.com/tilt-dev/tilt/issues/5039
Notes (edit):
- on running "trigger update" from tilt the changes are taken into account, so i don't think that this is a cache issue
- I can see from the tilt logs that the command
ng serve --port 8080 --live-reload --watchwas indeed used to run the app
Reproducible example
To replicate this, see minimal example here:
# install repo
git clone git@github.com:prestto/tilt_angular.git
cd tilt_angular
# run tilt
tilt up
Then:
- navigate to
http://localhost:8080/ - make a change in
front/src/app/app.component.html - Hard refresh the browser at
http://localhost:8080/
Summary of files:
Dockerfile
FROM node:14.18.0-buster
WORKDIR /app
ADD ./front/package.json .
ADD ./front/package-lock.json .
RUN npm install
ADD ./front .
ENTRYPOINT ["npm", "run", "start"]
Tiltfile
k8s_yaml('./k8s/front.yml')
k8s_resource('bitbuyer-front', port_forwards=8080)
docker_build('user632716/bitbuyer-front:latest', '.', dockerfile='./docker/Dockerfile-bitbuyer-front',
live_update=[
# when package.json changes, we need to do a full build
fall_back_on(['package.json', 'package-lock.json']),
# Map the local source code into the container under /src
sync('.', '/app'),
])
package.json
{
"name": "front",
"version": "0.0.0",
"scripts": {
"start": "ng serve --port 8080 --live-reload --watch"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.9",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/material": "^12.2.9",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.9",
"@angular/cli": "~12.2.9",
"@angular/compiler-cli": "~12.2.0",
"@types/jasmine": "~3.8.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}
K8s deployment
apiVersion: apps/v1
kind: Deployment
metadata:
name: bitbuyer-front
labels:
app: bitbuyer-front
spec:
selector:
matchLabels:
app: bitbuyer-front
template:
metadata:
labels:
app: bitbuyer-front
spec:
containers:
- name: bitbuyer-front
image: user632716/bitbuyer-front:latest
ports:
- containerPort: 8080
resources:
requests:
memory: "1000Mi"
cpu: "250m"
limits:
memory: "1700Mi"
cpu: "500m"
env:
- name: ENV
value: DEV
