Setting up the frontend side is easier than the backend side because our client app does not depend on external services or packages. You can see the full code here.

Create Dockerfile

Since our client app does not import code from the validation or libs package, we only import our client app alone, unlike the server app.

Update API URL

Because our API URL depends on the port in the server app, we need to move the API URL value to the environment variables. Make sure the variable value has the VITE_ prefix; otherwise, the variable cannot be detected by Vite.

Add Docker Compose File

For the client service, we need to import the Dockerfile, mount the local file to Docker, add the environment variables, and also make sure that we add --host to the command to ensure we can expose the port.

If you encounter an issue where the hot reload is not working, make sure you add the usePolling configuration in vite.config.ts.

To run the app, we need to execute the command yarn compose:dev up. This command will build and create a new container for us to run.