DEV Community

Akbar Nafisa
Akbar Nafisa

Posted on

Setup Docker Development for Frontend

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.

Image description

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.

Image description

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.

Image description

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

Image description

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.

Top comments (2)

Collapse
 
tri50ki profile image
trizn

error :
Cannot find the root of your workspace - are you sure you're currently in a workspace?
my-project-dev-client | info Visit yarnpkg.com/en/docs/cli/workspace for documentation about this command.

Collapse
 
akbarnafisa profile image
Akbar Nafisa

Hi, at which step does this error occur?