Manual Image Build

To avoid caching issues and ensure the latest code is always used, it is recommended to manually build the Docker image after building your app locally. This can be done for the UI, BFF, and SVC.

First, go to your application and remove any cache and build folders to avoid using cached images. In the UI you should for example delete the dist folder and nx cache by running the following command:

rm -rf .nx/cache ./dist

Then you can build your application (e.g. npm run build for the UI) and create a local docker image with e.g.:

docker build --no-cache -t hello_world_ui_local .

Now in the onecx-local-env navigate to the .env file at the same level as your hello-world.docker-compose.yaml. If the .env file does not exist, please create it first. If you want to use a local image for the UI, the image name for HELLO_WORLD_UI should match the name you used when building the local docker image in your application. So in this case, the images would look like this:

HELLO_WORLD_SVC=${DOCKER_REPO}/hello-world-svc:main-native
HELLO_WORLD_BFF=${DOCKER_REPO}/hello-world-bff:main-native
HELLO_WORLD_UI=hello_world_ui_local:latest

If you want to build local images for the BFF or SVC, you can update the corresponding image names in the .env file in the same way, so it would look like this for the BFF:

HELLO_WORLD_SVC=${DOCKER_REPO}/hello-world-svc:main-native
HELLO_WORLD_BFF=hello_world_bff_local:latest
HELLO_WORLD_UI=${DOCKER_REPO}/hello-world-ui:main

and like this for the SVC:

HELLO_WORLD_SVC=hello_world_svc_local:latest
HELLO_WORLD_BFF=${DOCKER_REPO}/hello-world-bff:main-native
HELLO_WORLD_UI=${DOCKER_REPO}/hello-world-ui:main

Now you can also import the initial data by running:

./import-onecx.sh

and start the service with:

docker compose -f hello-world.docker-compose.yaml --profile base up -d

Now the local image is used and changes in the application should be reflected under http://local-proxy/onecx-shell/admin/helloWorld/hello after rebuilding the image of the application with docker build --no-cache -t helloworld_local ..

If you want to your application to reflect changes immediately without rebuilding the image each time, you can set up your application for hot reloading by following these steps in the Enable Hot Reload section.